Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
	<head>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
		<script>
      zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    </script>
    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous">
    </script>
  </head>
	<body>
    
    <script>
      window.setTimeout(function() {
        $(document.body).append('<iframe style="border:0px;position:absolute;top:0px;right:0px;width:270px;height:480px;" src="https://codepen.io/zingchart/full/ef639d5ca7dd69ae067720228a01d542"></iframe>');
      }, 2500);
    </script>
    
		<div id="zc"></div>
	
  </body>
</html>


              
            
!

CSS

              
                body { 
  margin:10px;
  padding:10px; 
}

*, input, button, select, textarea, label {
  font-family: 'Lucida Sans Unicode',Monaco,Tahoma,Verdana,Arial;
}
              
            
!

JS

              
                function addRemovePlots(gid, data) {

	var iPlots = zingchart.exec('zc', 'getplotlength', {
		graphid : gid
	});	
	
	if (data.length > iPlots) {
		for (var j=0;j<data.length-iPlots;j++) {
			zingchart.exec('zc', 'addplot', {
				graphid : gid,
				data : {
					values : []
				},
				update : false
			});
		}
	} else if (data.length < iPlots) {
		for (var j=iPlots-1;j>=data.length;j--) {
			zingchart.exec('zc', 'removeplot', {
				graphid : gid,
				plotindex : j,
				update : false
			});
		}
	}
	
	zingchart.exec('zc', 'update', {});
}

////////////////////////////////////////////
function updateObj(gid, type, aIds) {
	
	let result = [];
	for(let i=0;i<aIds.length;i++) {
		if(i===0) {
			result[i] =
				{
					id: aIds[i],
					borderLeft : '2px solid #E5E5E5',
					borderTop : '2px solid #E5E5E5',
					borderRight : '2px solid #E5E5E5',
					backgroundColor : bgColorMain
				}			
		} else {
			result[i] = 
				{
					id: aIds[i],
					backgroundColor : '#E5E5E5'
				}			
		}
	}

	return {
		type : type,
		graphid : gid, 
		data : result
	};
}

///////////////////////////////////////

// data = 0->'values',1->'dataValue',2->'min',3->'max',4->'background',5->'text',6->'tooltip',
//		  7->'valueBox['text','decimals','fontColor']',8->'marker'
function appendSeries(gid, plotidx, dataS, bUpdate) {
	
	let result = {
		data : {}
	};
	
	result.graphid = gid;
	if (plotidx !== null) {
		result.plotindex = plotidx;
	}

	result.data.values = dataS[0];
	
	if (dataS[1] !== null) {
		result.data['data-v'] = dataS[1];
	}
	if (dataS[2] !== null) {
		result.data.minSize = dataS[2];
	}
	if (dataS[3] !== null) {
		result.data.maxSize = dataS[3];
	}
	if (dataS[4] !== null) {
		result.data.backgroundColor = dataS[4];
	}
	if (dataS[5] !== null) {
		result.data.text = dataS[5];
	}
	if(dataS[6] != null) {
		result.data.tooltip = {};
		result.data.tooltip.text = dataS[6];
	}
	if(dataS[7] != null) {
		result.data.valueBox = {};
		result.data.valueBox.text = dataS[7][0];
		if(dataS[7][1] != null) {
			result.data.valueBox.decimals = dataS[7][1];
		}
		if(dataS[7][2] != null) {
			result.data.valueBox.fontColor= dataS[7][2];
		}
	}
	if(dataS[8] != null) {
		result.data.marker = {};
		result.data.marker.backgroundColor = dataS[8];
	}
	result.update = bUpdate;

	return result;
}

///////////////////////////////////////
function appendSeriesArray(gid, dataS, bUpdate) {

	let result = {
		data : []
	};
	
	result.graphid = gid;

	result.data[0] = {};
	
	result.data[0].values = dataS[0];
	result.data[0].text = dataS[1];
	
	result.data[0].tooltip = {};
	result.data[0].tooltip.text = dataS[2];

	result.data[0].valueBox = {};
	result.data[0].valueBox.text = dataS[3][0];
	result.data[0].valueBox.decimals = dataS[3][1];

	result.update = bUpdate;

	return result;
}


var bgColorMain = '#FFF';
var aYears = [2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019];
var aColors = ['#3CC1CF','#FBAE44','#485463','#EF413C','#999999','#4C4C4C'];

var aGender = ['Men','Women'];
var aAge = ['18-24','25-34','35-44','45-54','55-64','65+'];
var aRegion = ['Northeast','Midwest','South','West'];

// g2 ////////////////////////////////
var aSeries2_a = [48.48,59.06,64.82,66.54,56.31,66.28,72.31,79.82,75.03,77.52,74.34,82.93,86.13,86.79,86.27];
var aSeries2_b = [3.3,5.0,5.1,5.8,4.8,5.8,6.9,8.0,7.0,7.4,6.9,8.4,9.1,9.0,8.8];

var aTooltip2 = ['Per person expected Halloween spending','Total expected Halloween spending(in billions)'];
//////////////////////////////////////

// g3 /////////////////////////////////
var aSeries3_a = [
	[53,60,61,62,59,62,65,66,65,67,64,67,69,68,67],
	[95,96,95,96,94,96,96,96,96,95,94,94,95,95,95],
	[60,67,67,68,62,68,69,73,70,69,67,70,72,74,72],
	[24,30,33,32,30,33,39,41,36,36,34,35,37,35,34]
];

var aSeries3_b = [ 				
	[16.98,21.57,23.33,24.17,20.75,23.37,26.52,28.65,27.85,29.26,27.33,31.03,31.73,31.26,31.05],
	[17.09,18.72,19.84,20.39,17.99,20.29,21.05,23.27,22.37,23.39,23.10,24.43,25.27,25.47,25.37],
	[12.35,15.63,17.73,18.25,14.54,18.66,19.79,23.56,20.99,21.20,20.34,23.62,25.24,26.21,26.03],
	[2.06,3.14,3.92,3.73,3.02,3.95,4.96,4.34,3.82,3.67,3.57,3.84,3.88,3.85,3.82]
];

var aSeries3_c = [
	[1.2,1.8,1.8,2.1,1.8,2.0,2.5,2.9,2.6,2.8,2.5,3.1,3.4,3.2,3.2],
	[1.2,1.6,1.6,1.8,1.5,1.8,2.0,2.3,2.1,2.2,2.1,2.5,2.7,2.6,2.6],
	[0.8,1.3,1.4,1.6,1.2,1.6,1.9,2.4,2.0,2.0,1.9,2.4,2.7,2.7,2.7],
	[0.1,0.3,0.3,0.3,0.3,0.4,0.5,0.6,0.4,0.4,0.3,0.4,0.4,0.4,0.39]
];

