<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script nonce="undefined" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<style>
.zc-html,
.zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="zc" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
function addRemovePlots(gid, data) {
let iPlots = zingchart.exec('zc', 'getplotlength', {
graphid: gid,
});
if (data.length > iPlots) {
for (let j = 0; j < data.length - iPlots; j++) {
zingchart.exec('zc', 'addplot', {
graphid: gid,
data: {
values: [],
},
update: false,
});
}
} else if (data.length < iPlots) {
for (let 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;
}
let bgColorMain = '#FFF';
let aYears = [
2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019,
2020, 2021,
];
let aColors = [
'#3CC1CF',
'#FBAE44',
'#485463',
'#EF413C',
'#999999',
'#4C4C4C',
];
let aGender = ['Men', 'Women'];
let aAge = ['18-24', '25-34', '35-44', '45-54', '55-64', '65+'];
let aRegion = ['Northeast', 'Midwest', 'South', 'West'];
// g2 ////////////////////////////////
let 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,
];
let 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,
];
let aTooltip2 = [
'Per person expected Halloween spending',
'Total expected Halloween spending(in billions)',
];
//////////////////////////////////////
// g3 /////////////////////////////////
let 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],
];
let 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.1,
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.2, 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,
],
];
let 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],
];
let aTooltip3 = ['Costumes', 'Candy', 'Decorations', 'Greeting Cards'];
//////////////////////////////////////
// g4 ////////////////////////////////
// gender
let aData4_a = [
['67%', '$96.13'],
['69%', '$76.92'],
];
let aSeries4_a = [
[
[2, 0, 32],
[2, 1, 33],
],
[
[5, 0, 33],
[5, 1, 31],
],
];
// age
let aData4_b = [
['88%', '$88.23'],
['84%', '$109.11'],
['78%', '$115.53'],
['66%', '$91.30'],
['54%', '$74.19'],
['45%', '$47.01'],
];
let 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
let aData4_c = [
['70%', '$92.78'],
['69%', '77.57$'],
['67%', '$89.84'],
['67%', '$83.16'],
];
let 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 ////////////////////////////////
let aTooltip5 = [
'Costumes (including children<br>and pets)',
'Candy',
'Decorations',
'Greeting cards',
];
let aSeries5_a = [
[68, 96, 73, 35],
[66, 93, 71, 33],
];
let 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],
];
let aSeries5_c = [
[68, 95, 75, 40],
[62, 95, 67, 32],
[69, 95, 73, 34],
[67, 93, 71, 31],
];
//////////////////////////////////////
// g6 ////////////////////////////////
let 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)',
];
let aSeries6_a = [
[47, 15, 36, 68, 41, 22, 27, 41, 3],
[47, 19, 28, 69, 48, 22, 30, 56, 3],
];
let 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],
];
let 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 ////////////////////////////////
let aTooltip7 = [
'Before September',
'September',
'First 2 weeks of October',
'Last 2 weeks of October',
];
let aSeries7_a = [
[6, 28, 42, 24],
[6, 34, 42, 18],
];
let 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],
];
let aSeries7_c = [
[7, 32, 41, 20],
[6, 34, 40, 21],
[6, 31, 43, 20],
[6, 28, 43, 23],
];
//////////////////////////////////////
// g9 ////////////////////////////////
let 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',
];
let 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',
];
let aSeries9_a = [
[11, 35, 28, 20, 16, 7, 16, 14, 18, 6, 14, 3, 6, 3, 27]
];
let 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],
];
let 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],
];
let 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],
];
//////////////////////////////////////
let g1 = {
type: 'ring',
backgroundColor: bgColorMain,
borderBottom: '1px solid #EDEDED',
height: '6%',
width: '100%',
y: '0%',
x: '0%',
title: {
text: 'Historical Spending',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
padding: '8px',
width: '100%',
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'bold',
padding: '5 10 10 5',
},
valueBox: {
decimals: 0,
fontColor: '#D83B01',
fontSize: '11px',
fontWeight: 'normal',
placement: 'out',
},
animation: {
effect: 3,
method: 0,
speed: 300,
sequence: 1,
},
borderWidth: 1,
detach: false,
slice: '60%',
},
plotarea: {
margin: '60 0 0 0',
},
scale: {
offsetX: '-150px',
offsetY: '30px',
sizeFactor: 1.2,
},
scaleR: {
aperture: 180,
refAngle: 180,
},
labels: [{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '38px',
},
{
text: '2021<br>Overview',
align: 'center',
fontColor: '#485463',
fontSize: '28px',
fontWeight: 'bold',
padding: '0px',
x: '10px',
y: '100px',
},
{
text: 'Percent celebrating',
align: 'center',
fontColor: '#646E7A',
fontSize: '12px',
fontWeight: 'bold',
x: '195px',
y: '160px',
},
{
text: '$86.27',
align: 'center',
fontColor: '#3cc1cf',
fontSize: '36px',
fontWeight: 'bold',
x: '430px',
y: '100px',
},
{
text: 'Average expected spending',
align: 'center',
fontColor: '#646E7A',
fontSize: '12px',
fontWeight: 'bold',
x: '405px',
y: '150px',
},
{
text: '$8.8B',
align: 'center',
fontColor: '#3cc1cf',
fontSize: '36px',
fontWeight: 'bold',
x: '630px',
y: '100px',
},
{
text: 'Total expected spending',
align: 'center',
fontColor: '#646E7A',
fontSize: '12px',
fontWeight: 'bold',
x: '610px',
y: '150px',
},
],
series: [{
values: [68],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span> Yes %node-value%',
},
valueBox: {
text: 'Yes %node-value%',
fontColor: '#3CC1CF',
fontWeight: 'bold',
},
backgroundColor: '#3CC1CF',
},
{
values: [32],
tooltip: {
text: '<span style="font-size:16px;color:#999999;">\u25CF</span> No %node-value%',
},
valueBox: {
text: 'No %node-value%',
fontColor: '#999999',
fontWeight: 'bold',
},
backgroundColor: '#999999',
},
],
};
let g2 = {
type: 'line',
backgroundColor: bgColorMain,
height: '9.5%',
width: '100%',
x: '0%',
y: '6%',
plotarea: {
margin: '80 50 0 40',
},
title: {
text: 'Historical Halloween spending and celebration plans (2007 - 2021)',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '10 10 10 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '#464646',
fontSize: '10px',
fontWeight: 'normal',
},
layout: '1x',
margin: '330 auto auto auto',
marker: {
type: 'circle',
borderWidth: '0px',
size: 8,
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
animation: {
effect: 1,
sequence: 2,
speed: 100,
},
aspect: 'spline',
hoverMarker: {
type: 'circle',
size: 5,
backgroundColor: '#FFF',
borderWidth: '1px',
borderColor: '#3CC1CF',
},
marker: {
type: 'circle',
borderWidth: '1px',
borderColor: '#3CC1CF',
size: 3,
backgroundColor: '#3CC1CF',
},
valueBox: {
text: '$%node-value',
fontColor: '#464646',
fontWeight: 'normal',
fontSize: '10px',
},
},
labels: [{
text: 'Average expected spending',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb2a',
padding: '6px',
width: '370px',
x: '20px',
y: '35px',
},
{
text: 'Total expected spending',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb2b',
padding: '6px',
width: '370px',
x: '390px',
y: '35px',
},
],
series: [{
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',
},
values: aSeries2_a,
lineColor: '#3CC1CF',
lineWidth: '2px',
}, ],
};
let g3 = {
type: 'line',
backgroundColor: bgColorMain,
height: '16%',
width: '100%',
x: '0%',
y: '17%',
title: {
text: 'Historical: Purchasing plans',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
offsetY: '5px',
padding: '8px',
width: '100%',
},
subtitle: {
text: 'Historical Halloween spending and celebration plans (2007 - 2021)',
align: 'left',
flat: true,
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '70 10 10 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '#464646',
fontSize: '10px',
fontWeight: 'normal',
},
layout: '1x',
margin: '460 auto 0 auto',
marker: {
type: 'circle',
size: 8,
borderWidth: '0px',
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
text: '%node-value%',
fontColor: '#464646',
fontSize: '10px',
fontWeight: 'normal',
},
animation: {
effect: 1,
sequence: 2,
speed: 100,
},
aspect: 'spline',
hoverMarker: {
type: 'circle',
backgroundColor: '#FFF',
borderWidth: '1px',
size: 5,
},
marker: {
type: 'circle',
borderWidth: '0px',
size: 4,
},
},
plotarea: {
margin: '130 50 40 40',
},
scaleX: {
values: aYears,
guide: {
visible: false,
},
item: {
fontColor: '#464646',
fontSize: '11px',
offsetY: '-40px',
},
itemsOverlap: true,
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleY: {
minValue: 'auto',
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
offsetEnd: '5px',
offsetStart: '45px',
tick: {
visible: false,
},
},
labels: [{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '45px',
},
{
text: 'Percent spending',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb3a',
padding: '6px',
width: '250px',
x: '20px',
y: '68px',
},
{
text: 'Per person spending',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb3b',
padding: '6px',
width: '250px',
x: '270px',
y: '68px',
},
{
text: 'Total expected spending',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb3c',
padding: '6px',
width: '250px',
x: '520px',
y: '68px',
},
],
series: [{
text: aTooltip3[0],
values: aSeries3_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Costumes</b><br> %scale-key-value: %node-value%',
},
hoverMarker: {
borderColor: '#3CC1CF',
},
lineColor: '#3CC1CF',
lineWidth: '2px',
marker: {
backgroundColor: '#3CC1CF',
},
},
{
text: aTooltip3[1],
values: aSeries3_a[1],
tooltip: {
text: '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Candy</b><br> %scale-key-value: %node-value%',
},
hoverMarker: {
borderColor: '#FBAE44',
},
lineColor: '#FBAE44',
lineWidth: '2px',
marker: {
backgroundColor: '#FBAE44',
},
},
{
text: aTooltip3[2],
values: aSeries3_a[2],
tooltip: {
text: '<span style="font-size:16px;color:#485463;">\u25CF</span><b>Decorations</b><br> %scale-key-value: %node-value%',
},
lineColor: '#485463',
lineWidth: '2px',
hoverMarker: {
borderColor: '#485463',
},
marker: {
backgroundColor: '#485463',
},
},
{
text: aTooltip3[3],
values: aSeries3_a[3],
tooltip: {
text: '<span style="font-size:16px;color:#EF413C">\u25CF</span><b>Greeting Cards</b><br> %scale-key-value: %node-value%',
},
hoverMarker: {
borderColor: '#EF413C',
},
lineColor: '#EF413C',
lineWidth: '2px',
marker: {
backgroundColor: '#EF413C',
},
},
],
};
let g4 = {
type: 'bubble',
backgroundColor: bgColorMain,
height: '10%',
width: '100%',
x: '0%',
y: '32%',
title: {
text: 'Demographics: Spending / celebrating',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
offsetY: '5px',
padding: '8px',
width: '100%',
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
fontSize: '11px',
fontWeight: 'normal',
placement: 'bottom',
},
animation: {
effect: 3,
sequence: 1,
speed: 200,
},
},
plotarea: {
margin: '110 5 10 15',
},
scaleX: {
minValue: 0,
maxValue: 6,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
offsetStart: '50px',
step: 1,
tick: {
visible: false,
},
},
scaleY: {
values: [
'2021: Percent planning<br>to celebrate',
'2021: Total expected<br>spending',
],
minValue: 0,
maxValue: 1,
guide: {
lineColor: '#9BA2AA',
lineWidth: 1,
},
item: {
align: 'left',
fontSize: '11px',
offsetX: '130px',
offsetY: '-15px',
paddingLeft: '5px',
visible: true,
width: '130px',
},
offsetStart: '60px',
step: 1,
lineWidth: '0px',
tick: {
visible: false,
},
},
labels: [{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '45px',
},
{
text: 'Gender',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb4a',
padding: '8px',
width: '250px',
x: '20px',
y: '68px',
},
{
text: 'Age',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb4b',
padding: '8px',
width: '250px',
x: '270px',
y: '68px',
},
{
text: 'Region',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb4c',
padding: '8px',
width: '250px',
x: '520px',
y: '68px',
},
],
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',
},
},
],
};
let g5 = {
type: 'bar',
backgroundColor: '#E5E5E5',
height: '8%',
width: '100%',
x: '0%',
y: '42%',
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontSize: '11px',
fontWeight: 'normal',
color: '#464646',
},
layout: '1x',
margin: '235 auto auto auto',
marker: {
type: 'circle',
borderWidth: '0px',
size: 8,
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
angle: 270,
fontColor: '#464646',
fontSize: '9px',
fontWeight: 'normal',
placement: 'top-out',
text: '%node-value%',
},
animation: {
effect: 4,
sequence: 1,
speed: 100,
},
barsSpaceLeft: 0.25,
barsSpaceRight: 0.25,
},
plotarea: {
margin: '20 10 50 10',
},
scaleX: {
values: aTooltip5,
guide: {
visible: false,
},
item: {
visible: true,
fontSize: '11px',
align: 'center',
fontColor: '#464646',
},
label: {
text: '2021: Percent<br>planning to<br>purchase',
align: 'left',
fontSize: '11px',
fontWeight: 'normal',
offsetX: '-55px',
offsetY: '-85px',
},
lineColor: '#9BA2AA',
lineWidth: '2px',
offsetStart: '50px',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
tick: {
visible: false,
},
},
series: [{
text: 'Men',
values: aSeries5_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#3CC1CF',
},
{
text: 'Women',
values: aSeries5_a[1],
tooltip: {
text: '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#FBAE44',
},
],
};
let g6 = {
type: 'bar',
backgroundColor: bgColorMain,
height: '10%',
width: '100%',
x: '0%',
y: '50%',
title: {
text: 'Demographics: Plans / shopping',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
offsetY: '5px',
padding: '8px',
width: '100%',
},
subtitle: {
text: '2021: How will consumers celebrate for Halloween?',
align: 'left',
flat: true,
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '70 10 10 20',
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
text: '%node-value%',
angle: 270,
fontColor: '#464646',
fontSize: '9px',
fontWeight: 'normal',
placement: 'top-out',
},
animation: {
effect: 3,
sequence: 1,
speed: 50,
},
barsSpaceLeft: 0.25,
barsSpaceRight: 0.25,
},
plotarea: {
margin: '120 20 30 20',
},
scaleX: {
values: aTooltip6,
guide: {
visible: false,
},
item: {
align: 'center',
fontColor: '#464646',
fontSize: '10px',
fontWeight: 'bold',
offsetY: '-5px',
visible: true,
},
maxItems: 999,
itemsOverlap: true,
lineWidth: '2px',
lineColor: '#9BA2AA',
tick: {
visible: false,
},
},
scaleY: {
minValue: 0,
maxValue: 100,
guide: {
visible: false,
},
item: {
visible: false,
},
step: 10,
lineWidth: '0px',
tick: {
visible: false,
},
},
labels: [{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '43px',
},
{
text: 'Gender',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb6a',
padding: '8px',
width: '250px',
x: '20px',
y: '64px',
},
{
text: 'Age',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb6b',
padding: '8px',
width: '250px',
x: '270px',
y: '64px',
},
{
text: 'Region',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb6c',
padding: '8px',
width: '250px',
x: '520px',
y: '64px',
},
],
series: [{
text: 'Men',
values: aSeries6_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#3CC1CF',
},
{
text: 'Women',
values: aSeries6_a[1],
tooltip: {
text: '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#FBAE44',
},
],
};
let g7 = {
type: 'bar',
backgroundColor: bgColorMain,
height: '7%',
width: '100%',
x: '0%',
y: '60%',
title: {
text: '2021: When will consumers begin shopping for Halloween?',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '20 10 10 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontSize: '10px',
fontWeight: 'normal',
color: '#464646',
},
layout: '1x',
margin: '220 auto 0 auto',
marker: {
type: 'circle',
size: 8,
borderWidth: '0px',
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
text: '%node-value%',
angle: 270,
fontColor: '#464646',
fontSize: '9px',
fontWeight: 'normal',
placement: 'top-out',
},
animation: {
effect: 3,
sequence: 1,
speed: 50,
},
barsSpaceLeft: 0.25,
barsSpaceRight: 0.25,
},
plotarea: {
margin: '30 10 30 10',
},
scaleX: {
values: aTooltip7,
guide: {
visible: false,
},
item: {
align: 'center',
fontColor: '#464646',
fontSize: '11px',
fontWeight: 'bold',
offsetY: '-5px',
visible: true,
},
lineColor: '#9BA2AA',
lineWidth: '2px',
tick: {
visible: false,
},
},
scaleY: {
minValue: 0,
maxValue: 60,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
step: 10,
tick: {
visible: false,
},
},
labels: [{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '5px',
}, ],
series: [{
text: 'Men',
values: aSeries7_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#3CC1CF',
},
{
text: 'Women',
values: aSeries7_a[1],
tooltip: {
text: '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#FBAE44',
},
],
};
let g8 = {
type: 'bubble',
backgroundColor: bgColorMain,
height: '7%',
width: '100%',
x: '0%',
y: '68%',
title: {
text: 'Demographics: Inspiration',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
padding: '8px',
width: '100%',
},
subtitle: {
text: '2021: Top 5 ways to gather Halloween inspiration:',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '25 10 0 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '#464646',
fontSize: '10px',
fontWeight: 'normal',
},
layout: 'float',
margin: '220 auto 0 auto',
marker: {
type: 'circle',
size: 8,
borderWidth: '0px',
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
fontSize: 11,
fontWeight: 'normal',
placement: 'bottom',
},
animation: {
effect: 3,
sequence: 1,
speed: 100,
},
},
plotarea: {
margin: '0 40 10 40',
},
scaleX: {
maxValue: 4,
minValue: 0,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
offsetStart: '50px',
step: 1,
tick: {
visible: false,
},
},
scaleY: {
maxValue: 1,
minValue: 0,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
step: 1,
offsetStart: '80px',
tick: {
visible: false,
},
},
labels: [{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '38px',
}, ],
series: [{
text: 'Online search',
values: [
[0, 0, 35]
],
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%',
},
marker: {
backgroundColor: '#3CC1CF',
},
maxSize: 50,
minSize: 40,
},
{
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%',
},
},
{
text: 'Friends/Family',
values: [
[2, 0, 20]
],
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%',
},
marker: {
backgroundColor: '#485463',
},
maxSize: 50,
minSize: 40,
},
{
text: 'Pinterest',
values: [
[3, 0, 18]
],
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%',
},
marker: {
backgroundColor: '#EF413C',
},
maxSize: 50,
minSize: 40,
},
{
text: 'Facebook',
values: [
[4, 0, 16]
],
valueBox: {
text: '%node-size-value%',
fontColor: '#999999',
},
tooltip: {
text: '<span style="font-size:16px;color:#999999">\u25CF</span><b>Facebook</b><br> %node-size-value%',
},
marker: {
backgroundColor: '#999999',
},
minSize: 40,
maxSize: 50,
},
],
};
let g9 = {
type: 'bar',
backgroundColor: bgColorMain,
height: '10%',
width: '100%',
x: '0%',
y: '74%',
title: {
text: '2021: Where do consumers look for Halloween inspiration?',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '100 10 10 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontSize: '10px',
fontWeight: 'normal',
color: '#464646',
},
layout: 'float',
margin: '390 auto 0 auto',
marker: {
borderWidth: '0px',
size: 8,
type: 'circle',
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
text: '%node-value%',
angle: 270,
fontColor: '#464646',
fontSize: '9px',
fontWeight: 'normal',
placement: 'top-out',
},
animation: {
effect: 4,
sequence: 1,
speed: 100,
},
barsSpaceLeft: 0.15,
barsSpaceRight: 0.15,
},
plotarea: {
margin: '100 10 10 40',
},
scaleX: {
values: aTooltip9_a,
guide: {
visible: false,
},
item: {
visible: true,
fontSize: '10px',
align: 'center',
fontWeight: 'bold',
fontColor: '#464646',
angle: 305,
maxChars: 13,
},
itemsOverlap: true,
lineColor: '#9BA2AA',
lineWidth: '1px',
maxItems: 999,
tick: {
visible: false,
},
},
scaleY: {
maxValue: 65,
minValue: 0,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
step: 10,
tick: {
visible: false,
},
},
labels: [{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '43px',
},
{
text: 'All',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb9a',
padding: '8px',
width: '190px',
x: '20px',
y: '64px',
},
{
text: 'Gender',
align: 'center',
backgroundColor: '#E5E5E5',
borderRight: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb9b',
padding: '8px',
width: '200px',
x: '210px',
y: '64px',
},
{
text: 'Age',
align: 'center',
backgroundColor: '#E5E5E5',
borderRight: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb9c',
padding: '8px',
width: '190px',
x: '410px',
y: '64px',
},
{
text: 'Region',
align: 'center',
backgroundColor: '#E5E5E5',
borderRight: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb9d',
padding: '8px',
width: '200px',
x: '600px',
y: '64px',
},
],
series: [{
text: 'All',
values: aSeries9_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>All: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#3CC1CF',
}, ],
};
let g10 = {
type: 'treemap',
backgroundColor: bgColorMain,
height: '13%',
width: '100%',
x: '0%',
y: '87%',
title: {
text: 'Purchase Locations',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
offsetY: '10px',
padding: '8px',
width: '100%',
},
subtitle: {
text: '2021: Where consumers plan to shop.',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '35 10 0 20',
},
options: {
aspectType: 'palette',
palette: [
'#3CC1CF',
'#FBAE44',
'#485463',
'#EF413C',
'#999999',
'#3CC1CF',
'#FBAE44',
'#485463',
'#EF413C',
'#999999',
'#3CC1CF',
'#FBAE44',
'#485463',
'#EF413C',
'#999999',
],
box: {
borderColor: '#fff',
},
tooltipBox: {
text: '%text<br>%value%',
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
},
plotarea: {
margin: '90 20 30 20',
},
labels: [{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '48px',
}, ],
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,
},
],
source: {
text: "Source: NRF's Annual 2021 Halloween Spending Survey, conducted by Prosper Insights & Analytics",
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
marginBottom: '2px',
paddingLeft: '10px',
},
};
let chartJSON = {
graphset: [g1, g2, g3, g4, g5, g6, g7, g8, g9, g10],
};
zingchart.render({
id: 'zc',
width: '800px',
height: '3200px',
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 (let 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 (let 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') {
let aTxt = [];
for (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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;
}
////////////////////////////////////
}
});
</script>
</body>
</html>
function addRemovePlots(gid, data) {
let iPlots = zingchart.exec('zc', 'getplotlength', {
graphid: gid,
});
if (data.length > iPlots) {
for (let j = 0; j < data.length - iPlots; j++) {
zingchart.exec('zc', 'addplot', {
graphid: gid,
data: {
values: [],
},
update: false,
});
}
} else if (data.length < iPlots) {
for (let 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;
}
let bgColorMain = '#FFF';
let aYears = [
2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019,
2020, 2021,
];
let aColors = [
'#3CC1CF',
'#FBAE44',
'#485463',
'#EF413C',
'#999999',
'#4C4C4C',
];
let aGender = ['Men', 'Women'];
let aAge = ['18-24', '25-34', '35-44', '45-54', '55-64', '65+'];
let aRegion = ['Northeast', 'Midwest', 'South', 'West'];
// g2 ////////////////////////////////
let 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,
];
let 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,
];
let aTooltip2 = [
'Per person expected Halloween spending',
'Total expected Halloween spending(in billions)',
];
//////////////////////////////////////
// g3 /////////////////////////////////
let 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],
];
let 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.1,
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.2, 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,
],
];
let 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],
];
let aTooltip3 = ['Costumes', 'Candy', 'Decorations', 'Greeting Cards'];
//////////////////////////////////////
// g4 ////////////////////////////////
// gender
let aData4_a = [
['67%', '$96.13'],
['69%', '$76.92'],
];
let aSeries4_a = [
[
[2, 0, 32],
[2, 1, 33],
],
[
[5, 0, 33],
[5, 1, 31],
],
];
// age
let aData4_b = [
['88%', '$88.23'],
['84%', '$109.11'],
['78%', '$115.53'],
['66%', '$91.30'],
['54%', '$74.19'],
['45%', '$47.01'],
];
let 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
let aData4_c = [
['70%', '$92.78'],
['69%', '77.57$'],
['67%', '$89.84'],
['67%', '$83.16'],
];
let 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 ////////////////////////////////
let aTooltip5 = [
'Costumes (including children<br>and pets)',
'Candy',
'Decorations',
'Greeting cards',
];
let aSeries5_a = [
[68, 96, 73, 35],
[66, 93, 71, 33],
];
let 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],
];
let aSeries5_c = [
[68, 95, 75, 40],
[62, 95, 67, 32],
[69, 95, 73, 34],
[67, 93, 71, 31],
];
//////////////////////////////////////
// g6 ////////////////////////////////
let 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)',
];
let aSeries6_a = [
[47, 15, 36, 68, 41, 22, 27, 41, 3],
[47, 19, 28, 69, 48, 22, 30, 56, 3],
];
let 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],
];
let 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 ////////////////////////////////
let aTooltip7 = [
'Before September',
'September',
'First 2 weeks of October',
'Last 2 weeks of October',
];
let aSeries7_a = [
[6, 28, 42, 24],
[6, 34, 42, 18],
];
let 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],
];
let aSeries7_c = [
[7, 32, 41, 20],
[6, 34, 40, 21],
[6, 31, 43, 20],
[6, 28, 43, 23],
];
//////////////////////////////////////
// g9 ////////////////////////////////
let 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',
];
let 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',
];
let aSeries9_a = [[11, 35, 28, 20, 16, 7, 16, 14, 18, 6, 14, 3, 6, 3, 27]];
let 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],
];
let 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],
];
let 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],
];
//////////////////////////////////////
let g1 = {
type: 'ring',
backgroundColor: bgColorMain,
borderBottom: '1px solid #EDEDED',
height: '6%',
width: '100%',
y: '0%',
x: '0%',
title: {
text: 'Historical Spending',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
padding: '8px',
width: '100%',
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'bold',
padding: '5 10 10 5',
},
valueBox: {
decimals: 0,
fontColor: '#D83B01',
fontSize: '11px',
fontWeight: 'normal',
placement: 'out',
},
animation: {
effect: 3,
method: 0,
speed: 300,
sequence: 1,
},
borderWidth: 1,
detach: false,
slice: '60%',
},
plotarea: {
margin: '60 0 0 0',
},
scale: {
offsetX: '-150px',
offsetY: '30px',
sizeFactor: 1.2,
},
scaleR: {
aperture: 180,
refAngle: 180,
},
labels: [
{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '38px',
},
{
text: '2021<br>Overview',
align: 'center',
fontColor: '#485463',
fontSize: '28px',
fontWeight: 'bold',
padding: '0px',
x: '10px',
y: '100px',
},
{
text: 'Percent celebrating',
align: 'center',
fontColor: '#646E7A',
fontSize: '12px',
fontWeight: 'bold',
x: '195px',
y: '160px',
},
{
text: '$86.27',
align: 'center',
fontColor: '#3cc1cf',
fontSize: '36px',
fontWeight: 'bold',
x: '430px',
y: '100px',
},
{
text: 'Average expected spending',
align: 'center',
fontColor: '#646E7A',
fontSize: '12px',
fontWeight: 'bold',
x: '405px',
y: '150px',
},
{
text: '$8.8B',
align: 'center',
fontColor: '#3cc1cf',
fontSize: '36px',
fontWeight: 'bold',
x: '630px',
y: '100px',
},
{
text: 'Total expected spending',
align: 'center',
fontColor: '#646E7A',
fontSize: '12px',
fontWeight: 'bold',
x: '610px',
y: '150px',
},
],
series: [
{
values: [68],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span> Yes %node-value%',
},
valueBox: {
text: 'Yes %node-value%',
fontColor: '#3CC1CF',
fontWeight: 'bold',
},
backgroundColor: '#3CC1CF',
},
{
values: [32],
tooltip: {
text: '<span style="font-size:16px;color:#999999;">\u25CF</span> No %node-value%',
},
valueBox: {
text: 'No %node-value%',
fontColor: '#999999',
fontWeight: 'bold',
},
backgroundColor: '#999999',
},
],
};
let g2 = {
type: 'line',
backgroundColor: bgColorMain,
height: '9.5%',
width: '100%',
x: '0%',
y: '6%',
plotarea: {
margin: '80 50 0 40',
},
title: {
text: 'Historical Halloween spending and celebration plans (2007 - 2021)',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '10 10 10 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '#464646',
fontSize: '10px',
fontWeight: 'normal',
},
layout: '1x',
margin: '330 auto auto auto',
marker: {
type: 'circle',
borderWidth: '0px',
size: 8,
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
animation: {
effect: 1,
sequence: 2,
speed: 100,
},
aspect: 'spline',
hoverMarker: {
type: 'circle',
size: 5,
backgroundColor: '#FFF',
borderWidth: '1px',
borderColor: '#3CC1CF',
},
marker: {
type: 'circle',
borderWidth: '1px',
borderColor: '#3CC1CF',
size: 3,
backgroundColor: '#3CC1CF',
},
valueBox: {
text: '$%node-value',
fontColor: '#464646',
fontWeight: 'normal',
fontSize: '10px',
},
},
labels: [
{
text: 'Average expected spending',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb2a',
padding: '6px',
width: '370px',
x: '20px',
y: '35px',
},
{
text: 'Total expected spending',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb2b',
padding: '6px',
width: '370px',
x: '390px',
y: '35px',
},
],
series: [
{
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',
},
values: aSeries2_a,
lineColor: '#3CC1CF',
lineWidth: '2px',
},
],
};
let g3 = {
type: 'line',
backgroundColor: bgColorMain,
height: '16%',
width: '100%',
x: '0%',
y: '17%',
title: {
text: 'Historical: Purchasing plans',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
offsetY: '5px',
padding: '8px',
width: '100%',
},
subtitle: {
text: 'Historical Halloween spending and celebration plans (2007 - 2021)',
align: 'left',
flat: true,
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '70 10 10 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '#464646',
fontSize: '10px',
fontWeight: 'normal',
},
layout: '1x',
margin: '460 auto 0 auto',
marker: {
type: 'circle',
size: 8,
borderWidth: '0px',
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
text: '%node-value%',
fontColor: '#464646',
fontSize: '10px',
fontWeight: 'normal',
},
animation: {
effect: 1,
sequence: 2,
speed: 100,
},
aspect: 'spline',
hoverMarker: {
type: 'circle',
backgroundColor: '#FFF',
borderWidth: '1px',
size: 5,
},
marker: {
type: 'circle',
borderWidth: '0px',
size: 4,
},
},
plotarea: {
margin: '130 50 40 40',
},
scaleX: {
values: aYears,
guide: {
visible: false,
},
item: {
fontColor: '#464646',
fontSize: '11px',
offsetY: '-40px',
},
itemsOverlap: true,
lineWidth: '0px',
tick: {
visible: false,
},
},
scaleY: {
minValue: 'auto',
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
offsetEnd: '5px',
offsetStart: '45px',
tick: {
visible: false,
},
},
labels: [
{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '45px',
},
{
text: 'Percent spending',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb3a',
padding: '6px',
width: '250px',
x: '20px',
y: '68px',
},
{
text: 'Per person spending',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb3b',
padding: '6px',
width: '250px',
x: '270px',
y: '68px',
},
{
text: 'Total expected spending',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb3c',
padding: '6px',
width: '250px',
x: '520px',
y: '68px',
},
],
series: [
{
text: aTooltip3[0],
values: aSeries3_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Costumes</b><br> %scale-key-value: %node-value%',
},
hoverMarker: {
borderColor: '#3CC1CF',
},
lineColor: '#3CC1CF',
lineWidth: '2px',
marker: {
backgroundColor: '#3CC1CF',
},
},
{
text: aTooltip3[1],
values: aSeries3_a[1],
tooltip: {
text: '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Candy</b><br> %scale-key-value: %node-value%',
},
hoverMarker: {
borderColor: '#FBAE44',
},
lineColor: '#FBAE44',
lineWidth: '2px',
marker: {
backgroundColor: '#FBAE44',
},
},
{
text: aTooltip3[2],
values: aSeries3_a[2],
tooltip: {
text: '<span style="font-size:16px;color:#485463;">\u25CF</span><b>Decorations</b><br> %scale-key-value: %node-value%',
},
lineColor: '#485463',
lineWidth: '2px',
hoverMarker: {
borderColor: '#485463',
},
marker: {
backgroundColor: '#485463',
},
},
{
text: aTooltip3[3],
values: aSeries3_a[3],
tooltip: {
text: '<span style="font-size:16px;color:#EF413C">\u25CF</span><b>Greeting Cards</b><br> %scale-key-value: %node-value%',
},
hoverMarker: {
borderColor: '#EF413C',
},
lineColor: '#EF413C',
lineWidth: '2px',
marker: {
backgroundColor: '#EF413C',
},
},
],
};
let g4 = {
type: 'bubble',
backgroundColor: bgColorMain,
height: '10%',
width: '100%',
x: '0%',
y: '32%',
title: {
text: 'Demographics: Spending / celebrating',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
offsetY: '5px',
padding: '8px',
width: '100%',
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
fontSize: '11px',
fontWeight: 'normal',
placement: 'bottom',
},
animation: {
effect: 3,
sequence: 1,
speed: 200,
},
},
plotarea: {
margin: '110 5 10 15',
},
scaleX: {
minValue: 0,
maxValue: 6,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
offsetStart: '50px',
step: 1,
tick: {
visible: false,
},
},
scaleY: {
values: [
'2021: Percent planning<br>to celebrate',
'2021: Total expected<br>spending',
],
minValue: 0,
maxValue: 1,
guide: {
lineColor: '#9BA2AA',
lineWidth: 1,
},
item: {
align: 'left',
fontSize: '11px',
offsetX: '130px',
offsetY: '-15px',
paddingLeft: '5px',
visible: true,
width: '130px',
},
offsetStart: '60px',
step: 1,
lineWidth: '0px',
tick: {
visible: false,
},
},
labels: [
{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '45px',
},
{
text: 'Gender',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb4a',
padding: '8px',
width: '250px',
x: '20px',
y: '68px',
},
{
text: 'Age',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb4b',
padding: '8px',
width: '250px',
x: '270px',
y: '68px',
},
{
text: 'Region',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb4c',
padding: '8px',
width: '250px',
x: '520px',
y: '68px',
},
],
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',
},
},
],
};
let g5 = {
type: 'bar',
backgroundColor: '#E5E5E5',
height: '8%',
width: '100%',
x: '0%',
y: '42%',
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontSize: '11px',
fontWeight: 'normal',
color: '#464646',
},
layout: '1x',
margin: '235 auto auto auto',
marker: {
type: 'circle',
borderWidth: '0px',
size: 8,
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
angle: 270,
fontColor: '#464646',
fontSize: '9px',
fontWeight: 'normal',
placement: 'top-out',
text: '%node-value%',
},
animation: {
effect: 4,
sequence: 1,
speed: 100,
},
barsSpaceLeft: 0.25,
barsSpaceRight: 0.25,
},
plotarea: {
margin: '20 10 50 10',
},
scaleX: {
values: aTooltip5,
guide: {
visible: false,
},
item: {
visible: true,
fontSize: '11px',
align: 'center',
fontColor: '#464646',
},
label: {
text: '2021: Percent<br>planning to<br>purchase',
align: 'left',
fontSize: '11px',
fontWeight: 'normal',
offsetX: '-55px',
offsetY: '-85px',
},
lineColor: '#9BA2AA',
lineWidth: '2px',
offsetStart: '50px',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
tick: {
visible: false,
},
},
series: [
{
text: 'Men',
values: aSeries5_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#3CC1CF',
},
{
text: 'Women',
values: aSeries5_a[1],
tooltip: {
text: '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#FBAE44',
},
],
};
let g6 = {
type: 'bar',
backgroundColor: bgColorMain,
height: '10%',
width: '100%',
x: '0%',
y: '50%',
title: {
text: 'Demographics: Plans / shopping',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
offsetY: '5px',
padding: '8px',
width: '100%',
},
subtitle: {
text: '2021: How will consumers celebrate for Halloween?',
align: 'left',
flat: true,
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '70 10 10 20',
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
text: '%node-value%',
angle: 270,
fontColor: '#464646',
fontSize: '9px',
fontWeight: 'normal',
placement: 'top-out',
},
animation: {
effect: 3,
sequence: 1,
speed: 50,
},
barsSpaceLeft: 0.25,
barsSpaceRight: 0.25,
},
plotarea: {
margin: '120 20 30 20',
},
scaleX: {
values: aTooltip6,
guide: {
visible: false,
},
item: {
align: 'center',
fontColor: '#464646',
fontSize: '10px',
fontWeight: 'bold',
offsetY: '-5px',
visible: true,
},
maxItems: 999,
itemsOverlap: true,
lineWidth: '2px',
lineColor: '#9BA2AA',
tick: {
visible: false,
},
},
scaleY: {
minValue: 0,
maxValue: 100,
guide: {
visible: false,
},
item: {
visible: false,
},
step: 10,
lineWidth: '0px',
tick: {
visible: false,
},
},
labels: [
{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '43px',
},
{
text: 'Gender',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb6a',
padding: '8px',
width: '250px',
x: '20px',
y: '64px',
},
{
text: 'Age',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb6b',
padding: '8px',
width: '250px',
x: '270px',
y: '64px',
},
{
text: 'Region',
align: 'center',
backgroundColor: '#E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb6c',
padding: '8px',
width: '250px',
x: '520px',
y: '64px',
},
],
series: [
{
text: 'Men',
values: aSeries6_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#3CC1CF',
},
{
text: 'Women',
values: aSeries6_a[1],
tooltip: {
text: '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#FBAE44',
},
],
};
let g7 = {
type: 'bar',
backgroundColor: bgColorMain,
height: '7%',
width: '100%',
x: '0%',
y: '60%',
title: {
text: '2021: When will consumers begin shopping for Halloween?',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '20 10 10 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontSize: '10px',
fontWeight: 'normal',
color: '#464646',
},
layout: '1x',
margin: '220 auto 0 auto',
marker: {
type: 'circle',
size: 8,
borderWidth: '0px',
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
text: '%node-value%',
angle: 270,
fontColor: '#464646',
fontSize: '9px',
fontWeight: 'normal',
placement: 'top-out',
},
animation: {
effect: 3,
sequence: 1,
speed: 50,
},
barsSpaceLeft: 0.25,
barsSpaceRight: 0.25,
},
plotarea: {
margin: '30 10 30 10',
},
scaleX: {
values: aTooltip7,
guide: {
visible: false,
},
item: {
align: 'center',
fontColor: '#464646',
fontSize: '11px',
fontWeight: 'bold',
offsetY: '-5px',
visible: true,
},
lineColor: '#9BA2AA',
lineWidth: '2px',
tick: {
visible: false,
},
},
scaleY: {
minValue: 0,
maxValue: 60,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
step: 10,
tick: {
visible: false,
},
},
labels: [
{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '5px',
},
],
series: [
{
text: 'Men',
values: aSeries7_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>Men: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#3CC1CF',
},
{
text: 'Women',
values: aSeries7_a[1],
tooltip: {
text: '<span style="font-size:16px;color:#FBAE44;">\u25CF</span><b>Women: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#FBAE44',
},
],
};
let g8 = {
type: 'bubble',
backgroundColor: bgColorMain,
height: '7%',
width: '100%',
x: '0%',
y: '68%',
title: {
text: 'Demographics: Inspiration',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
padding: '8px',
width: '100%',
},
subtitle: {
text: '2021: Top 5 ways to gather Halloween inspiration:',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '25 10 0 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '#464646',
fontSize: '10px',
fontWeight: 'normal',
},
layout: 'float',
margin: '220 auto 0 auto',
marker: {
type: 'circle',
size: 8,
borderWidth: '0px',
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
fontSize: 11,
fontWeight: 'normal',
placement: 'bottom',
},
animation: {
effect: 3,
sequence: 1,
speed: 100,
},
},
plotarea: {
margin: '0 40 10 40',
},
scaleX: {
maxValue: 4,
minValue: 0,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
offsetStart: '50px',
step: 1,
tick: {
visible: false,
},
},
scaleY: {
maxValue: 1,
minValue: 0,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
step: 1,
offsetStart: '80px',
tick: {
visible: false,
},
},
labels: [
{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '38px',
},
],
series: [
{
text: 'Online search',
values: [[0, 0, 35]],
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%',
},
marker: {
backgroundColor: '#3CC1CF',
},
maxSize: 50,
minSize: 40,
},
{
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%',
},
},
{
text: 'Friends/Family',
values: [[2, 0, 20]],
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%',
},
marker: {
backgroundColor: '#485463',
},
maxSize: 50,
minSize: 40,
},
{
text: 'Pinterest',
values: [[3, 0, 18]],
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%',
},
marker: {
backgroundColor: '#EF413C',
},
maxSize: 50,
minSize: 40,
},
{
text: 'Facebook',
values: [[4, 0, 16]],
valueBox: {
text: '%node-size-value%',
fontColor: '#999999',
},
tooltip: {
text: '<span style="font-size:16px;color:#999999">\u25CF</span><b>Facebook</b><br> %node-size-value%',
},
marker: {
backgroundColor: '#999999',
},
minSize: 40,
maxSize: 50,
},
],
};
let g9 = {
type: 'bar',
backgroundColor: bgColorMain,
height: '10%',
width: '100%',
x: '0%',
y: '74%',
title: {
text: '2021: Where do consumers look for Halloween inspiration?',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '100 10 10 20',
},
legend: {
backgroundColor: 'none',
borderWidth: '0px',
item: {
fontSize: '10px',
fontWeight: 'normal',
color: '#464646',
},
layout: 'float',
margin: '390 auto 0 auto',
marker: {
borderWidth: '0px',
size: 8,
type: 'circle',
},
},
plot: {
tooltip: {
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
valueBox: {
text: '%node-value%',
angle: 270,
fontColor: '#464646',
fontSize: '9px',
fontWeight: 'normal',
placement: 'top-out',
},
animation: {
effect: 4,
sequence: 1,
speed: 100,
},
barsSpaceLeft: 0.15,
barsSpaceRight: 0.15,
},
plotarea: {
margin: '100 10 10 40',
},
scaleX: {
values: aTooltip9_a,
guide: {
visible: false,
},
item: {
visible: true,
fontSize: '10px',
align: 'center',
fontWeight: 'bold',
fontColor: '#464646',
angle: 305,
maxChars: 13,
},
itemsOverlap: true,
lineColor: '#9BA2AA',
lineWidth: '1px',
maxItems: 999,
tick: {
visible: false,
},
},
scaleY: {
maxValue: 65,
minValue: 0,
guide: {
visible: false,
},
item: {
visible: false,
},
lineWidth: '0px',
step: 10,
tick: {
visible: false,
},
},
labels: [
{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '43px',
},
{
text: 'All',
align: 'center',
borderLeft: '2px solid #E5E5E5',
borderRight: '2px solid #E5E5E5',
borderTop: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb9a',
padding: '8px',
width: '190px',
x: '20px',
y: '64px',
},
{
text: 'Gender',
align: 'center',
backgroundColor: '#E5E5E5',
borderRight: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb9b',
padding: '8px',
width: '200px',
x: '210px',
y: '64px',
},
{
text: 'Age',
align: 'center',
backgroundColor: '#E5E5E5',
borderRight: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb9c',
padding: '8px',
width: '190px',
x: '410px',
y: '64px',
},
{
text: 'Region',
align: 'center',
backgroundColor: '#E5E5E5',
borderRight: '2px solid #E5E5E5',
fontColor: '#464646',
fontSize: '12px',
fontWeight: 'normal',
id: 'lb9d',
padding: '8px',
width: '200px',
x: '600px',
y: '64px',
},
],
series: [
{
text: 'All',
values: aSeries9_a[0],
tooltip: {
text: '<span style="font-size:16px;color:#3CC1CF;">\u25CF</span><b>All: %node-value%</b><br>%scale-key-value',
},
backgroundColor: '#3CC1CF',
},
],
};
let g10 = {
type: 'treemap',
backgroundColor: bgColorMain,
height: '13%',
width: '100%',
x: '0%',
y: '87%',
title: {
text: 'Purchase Locations',
align: 'center',
backgroundColor: '#485463',
fontColor: '#FBAE44',
fontSize: '21px',
fontWeight: 'bold',
offsetY: '10px',
padding: '8px',
width: '100%',
},
subtitle: {
text: '2021: Where consumers plan to shop.',
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
padding: '35 10 0 20',
},
options: {
aspectType: 'palette',
palette: [
'#3CC1CF',
'#FBAE44',
'#485463',
'#EF413C',
'#999999',
'#3CC1CF',
'#FBAE44',
'#485463',
'#EF413C',
'#999999',
'#3CC1CF',
'#FBAE44',
'#485463',
'#EF413C',
'#999999',
],
box: {
borderColor: '#fff',
},
tooltipBox: {
text: '%text<br>%value%',
align: 'center',
alpha: 0.75,
backgroundColor: '#000',
borderRadius: '4px',
borderWidth: '0px',
callout: true,
fontColor: '#fff',
fontSize: '11px',
fontWeight: 'normal',
padding: '5 10 10 5',
},
},
plotarea: {
margin: '90 20 30 20',
},
labels: [
{
borderBottom: '1px solid #EDEDED',
width: '100%',
x: '5px',
y: '48px',
},
],
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,
},
],
source: {
text: "Source: NRF's Annual 2021 Halloween Spending Survey, conducted by Prosper Insights & Analytics",
align: 'left',
fontColor: '#464646',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 'normal',
marginBottom: '2px',
paddingLeft: '10px',
},
};
let chartJSON = {
graphset: [g1, g2, g3, g4, g5, g6, g7, g8, g9, g10],
};
zingchart.render({
id: 'zc',
width: '800px',
height: '3200px',
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 (let 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 (let 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') {
let aTxt = [];
for (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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;
}
////////////////////////////////////
}
});