var aTooltip3 = ['Costumes','Candy','Decorations','Greeting Cards']; 
//////////////////////////////////////

// g4 ////////////////////////////////

// gender
var aData4_a = [
	['67%','$96.13'], 
	['69%','$76.92']
];
var aSeries4_a = [
	[[2,0,32], [2,1,33]],
	[[5,0,33], [5,1,31]]
];

// age
var aData4_b = [
	['88%','$88.23'],
	['84%','$109.11'],
	['78%','$115.53'],
	['66%','$91.30'],
	['54%','$74.19'],
	['45%','$47.01']
];
var aSeries4_b = [
	[[1,0,30], [1,1,31]],
	[[2,0,32], [2,1,32]],
	[[3,0,32], [3,1,34]],
	[[4,0,30], [4,1,30]],
	[[5,0,26], [5,1,26]],
	[[6,0,26], [6,1,26]]
];

// region
var aData4_c = [
	['70%','$92.78'],
	['69%','77.57$'],
	['67%','$89.84'],
	['67%','$83.16']
];
var aSeries4_c = [
	[[1,0,30], [1,1,31]],
	[[2,0,32], [2,1,32]],
	[[3,0,32], [3,1,34]],
	[[4,0,30], [4,1,30]]
];
//////////////////////////////////////

// g5 ////////////////////////////////
var aTooltip5 = ['Costumes (including children<br>and pets)','Candy','Decorations','Greeting cards'];

var aSeries5_a = [
	[68,96,73,35], 
	[66,93,71,33]
];

var aSeries5_b = [
	[87,92,77,32],
	[88,93,80,40],
	[87,95,79,40],
	[68,96,73,31],
	[51,96,70,31],
	[32,94,57,31]
];

var aSeries5_c = [
	[68,95,75,40],
	[62,95,67,32],
	[69,95,73,34],
	[67,93,71,31]
];
//////////////////////////////////////

// g6 ////////////////////////////////
var aTooltip6 = ['Dress<br>in costume','Dress your<br>pet(s) in costume','Throw/attend<br>a party','Hand out<br>candy','Carve a<br>pumpkin','Visit a<br>haunted house','Take children<br>trick-or-treating','Decorate your<br>home/yard','Other<br>(please specify)'];

var aSeries6_a = [
	[47,15,36,68,41,22,27,41,3],
	[47,19,28,69,48,22,30,56,3]
];

var aSeries6_b = [
	[73,26,53,56,53,40,26,45,2],
	[68,27,42,60,54,34,41,50,2],
	[56,22,34,65,50,29,47,47,2],
	[44,16,29,72,46,20,29,52,3],
	[34,12,24,77,40,14,20,53,3],
	[19,4,16,78,29,5,12,45,6]
];

var aSeries6_c = [
	[48,18,33,69,41,22,26,50,3],
	[45,15,31,69,47,22,30,50,4],
	[46,18,30,69,43,24,30,47,2],
	[50,17,33,67,47,21,28,48,4]
];
//////////////////////////////////////

// g7 ////////////////////////////////
var aTooltip7 = ['Before September','September','First 2 weeks of October','Last 2 weeks of October'];

var aSeries7_a = [
	[6,28,42,24],
	[6,34,42,18]
];

var aSeries7_b = [
	[4,28,50,18],
	[7,40,40,13],
	[9,37,40,13],
	[6,30,44,19],
	[6,29,43,22],
	[4,21,39,37]
];

var aSeries7_c = [
	[7,32,41,20],
	[6,34,40,21],
	[6,31,43,20],
	[6,28,43,23]
];
//////////////////////////////////////

// g9 ////////////////////////////////
var aTooltip9_a = ['Print Media','Online search','Retail store or costume shop','Friends/family','Pop culture','Current Events','Facebook','Instagram','Pinterest','Twitter','YouTube','Blogs','Habit','Other','N/A'];
var aTooltip9 = ['Print Media (magazines, catalogs, etc.)','Online Search','Within a retail store or costume shop','Friends/Family','Pop Culture (celebrities, TV shows, movies, etc.)','Current Events','Facebook','Instagram','Pinterest','Twitter','YouTube','Blogs','Habit/Wear the same costume each year','Other','Does not apply/Will not wear costume'];

var aSeries9_a = [
	[11,35,28,20,16,7,16,14,18,6,14,3,6,3,27]
];

var aSeries9_b = [
	[12,35,27,21,18,8,19,15,12,9,19,4,6,3,26],
	[11,35,30,18,14,6,14,14,25,3,10,3,6,3,28]
];

var aSeries9_c = [
	[13,56,40,32,32,8,23,35,33,13,30,6,7,2,6],
	[14,48,35,26,25,10,25,25,28,10,21,7,6,2,9],
	[15,45,35,22,22,10,25,19,23,8,17,3,6,4,12],
	[12,33,29,18,13,8,15,9,18,3,12,2,4,3,27],
	[10,25,25,14,7,4,10,4,10,2,8,1,7,4,39],
	[7,12,13,10,3,3,5,1,5,0,2,1,8,4,58]
];
var aSeries9_d = [
	[13,35,30,20,15,8,15,14,17,7,14,4,5,3,27],
	[10,32,27,19,14,6,17,11,19,5,10,3,7,3,29],
	[12,36,29,20,17,7,19,16,19,6,16,4,6,3,26],
	[11,35,27,18,17,7,13,15,18,5,14,3,7,4,26]
];
//////////////////////////////////////

var g1 = {

	x : '0%',
	y : '0%',
	width : '100%',
	height : '6%',

	type : 'ring',
	backgroundColor : bgColorMain,
	borderBottom : '1px solid #EDEDED',

	plotarea : {
		margin : '60 0 0 0'
	},

	title : {
		text : 'Historical Spending',
		width : '100%',
		align : 'center',
		backgroundColor : '#485463',
		fontColor : '#FBAE44',
		fontWeight : 'bold',
		fontSize : 21,
		padding : 8
	},

	labels : [
		{
			x : 5,
			y : 38,
			width : '100%',
			borderBottom : '1px solid #EDEDED'
		},	
		{
			x : 10,
			y : 100,
			align : 'center',
			fontColor : '#485463',
			fontWeight : 'bold',
			fontSize : 28,
			text : '2019<br>Overview',
			padding : 0
		},
		{
			x : 195,
			y : 160,
			align : 'center',
			fontColor : '#646E7A',
			fontWeight : 'bold',
			fontSize : 12,
			text : 'Percent celebrating'			
		},
		{
			x : 430,
			y : 100,
			align : 'center',
			fontColor : '#3cc1cf',
			fontWeight : 'bold',
			fontSize : 36,
			text : '$86.27'
		},
		{
			x : 405,
			y : 150,
			align : 'center',
			fontColor : '#646E7A',
			fontWeight : 'bold',
			fontSize : 12,
			text : 'Average expected spending'			
		},		
		{
			x : 630,
			y : 100,
			align : 'center',
			fontColor : '#3cc1cf',
			fontWeight : 'bold',
			fontSize : 36,
			text : '$8.8B'
		},
		{
			x : 610,
			y : 150,
			align : 'center',
			fontColor : '#646E7A',
			fontWeight : 'bold',
			fontSize : 12,
			text : 'Total expected spending'			
		}		
	],

	scale : {
		sizeFactor : 1.2,
		offsetY : 30,
		offsetX : -150
	},

	scaleR : {
		refAngle : 180,
		aperture : 180
	},

	tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'bold',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},

	plot : {
		detach : false,
		borderWidth : 1,
		slice : '60%',
		valueBox : {
			decimals : 0,
			fontColor : '#D83B01',
			fontSize : 11,
			fontWeight : 'normal',
			placement : 'out'
		},
		animation : {
			effect : 3,
			method : 0,
			speed : 300,
			sequence : 1
		}
	},

	series : [
		{
			values : [68],
			backgroundColor : '#3CC1CF',
			tooltip : {
				text : '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span> Yes %node-value%'
			},
			valueBox : {
					text : 'Yes %node-value%',
					fontColor : '#3CC1CF',
					fontWeight : 'bold'
			}
		},
		{
			values : [32],
			backgroundColor : '#999999',
			tooltip : {
				text : '<span style="font-size:16px;color:#999999;">\u25CF</span> No %node-value%'
			},
			valueBox : {
				text : 'No %node-value%',
				fontColor : '#999999',
				fontWeight : 'bold'				
			}
		}
	]
};

var g2 = {

	x : '0%',
	y : '6%',
	width : '100%',
	height : '10%',

	type : 'line',
	backgroundColor : bgColorMain,

	plotarea : {
		margin : '80 50 0 40'
	},

	title : {
		text : 'Historical Halloween spending and celebration plans (2005 - 2019)',
		align : 'left',
		fontColor : '#464646',
		fontWeight : 'normal',
		fontStyle : 'italic',
		fontSize : 13,
		padding : '10 10 10 20',
	},

	labels : [
		{
			x : 20,
			y : 35,
			id : 'lb2a',
			borderLeft : '2px solid #E5E5E5',
			borderTop : '2px solid #E5E5E5',
			borderRight : '2px solid #E5E5E5',
			width : 370,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Average expected spending',
			padding : 6
		},
		{
			x : 390,
			y : 35,
			id : 'lb2b',
			backgroundColor : '#E5E5E5',
			width : 370,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Total expected spending',
			padding : 6
		}
	],

	plot : {
		aspect : 'spline',
		marker : {
			type : 'circle',
			borderWidth : 1,
			borderColor : '#3CC1CF',
			size : 3,
			backgroundColor : '#3CC1CF'
		},
		hoverMarker : {
			type : 'circle',
			size : 5,
			backgroundColor : '#FFF',
			borderWidth : 1,
			borderColor : '#3CC1CF'
		},
		valueBox : {
			text : '$%node-value',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 10
		},
		animation : {
			effect : 1,
			sequence : 2,
			speed : 100
		}
	},	

	tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'normal',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},

	legend : {
		layout : '1x',
		backgroundColor : 'none',
		margin : '330 auto auto auto',
		borderWidth : 0,
		marker : {
			type : 'circle',
			size : 8,
			borderWidth : 0,
		},
		item : {
			fontSize : 10,
			fontWeight : 'normal',
			color : '#464646'
		}
	},

	scaleX : {
		values : aYears,
		itemsOverlap : true,
		lineWidth : 0,
		item : {
			fontColor : '#464646',
			fontSize : 11,
			offsetY : -20
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},
	
	scaleY : {
		minValue : 'auto',
		offsetStart : 30,
		offsetEnd : 10,
		lineWidth : 0,
		item : {
			visible : false
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	series: [ 
		{
			values : aSeries2_a,
			lineColor : '#3CC1CF',
			lineWidth : 2,
			text : aTooltip2[0],
			tooltip : {
				text : '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Per person expected Halloween spending</b><br> %scale-key-value: $%node-value'
			}
		}
	]
};

var g3 = {

	x : '0%',
	y : '17%',
	width : '100%',
	height : '16%',

	type : 'line',
	backgroundColor : bgColorMain,

	plotarea : {
		margin : '130 50 40 40'
	},

	title : {
		offsetY : 5,
		text : 'Historical: Purchasing plans',
		width : '100%',
		align : 'center',
		backgroundColor : '#485463',
		fontColor : '#FBAE44',
		fontWeight : 'bold',
		fontSize : 21,
		padding : 8
	},	

	subtitle : {
		flat : true,
		text : 'Historical Halloween spending and celebration plans (2005 - 2019)',
		align : 'left',
		fontColor : '#464646',
		fontWeight : 'normal',
		fontStyle : 'italic',
		fontSize : 13,
		padding : '70 10 10 20',
	},

	labels : [
		{
			x : 5,
			y : 45,
			width : '100%',
			borderBottom : '1px solid #EDEDED'
		},
		{
			x : 20,
			y : 68,
			id : 'lb3a',
			borderLeft : '2px solid #E5E5E5',
			borderTop : '2px solid #E5E5E5',
			borderRight : '2px solid #E5E5E5',
			width : 250,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Percent spending',
			padding : 6
		},
		{
			x : 270,
			y : 68,
			id : 'lb3b',
			backgroundColor : '#E5E5E5',
			width : 250,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Per person spending',
			padding : 6
		},
		{
			x : 520,
			y : 68,
			id : 'lb3c',
			backgroundColor : '#E5E5E5',
			width : 250,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Total expected spending',
			padding : 6
		}
	],

	plot : {
		aspect : 'spline',
		marker : {
			type : 'circle',
			borderWidth : 0,
			size : 4
		},
		hoverMarker : {
			type : 'circle',
			size : 5,
			backgroundColor : '#FFF',
			borderWidth : 1
		},
		valueBox : {
			text : '%node-value%',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 10
		},
		animation : {
			effect : 1,
			sequence : 2,
			speed : 100
		}		
	},	

	tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'normal',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},

	legend : {
		layout : '1x',
		backgroundColor : 'none',
		margin : '460 auto 0 auto',
		borderWidth : 0,
		marker : {
			type : 'circle',
			size : 8,
			borderWidth : 0,
		},
		item : {
			fontSize : 10,
			fontWeight : 'normal',
			color : '#464646'
		}
	},

	scaleX : {
		values : aYears,
		itemsOverlap : true,
		lineWidth : 0,
		item : {
			fontColor : '#464646',
			fontSize : 11,
			offsetY : -40
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},
	
	scaleY : {
		minValue : 'auto',
		offsetStart : 45,
		offsetEnd : 5,		
		lineWidth : 0,
		item : {
			visible : false
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	series: [ 
		{
			values : aSeries3_a[0],
			lineColor : '#3CC1CF',
			lineWidth : 2,
			text : aTooltip3[0],
			tooltip : {
				text : '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Costumes</b><br> %scale-key-value: %node-value%'
			},
			marker : {
				backgroundColor : '#3CC1CF'
			},
			hoverMarker : {
				borderColor : '#3CC1CF'
			}
		},	
		{
			values : aSeries3_a[1],
			lineColor : '#FBAE44',
			lineWidth : 2,
			text : aTooltip3[1],
			tooltip : {
				text : '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Candy</b><br> %scale-key-value: %node-value%'
			},
			marker : {
				backgroundColor : '#FBAE44'
			},
			hoverMarker : {
				borderColor : '#FBAE44'
			}
		},
		{
			values : aSeries3_a[2],
			lineColor : '#485463',
			lineWidth : 2,
			text : aTooltip3[2],
			tooltip : {
				text : '<span style="font-size:16px;color:#485463;">\u25CF</span><b>Decorations</b><br> %scale-key-value: %node-value%'
			},
			marker : {
				backgroundColor : '#485463'
			},
			hoverMarker : {
				borderColor : '#485463'
			}
		},
		{
			values : aSeries3_a[3],
			lineColor : '#EF413C',
			lineWidth : 2,
			text : aTooltip3[3],
			tooltip : {
				text : '<span style="font-size:16px;color:#EF413C">\u25CF</span><b>Greeting Cards</b><br> %scale-key-value: %node-value%'
			},
			marker : {
				backgroundColor : '#EF413C'
			},
			hoverMarker : {
				borderColor : '#EF413C'
			}
		}			
	]

};

var g4 = {

	x : '0%',
	y : '32%',
	width : '100%',
	height : '10%',

	type : 'bubble',
	backgroundColor : bgColorMain,

	plotarea : {
		margin : '110 5 10 15'
	},

	title : {
		offsetY : 5,
		text : 'Demographics: Spending / celebrating',
		width : '100%',
		align : 'center',
		backgroundColor : '#485463',
		fontColor : '#FBAE44',
		fontWeight : 'bold',
		fontSize : 21,
		padding : 8
	},	

	labels : [
		{
			x : 5,
			y : 45,
			width : '100%',
			borderBottom : '1px solid #EDEDED'
		},
		{
			x : 20,
			y : 68,
			id : 'lb4a',
			borderLeft : '2px solid #E5E5E5',
			borderTop : '2px solid #E5E5E5',
			borderRight : '2px solid #E5E5E5',
			width : 250,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Gender',
			padding : 8
		},
		{
			x : 270,
			y : 68,
			id : 'lb4b',
			backgroundColor : '#E5E5E5',
			width : 250,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Age',
			padding : 8
		},
		{
			x : 520,
			y : 68,
			id : 'lb4c',
			backgroundColor : '#E5E5E5',
			width : 250,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Region',
			padding : 8
		}
	],

	tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'normal',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},

	plot : {
		valueBox : {
			fontSize : 11,
			fontWeight : 'normal',		
			placement : 'bottom'
		},
		animation : {
			effect : 3,
			sequence : 1,
			speed : 200
		}
	},

	scaleX : {
		minValue : 0,
		maxValue : 6,
		step : 1,
		offsetStart : 50,
		lineWidth : 0,
		item : {
			visible : false
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},
	
	scaleY : {
		offsetStart : 60,
		values : ['2019: Percent planning<br>to celebrate','2019: Total expected<br>spending'],
		minValue : 0,
		maxValue : 1,
		step : 1,
		lineWidth : 0,
		item : {
			visible : true,
			fontSize : 11,
			offsetX : 130,
			width : 130,
			paddingLeft : 5,
			offsetY : -15,
			align : 'left'
		},
		guide : {
			lineWidth : 1,
			lineColor : '#9BA2AA'
		},
		tick : {
			visible : false
		}
	},

	series: [ 
		{
			values : aSeries4_a[0],
			'data-a0' : aData4_a[0],
			minSize : 30,
			maxSize : 40,
			valueBox : {
				text : '%data-a0',
				fontColor : '#3CC1CF'
			},
			tooltip : {
				text : '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men</b><br> %data-a0'
			},
			marker : {
				backgroundColor : '#3CC1CF'
			}
		},
		{
			values : aSeries4_a[1],
			'data-a1' : aData4_a[1],
			minSize : 30,
			maxSize : 40,
			valueBox : {
				text : '%data-a1',
				fontColor : '#FBAE44'
			},			
			tooltip : {
				text : '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women</b><br> %data-a1'
			},
			marker : {
				backgroundColor : '#FBAE44'
			}
		}
	]
};

var g5 = {

	x : '0%',
	y : '42%',
	width : '100%',
	height : '8%',

	type : 'bar',
	backgroundColor : '#E5E5E5',

	plotarea : {
		margin : '20 10 50 10'
	},

	plot: {
		barsSpaceLeft : 0.25,
		barsSpaceRight : 0.25,
		valueBox : {
			text : '%node-value%',
			fontSize : 9,
			fontColor : '#464646',
			fontWeight : 'normal',
			placement : 'top-out',
			angle : 270
		},
		animation : {
			effect : 4,
			sequence : 1,
			speed : 100
		}		
	},

	tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'normal',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},

	legend : {
		layout : '1x',
		backgroundColor : 'none',
		margin : '235 auto auto auto',
		borderWidth : 0,
		marker : {
			type : 'circle',
			size : 8,
			borderWidth : 0,
		},
		item : {
			fontSize : 11,
			fontWeight : 'normal',
			color : '#464646'
		}
	},

	scaleX : {
		values : aTooltip5,
		label : {
			text : '2019: Percent<br>planning to<br>purchase',
			fontSize : 11,
			fontWeight : 'normal',
			offsetX : -55,
			offsetY : -85,
			align : 'left'
		},		
		offsetStart : 50,
		lineWidth : 2,
		lineColor : '#9BA2AA',
		item : {
			visible : true,
			fontSize : 11,
			align : 'center',
			fontColor : '#464646'
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	scaleY : {
		lineWidth : 0,
		item : {
			visible : false
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	series: [ 
		{
			values : aSeries5_a[0],
			backgroundColor : '#3CC1CF',
			text : 'Men',
			tooltip : {
				text : '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men: %node-value%</b><br>%scale-key-value'
			}
		},
		{
			values : aSeries5_a[1],
			backgroundColor : '#FBAE44',
			text : 'Women',
			tooltip : {
				text : '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women: %node-value%</b><br>%scale-key-value'
			}
		}
	]
};

var g6 = {

	x : '0%',
	y : '50%',
	width : '100%',
	height : '10%',

	type : 'bar',
	backgroundColor : bgColorMain,

	plotarea : {
		margin : '120 20 30 20'
	},

	title : {
		offsetY : 5,
		text : 'Demographics: Plans / shopping',
		width : '100%',
		align : 'center',
		backgroundColor : '#485463',
		fontColor : '#FBAE44',
		fontWeight : 'bold',
		fontSize : 21,
		padding : 8
	},	

	subtitle : {
		flat : true,
		text : '2019: How will consumers celebrate for Halloween?',
		align : 'left',
		fontColor : '#464646',
		fontWeight : 'normal',
		fontStyle : 'italic',
		fontSize : 13,
		padding : '70 10 10 20'
	},

	labels : [
		{
			x : 5,
			y : 43,
			width : '100%',
			borderBottom : '1px solid #EDEDED'
		},
		{
			x : 20,
			y : 64,
			id : 'lb6a',
			borderLeft : '2px solid #E5E5E5',
			borderTop : '2px solid #E5E5E5',
			borderRight : '2px solid #E5E5E5',
			width : 250,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Gender',
			padding : 8
		},
		{
			x : 270,
			y : 64,
			id : 'lb6b',
			backgroundColor : '#E5E5E5',
			width : 250,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Age',
			padding : 8
		},
		{
			x : 520,
			y : 64,
			id : 'lb6c',
			backgroundColor : '#E5E5E5',
			width : 250,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Region',
			padding : 8
		}
	],

	plot: {
		barsSpaceLeft : 0.25,
		barsSpaceRight : 0.25,
		valueBox : {
			text : '%node-value%',
			fontSize : 9,
			fontColor : '#464646',
			fontWeight : 'normal',
			placement : 'top-out',
			angle : 270
		},
		animation : {
			effect : 3,
			sequence : 1,
			speed : 50
		}			
	},

	tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'normal',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},

	scaleX : {
		values : aTooltip6,
		maxItems : 999,
		itemsOverlap : true,
		lineWidth : 2,
		lineColor : '#9BA2AA',
		item : {
			visible : true,
			fontSize : 10,
			align : 'center',
			fontWeight : 'bold',
			fontColor : '#464646',
			offsetY : -5
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	scaleY : {
		lineWidth : 0,
		minValue : 0,
		maxValue : 100, 
		step : 10,
		item : {
			visible : false
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	series: [ 
		{
			values : aSeries6_a[0],
			backgroundColor : '#3CC1CF',
			text : 'Men',
			tooltip : {
				text : '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men: %node-value%</b><br>%scale-key-value'
			}
		},
		{
			values : aSeries6_a[1],
			backgroundColor : '#FBAE44',
			text : 'Women',
			tooltip : {
				text : '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women: %node-value%</b><br>%scale-key-value'
			}
		}
	]
};

var g7 = {

	x : '0%',
	y : '60%',
	width : '100%',
	height : '7%',

	type : 'bar',
	backgroundColor : bgColorMain,

	plotarea : {
		margin : '30 10 30 10'
	},

	title : {
		text : '2019: When will consumers begin shopping for Halloween?',
		align : 'left',
		fontColor : '#464646',
		fontWeight : 'normal',
		fontStyle : 'italic',
		fontSize : 13,
		padding : '20 10 10 20'
	},

	labels : [
		{
			x : 5,
			y : 5,
			width : '100%',
			borderBottom : '1px solid #EDEDED'
		}
	],

	plot: {
		barsSpaceLeft : 0.25,
		barsSpaceRight : 0.25,
		valueBox : {
			text : '%node-value%',
			fontSize : 9,
			fontColor : '#464646',
			fontWeight : 'normal',
			placement : 'top-out',
			angle : 270
		},
		animation : {
			effect : 3,
			sequence : 1,
			speed : 50
		}			
	},

	tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'normal',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},

	legend : {
		layout : '1x',
		backgroundColor : 'none',
		margin : '220 auto 0 auto',
		borderWidth : 0,
		marker : {
			type : 'circle',
			size : 8,
			borderWidth : 0,
		},
		item : {
			fontSize : 10,
			fontWeight : 'normal',
			color : '#464646'
		}
	},	

	scaleX : {
		values : aTooltip7,
		lineWidth : 2,
		lineColor : '#9BA2AA',
		item : {
			visible : true,
			fontSize : 11,
			align : 'center',
			fontWeight : 'bold',
			fontColor : '#464646',
			offsetY : -5
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	scaleY : {
		lineWidth : 0,
		minValue : 0,
		maxValue : 60, 
		step : 10,
		item : {
			visible : false
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	series: [ 
		{
			values : aSeries7_a[0],
			backgroundColor : '#3CC1CF',
			text : 'Men',
			tooltip : {
				text : '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men: %node-value%</b><br>%scale-key-value'
			}
		},
		{
			values : aSeries7_a[1],
			backgroundColor : '#FBAE44',
			text : 'Women',
			tooltip : {
				text : '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women: %node-value%</b><br>%scale-key-value'
			}
		}
	]
};

var g8 = {

	x : '0%',
	y : '68%',
	width : '100%',
	height : '7%',

	type : 'bubble',
	backgroundColor : bgColorMain,

	plotarea : {
		margin : '0 40 10 40'
	},

	title : {
		text : 'Demographics: Inspiration',
		width : '100%',
		align : 'center',
		backgroundColor : '#485463',
		fontColor : '#FBAE44',
		fontWeight : 'bold',
		fontSize : 21,
		padding : 8
	},	

	subtitle : {
		text : '2019: Top 5 ways to gather Halloween inspiration:',
		align : 'left',
		fontColor : '#464646',
		fontWeight : 'normal',
		fontStyle : 'italic',
		fontSize : 13,
		padding : '25 10 0 20'
	},

	labels : [
		{
			x : 5,
			y : 38,
			width : '100%',
			borderBottom : '1px solid #EDEDED'
		}
	],

	tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'normal',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},

	plot : {
		valueBox : {
			fontSize : 11,
			fontWeight : 'normal',		
			placement : 'bottom'
		},
		animation : {
			effect : 3,
			sequence : 1,
			speed : 100
		}		
	},

	legend : {
		layout : 'float',
		backgroundColor : 'none',
		margin : '220 auto 0 auto',
		borderWidth : 0,
		marker : {
			type : 'circle',
			size : 8,
			borderWidth : 0,
		},
		item : {
			fontSize : 10,
			fontWeight : 'normal',
			color : '#464646'
		}
	},	

	scaleX : {
		minValue : 0,
		maxValue : 4,
		step : 1,
		offsetStart : 50,
		lineWidth : 0,
		item : {
			visible : false
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},
	
	scaleY : {
		offsetStart : 80,
		minValue : 0,
		maxValue : 1,
		step : 1,
		lineWidth : 0,
		item : {
			visible : false,
		},
		guide : {
			visible : false,
		},
		tick : {
			visible : false
		}
	},

	series: [ 
		{
			values:[[0,0,35]],
			marker : {
				backgroundColor : '#3CC1CF'
			},
			text : 'Online search',
			minSize : 40,
			maxSize : 50,
			valueBox : {
				text : '%node-size-value%',
				fontColor : '#3CC1CF'
			},
			tooltip : {
				text : '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Online search</b><br> %node-size-value%'
			}
		},
		{
			values:[[1,0,28]],
			marker : {
				backgroundColor : '#FBAE44'
			},
			text : 'Retail store or costume shop',
			minSize : 40,
			maxSize : 50,
			valueBox : {
				text : '%node-size-value%',
				fontColor : '#FBAE44'
			},			
			tooltip : {
				text : '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Retail store or costume shop</b><br> %node-size-value%'
			}
		},
		{
			values:[[2,0,20]],
			marker : {
				backgroundColor : '#485463'
			},
			text : 'Friends/Family',		
			minSize : 40,
			maxSize : 50,
			valueBox : {
				text : '%node-size-value%',
				fontColor : '#485463'
			},			
			tooltip : {
				text : '<span style="font-size:16px;color:#485463;">\u25CF</span><b>Friends/Family</b><br> %node-size-value%'
			}
		},
		{
			values:[[3,0,18]],
			marker : {
				backgroundColor : '#EF413C'
			},
			text : 'Pinterest',			
			minSize : 40,
			maxSize : 50,
			valueBox : {
				text : '%node-size-value%',
				fontColor : '#EF413C'
			},			
			tooltip : {
				text : '<span style="font-size:16px;color:#EF413C">\u25CF</span><b>Pinterest</b><br> %node-size-value%'
			}
		},
		{
			values:[[4,0,16]],
			marker : {
				backgroundColor : '#999999'
			},
			text : 'Facebook',		
			minSize : 40,
			maxSize : 50,
			valueBox : {
				text : '%node-size-value%',
				fontColor : '#999999'
			},			
			tooltip : {
				text : '<span style="font-size:16px;color:#999999">\u25CF</span><b>55-64</b><br> %node-size-value%'
			}
		}
	]
};

var g9 = {

	x : '0%',
	y : '74%',
	width : '100%',
	height : '10%',

	type : 'bar',
	backgroundColor : bgColorMain,

	plotarea : {
		margin : '100 10 10 40'
	},

	title : {
		text : '2019: Where do consumers look for Halloween inspiration?',
		align : 'left',
		fontColor : '#464646',
		fontWeight : 'normal',
		fontStyle : 'italic',
		fontSize : 13,
		padding : '100 10 10 20'
	},

	labels : [
		{
			x : 5,
			y : 43,
			width : '100%',
			borderBottom : '1px solid #EDEDED'
		},
		{
			x : 20,
			y : 64,
			id : 'lb9a',
			borderLeft : '2px solid #E5E5E5',
			borderTop : '2px solid #E5E5E5',
			borderRight : '2px solid #E5E5E5',
			width : 190,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'All',
			padding : 8
		},
		{
			x : 210,
			y : 64,
			id : 'lb9b',
			backgroundColor : '#E5E5E5',
			borderRight : '2px solid #E5E5E5',
			width : 200,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Gender',
			padding : 8
		},
		{
			x : 410,
			y : 64,
			id : 'lb9c',
			backgroundColor : '#E5E5E5',
			borderRight : '2px solid #E5E5E5',
			width : 190,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Age',
			padding : 8
		},
		{
			x : 600,
			y : 64,
			id : 'lb9d',
			backgroundColor : '#E5E5E5',
			borderRight : '2px solid #E5E5E5',
			width : 200,
			align : 'center',
			fontColor : '#464646',
			fontWeight : 'normal',
			fontSize : 12,
			text : 'Region',
			padding : 8
		}		
	],

	plot: {
		barsSpaceLeft : 0.15,
		barsSpaceRight : 0.15,
		valueBox : {
			text : '%node-value%',
			fontSize : 9,
			fontColor : '#464646',
			fontWeight : 'normal',
			placement : 'top-out',
			angle : 270
		},
		animation : {
			effect : 4,
			sequence : 1,
			speed : 100
		}		
	},

	tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'normal',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},

	legend : {
		layout : 'float',
		backgroundColor : 'none',
		margin : '390 auto 0 auto',
		borderWidth : 0,
		marker : {
			type : 'circle',
			size : 8,
			borderWidth : 0,
		},
		item : {
			fontSize : 10,
			fontWeight : 'normal',
			color : '#464646'
		}
	},	

	scaleX : {
		values : aTooltip9_a,
		maxItems : 999,
		itemsOverlap : true,
		lineWidth : 1,
		lineColor : '#9BA2AA',
		item : {
			visible : true,
			fontSize : 10,
			align : 'center',
			fontWeight : 'bold',
			fontColor : '#464646',
			angle : 305,
			maxChars : 13
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	scaleY : {
		lineWidth : 0,
		minValue : 0,
		maxValue : 65, 
		step : 10,
		item : {
			visible : false
		},
		guide : {
			visible : false
		},
		tick : {
			visible : false
		}
	},

	series: [ 
		{
			values : aSeries9_a[0],
			backgroundColor : '#3CC1CF',
			text : 'All',
			tooltip : {
				text : '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>All: %node-value%</b><br>%scale-key-value'
			}
		}
	]
};

var g10 = {

	x : '0%',
	y : '87%',
	width : '100%',
	height : '13%',

	type : 'treemap',
	backgroundColor : bgColorMain,

	plotarea : {
		margin : '90 20 30 20'
	},

	title : {
		offsetY : 10,
		text : 'Purchase Locations',
		width : '100%',
		align : 'center',
		backgroundColor : '#485463',
		fontColor : '#FBAE44',
		fontWeight : 'bold',
		fontSize : 21,
		padding : 8
	},	

	subtitle : {
		text : '2019: Where consumers plan to shop.',
		align : 'left',
		fontColor : '#464646',
		fontWeight : 'normal',
		fontStyle : 'italic',
		fontSize : 13,
		padding : '35 10 0 20'
	},

	labels : [
		{
			x : 5,
			y : 48,
			width : '100%',
			borderBottom : '1px solid #EDEDED'
		}
	],

/*
	_tooltip : {
		backgroundColor : '#000',
		align : 'center',
		alpha : 0.75,
		borderWidth : 0,
		fontColor : '#fff',
		fontSize : 11,
		fontWeight : 'normal',
		borderRadius : 4,
		callout : true,
		padding : '5 10 10 5'
	},
*/

	source : {
		text : 'Source: NRF\'s Annual 2019 Halloween Spending Survey, conducted by Prosper Insights & Analytics',
		fontColor : '#464646',
		fontWeight : 'normal',
		fontStyle : 'italic',
		fontSize : 13,
		align : 'left',
		marginBottom : 2,
		paddingLeft : 10
	},

	options : {
		aspectType : 'palette',
		palette : ['#3CC1CF','#FBAE44','#485463','#EF413C','#999999','#3CC1CF','#FBAE44','#485463','#EF413C','#999999','#3CC1CF','#FBAE44','#485463','#EF413C','#999999'],
		_palette : ['#3CC1CF','#485463','#FBAE44','#999999','#FBAE44','#485463','#3CC1CF','#999999','#EF413C','#485463','#EF413C','#FBAE44','#3CC1CF','#999999','#3CC1CF'],
		box : {
			borderColor : '#fff',
			_text : '%text<br>%value%'
		},
		tooltipBox : {
			backgroundColor : '#000',
			align : 'center',
			alpha : 0.75,
			borderWidth : 0,
			fontColor : '#fff',
			fontSize : 11,
			fontWeight : 'normal',
			borderRadius : 4,
			callout : true,
			padding : '5 10 10 5',
			text : '%text<br>%value%'
		}
	},

	series : [
		{
			text : 'Discount store',
			value : 42
		},
		{
			text : 'Speciality Halloween/costume store',
			value : 36			
		},
		{
			text : 'Grocery store/supermarket',
			value : 25
		},
		{
			text : 'Online',
			value : 25
		},
		{
			text : 'Department store',
			value : 23
		},
		{
			text : 'Crafts or fabrics store',
			value : 12
		},
		{
			text : 'Thrift stores/resale shop',
			value : 11
		},
		{
			text : 'Home decor store',
			value : 11
		},
		{
			text : 'Clothing store',
			value : 11
		},
		{
			text : 'Drug store',
			value : 8
		},
		{
			text : 'Local/small business',
			value : 8
		},
		{
			text : 'Greeting card/gift store',
			value : 8
		},
		{
			text : 'Home improvement store',
			value : 6
		},
		{
			text : 'Other',
			value : 5
		},
		{
			text : 'Catalog',
			value : 3
		}								
	]
};

var chartJSON = {
	graphset : [g1, g2, g3, g4, g5, g6, g7, g8, g9, g10]
};



zingchart.render({
		id : "zc",
		width : 800,
		height : 3200,
		output : "svg",
		data : chartJSON
	});

	window.selectedIndex = -1;

	zingchart.bind('zc', 'label_click', function(l) {

		switch(l.graphid) {

			case 'id1' : {

				if(l.labelid === 'lb2b') {
					
					let sTxt = '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>' + aTooltip2[1] + '</b><br> %scale-key-value: $%node-valueB';
					zingchart.exec('zc', 'appendseriesdata', 
						appendSeriesArray(l.graphid, [aSeries2_b, aTooltip2[1], sTxt, ['$%node-valueB',1]], false)
					);

					zingchart.exec('zc', 'updateobject', 
						updateObj(l.graphid, 'label', ['lb2b','lb2a'])
					);

					zingchart.exec('zc', 'update', {});
		
				} else if (l.labelid === 'lb2a'){

					let sTxt = '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>' + aTooltip2[0] + '</b><br> %scale-key-value: $%node-value';
					zingchart.exec('zc', 'appendseriesdata',
						appendSeriesArray(l.graphid, [aSeries2_a, aTooltip2[0], sTxt, ['$%node-value',2]], false)
					);
					
					zingchart.exec('zc', 'updateobject', 
						updateObj(l.graphid, 'label', ['lb2a','lb2b'])
					);

					zingchart.exec('zc', 'update', {});
				}
				break;
			}
			////////////////////////////////////
			
			case 'id2' : {

				if(l.labelid === 'lb3b') {
					
					let aTxt = [];
					for(var i=0;i<aSeries3_b.length;i++) {

						aTxt[i] = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aTooltip3[i] + '</b><br> %scale-key-value: $%node-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries3_b[i], null, null, null, null, null, aTxt[i], ['$%node-value',null,null], null], false)
						);
					}

					zingchart.exec('zc', 'updateobject', 
						updateObj(l.graphid, 'label', ['lb3b','lb3a','lb3c'])
					);

					zingchart.exec('zc', 'update', {});
		
				} else if (l.labelid === 'lb3c') {

					let aTxt = [];
					for(var i=0;i<aSeries3_c.length;i++) {

						aTxt[i] = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aTooltip3[i] + '</b><br> %scale-key-value: $%node-valueB';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries3_c[i], null, null, null, null, null, aTxt[i], ['$%node-valueB',null,null], null], false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb3c','lb3a','lb3b'])
					);

					zingchart.exec('zc', 'update', {});

				} else if (l.labelid === 'lb3a') {

					for(var i=0;i<aSeries3_a.length;i++) {

						aTxt[i] = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aTooltip3[i] + '</b><br> %scale-key-value: $%node-value%';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries3_a[i], null, null, null, null, null, aTxt[i], ['$%node-value%',null,null], null], false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb3a','lb3b','lb3c'])
					);

					zingchart.exec('zc', 'update', {});
				}
				break;
			}				
			////////////////////////////////////
			
			case 'id3' : {

				if(l.labelid === 'lb4b') {

					addRemovePlots(l.graphid, aSeries4_b);
					
					for(var i=0;i<aSeries4_b.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aAge[i] + '</b><br> %data-v';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries4_b[i], aData4_b[i], 30, 40, null, null, sTxt, ['%data-v',null,aColors[i]], aColors[i]], false)
						);
					}
					
					addRemovePlots('id4', aSeries5_b);

					for(var i=0;i<aSeries5_b.length;i++) {
						
						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aAge[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries('id4', i, [aSeries5_b[i], null, null, null, aColors[i], aAge[i], sTxt, null, null],false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb4b','lb4a','lb4c'])
					);	
					
					zingchart.exec('zc', 'update', {});
		
				} else if (l.labelid === 'lb4c') {

					addRemovePlots(l.graphid, aSeries4_c);

					for(var i=0;i<aSeries4_c.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aRegion[i] + '</b><br> %data-v';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries4_c[i], aData4_c[i], 30, 40, null, null, sTxt, ['%data-v',null,aColors[i]], aColors[i]], false)
						);
					}

					addRemovePlots('id4', aSeries5_c);

					for(var i=0;i<aSeries5_c.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aRegion[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries('id4', i, [aSeries5_c[i], null, null, null, aColors[i], aRegion[i], sTxt, null, null],false)
						);
					}					

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb4c','lb4a','lb4b'])
					);
					
					zingchart.exec('zc', 'update', {});

				} else if (l.labelid === 'lb4a') {

					addRemovePlots(l.graphid, aSeries4_a);

					for(var i=0;i<aSeries4_a.length;i++) {
					
						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aGender[i] + '</b><br> %data-v';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries4_a[i], aData4_a[i], 30, 40, null, null, sTxt, ['%data-v',null,aColors[i]], aColors[i]], false)
						);
					}

					addRemovePlots('id4', aSeries5_a);

					for(var i=0;i<aSeries5_a.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aGender[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries('id4', i, [aSeries5_a[i], null, null, null, aColors[i], aGender[i], sTxt, null, null],false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb4a','lb4b','lb4c'])
					);

					zingchart.exec('zc', 'update', {});
				}
				break;
			}
			////////////////////////////////////

			case 'id5' : {

				if(l.labelid === 'lb6b') {

					addRemovePlots(l.graphid, aSeries6_b);

					for(var i=0;i<aSeries6_b.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aAge[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries6_b[i], null, null, null, aColors[i], null, sTxt, null, null], false)
						);
					}

					addRemovePlots('id6', aSeries7_b);

					for(var i=0;i<aSeries7_b.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aAge[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries('id6', i, [aSeries7_b[i], null, null, null, aColors[i], aAge[i], sTxt, null, null], false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb6b','lb6a','lb6c'])
					);

					zingchart.exec('zc', 'update', {});
		
				} else if (l.labelid === 'lb6c') {

					addRemovePlots(l.graphid, aSeries6_c);

					for(var i=0;i<aSeries6_c.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aRegion[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries6_c[i], null, null, null, aColors[i], null, sTxt, null, null], false)
						);
					}

					addRemovePlots('id6', aSeries7_c);

					for(var i=0;i<aSeries7_c.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aRegion[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries('id6', i, [aSeries7_c[i], null, null, null, aColors[i], aRegion[i], sTxt, null, null], false)
						);
					}					

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb6c','lb6a','lb6b'])
					);
					
					zingchart.exec('zc', 'update', {});

				} else if (l.labelid === 'lb6a') {

					addRemovePlots(l.graphid, aSeries6_a);					

					for(var i=0;i<aSeries6_a.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aGender[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries6_a[i], null, null, null, aColors[i], null, sTxt, null, null], false)
						);
					}

					addRemovePlots('id6', aSeries7_a);

					for(var i=0;i<aSeries7_a.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aGender[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries('id6', i, [aSeries7_a[i], null, null, null, aColors[i], aGender[i], sTxt, null, null], false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb6a','lb6b','lb6c'])
					);
					
					zingchart.exec('zc', 'update', {});
				}
				break;
			}
			////////////////////////////////////
	
			case 'id8' : {

				if(l.labelid === 'lb9b') {

					addRemovePlots(l.graphid, aSeries9_b);
					
					for(var i=0;i<aSeries9_b.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aGender[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries9_b[i], null, null, null, aColors[i], aGender[i], sTxt, null, null], false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb9b','lb9a','lb9c','lb9d'])
					);	

					zingchart.exec('zc', 'modify', {
						graphid : l.graphid,
						data : {
							scaleX : {
								values : aTooltip9
							}
						}
					});
					
					zingchart.exec('zc', 'update', {});
		
				} else if (l.labelid === 'lb9c') {

					addRemovePlots(l.graphid, aSeries9_c);

					for(var i=0;i<aSeries9_c.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aAge[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries9_c[i], null, null, null, aColors[i], aAge[i], sTxt, null, null], false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb9c','lb9a','lb9b','lb9d'])
					);

					zingchart.exec('zc', 'modify', {
						graphid : l.graphid,
						data : {
							scaleX : {
								values : aTooltip9
							}
						}
					});

					zingchart.exec('zc', 'update', {});

				} else if (l.labelid === 'lb9d') {

					addRemovePlots(l.graphid, aSeries9_d);					

					for(var i=0;i<aSeries9_d.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>' + aRegion[i] + ': %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries9_d[i], null, null, null, aColors[i], aRegion[i], sTxt, null, null], false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb9d','lb9a','lb9b','lb9c'])
					);

					zingchart.exec('zc', 'modify', {
						graphid : l.graphid,
						data : {
							scaleX : {
								values : aTooltip9
							}
						}
					});

					zingchart.exec('zc', 'update', {});


				} else if (l.labelid === 'lb9a') {

					addRemovePlots(l.graphid, aSeries9_a);

					for(var i=0;i<aSeries9_a.length;i++) {

						let sTxt = '<span style="font-size:16px;color:' + aColors[i] + ';">\u25CF</span><b>All: %node-value%</b><br>%scale-key-value';
						zingchart.exec('zc', 'appendseriesdata', 
							appendSeries(l.graphid, i, [aSeries9_a[i], null, null, null, aColors[i], 'All', sTxt, null, null], false)
						);
					}

					zingchart.exec('zc', 'updateobject',
						updateObj(l.graphid, 'label', ['lb9a','lb9b','lb9c','lb9d'])
					);

					zingchart.exec('zc', 'modify', {
						graphid : l.graphid,
						data : {
							scaleX : {
								values : aTooltip9_a
							}
						}
					});

					zingchart.exec('zc', 'update', {});
				}
				break;
			}
			////////////////////////////////////					
		}
	});
              
            
!
999px

Console