<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // HELPER METHODS
// -----------------------------
window.plot_jsRule = (p) => {
return {
backgroundColor: barColors[p.plotindex][p.nodeindex],
fontColor: p.nodeindex > 3 ? '#fff' : '#000'
};
};
// DEFINE DATA
// -----------------------------
let barColors = [
['#F1D4D4', '#E3A9A9', '#D67F7F', '#C85454', '#BA2929', '#8C1F1F', '#631515', '#4a1111'],
['#DFD9E2', '#BFB4C5', '#9F8EA7', '#7F698A', '#5F436D', '#523a5f', '#3e2c48', '#2e2135'],
['#D4DFE5', '#A9BFCA', '#7F9FB0', '#547F95', '#295F7B', '#1F475C', '#1a394a', '#142b38'],
['#D4E9F3', '#A9D4E6', '#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91', '#175773', '#124256']
];
let legendColors = ['#D3D3D3', '#A7A7A7', '#929292', '#808080', '#6b6b6b', '#4c4c4c', '#1f1f1f', '#000'];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'bar',
backgroundColor: '#FFF',
clustered: true,
title: {
text: 'SNAPCHAT IS TOPS WITH AMERICAN TEENS',
padding: '0px',
fontColor: '#000',
fontSize: '22px',
fontWeight: 'bold',
textAlign: 'center'
},
subtitle: {
text: 'Percentage of US teens who consider the following social networks their favorite',
padding: '0px 0px 0px 10px',
fontColor: '#656263',
fontSize: '14px',
fontWeight: 'normal',
textAlign: 'left'
},
legend: {
padding: '0px',
borderWidth: '0px',
item: {
fontColor: '#222',
fontSize: '14px',
fontWeight: 'bold'
},
layout: 'x4',
marker: {
size: '8px'
},
offsetY: '40px',
toggleAction: 'disabled'
},
plot: {
valueBox: {
fontColor: '#000',
fontSize: '12px',
offsetY: '5px',
placement: 'top'
},
barWidth: '90%',
jsRule: 'plot_jsRule()'
},
plotarea: {
margin: '90px 40px 50px 40px'
},
scaleX: {
values: ['Snapchat', 'Instagram', 'Facebook', 'Twitter'],
item: {
fontColor: '#000',
fontSize: '16px',
fontWeight: 'bold',
textAlign: 'center'
},
lineWidth: '2px',
maxItems: 99,
tick: {
visible: false
}
},
scaleY: {
format: '%scale-value%',
item: {
fontColor: '#7A7A7A'
},
lineWidth: '0px',
maxValue: 50,
minValue: 0,
tick: {
visible: false
}
},
source: {
text: '<b>SOURCES:</b> Piper Jaffray; TAKING STOCK WITH TEENS - SPRING 2019 INFOGRAPHIC',
marginBottom: '2px',
paddingLeft: '20px',
fontColor: '#656263',
fontSize: '12px',
fontWeight: 'normal',
textAlign: 'left'
},
tooltip: {
text: '%plot-text: %node-value%',
color: '#000',
fontSize: '19px',
fontWeight: 'bold',
jsRule: 'plot_jsRule()'
},
series: [{
text: 'Spring 2015',
values: [11, 17, 24, 35, 39, 47, 45, 46, 41],
clustered: true,
legendMarker: {
backgroundColor: legendColors[0]
}
},
{
text: 'Fall 2015',
values: [29, 29, 23, 24, 23, 24, 26, 32, 35],
clustered: true,
legendMarker: {
backgroundColor: legendColors[1]
}
},
{
text: 'Spring 2016',
values: [12, 13, 15, 13, 11, 9, 8, 5, 6],
clustered: true,
legendMarker: {
backgroundColor: legendColors[2]
}
},
{
text: 'Fall 2016',
values: [21, 18, 16, 13, 11, 7, 9, 6, 6],
clustered: true,
legendMarker: {
backgroundColor: legendColors[3]
}
},
{
text: 'Spring 2017',
values: [],
legendMarker: {
backgroundColor: legendColors[4]
}
},
{
text: 'Fall 2017',
values: [],
legendMarker: {
backgroundColor: legendColors[5]
}
},
{
text: 'Spring 2018',
values: [],
legendMarker: {
backgroundColor: legendColors[5]
}
},
{
text: 'Fall 2018',
values: [],
legendMarker: {
backgroundColor: legendColors[5]
}
},
{
text: 'Spring 2019',
values: [],
legendMarker: {
backgroundColor: legendColors[5]
}
}
]
};
// RENDER CHARTS
// -----------------------------
window.addEventListener('load', () => {
zingchart.render({
id: 'myChart',
data: chartConfig,
output: 'svg'
});
});
</script>
</body>
</html>
// HELPER METHODS
// -----------------------------
window.plot_jsRule = (p) => {
return {
backgroundColor: barColors[p.plotindex][p.nodeindex],
fontColor: p.nodeindex > 3 ? '#fff' : '#000'
};
};
// DEFINE DATA
// -----------------------------
let barColors = [
['#F1D4D4', '#E3A9A9', '#D67F7F', '#C85454', '#BA2929', '#8C1F1F', '#631515', '#4a1111'],
['#DFD9E2', '#BFB4C5', '#9F8EA7', '#7F698A', '#5F436D', '#523a5f', '#3e2c48', '#2e2135'],
['#D4DFE5', '#A9BFCA', '#7F9FB0', '#547F95', '#295F7B', '#1F475C', '#1a394a', '#142b38'],
['#D4E9F3', '#A9D4E6', '#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91', '#175773', '#124256']
];
let legendColors = ['#D3D3D3', '#A7A7A7', '#929292', '#808080', '#6b6b6b', '#4c4c4c', '#1f1f1f', '#000'];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'bar',
backgroundColor: '#FFF',
clustered: true,
title: {
text: 'SNAPCHAT IS TOPS WITH AMERICAN TEENS',
padding: '0px',
fontColor: '#000',
fontSize: '22px',
fontWeight: 'bold',
textAlign: 'center'
},
subtitle: {
text: 'Percentage of US teens who consider the following social networks their favorite',
padding: '0px 0px 0px 10px',
fontColor: '#656263',
fontSize: '14px',
fontWeight: 'normal',
textAlign: 'left'
},
legend: {
padding: '0px',
borderWidth: '0px',
item: {
fontColor: '#222',
fontSize: '14px',
fontWeight: 'bold'
},
layout: 'x4',
marker: {
size: '8px'
},
offsetY: '40px',
toggleAction: 'disabled'
},
plot: {
valueBox: {
fontColor: '#000',
fontSize: '12px',
offsetY: '5px',
placement: 'top'
},
barWidth: '90%',
jsRule: 'plot_jsRule()'
},
plotarea: {
margin: '90px 40px 50px 40px'
},
scaleX: {
values: ['Snapchat', 'Instagram', 'Facebook', 'Twitter'],
item: {
fontColor: '#000',
fontSize: '16px',
fontWeight: 'bold',
textAlign: 'center'
},
lineWidth: '2px',
maxItems: 99,
tick: {
visible: false
}
},
scaleY: {
format: '%scale-value%',
item: {
fontColor: '#7A7A7A'
},
lineWidth: '0px',
maxValue: 50,
minValue: 0,
tick: {
visible: false
}
},
source: {
text: '<b>SOURCES:</b> Piper Jaffray; TAKING STOCK WITH TEENS - SPRING 2019 INFOGRAPHIC',
marginBottom: '2px',
paddingLeft: '20px',
fontColor: '#656263',
fontSize: '12px',
fontWeight: 'normal',
textAlign: 'left'
},
tooltip: {
text: '%plot-text: %node-value%',
color: '#000',
fontSize: '19px',
fontWeight: 'bold',
jsRule: 'plot_jsRule()'
},
series: [
{
text: 'Spring 2015',
values: [11, 17, 24, 35, 39, 47, 45, 46, 41],
clustered: true,
legendMarker: {
backgroundColor: legendColors[0]
}
},
{
text: 'Fall 2015',
values: [29, 29, 23, 24, 23, 24, 26, 32, 35],
clustered: true,
legendMarker: {
backgroundColor: legendColors[1]
}
},
{
text: 'Spring 2016',
values: [12, 13, 15, 13, 11, 9, 8, 5, 6],
clustered: true,
legendMarker: {
backgroundColor: legendColors[2]
}
},
{
text: 'Fall 2016',
values: [21, 18, 16, 13, 11, 7, 9, 6, 6],
clustered: true,
legendMarker: {
backgroundColor: legendColors[3]
}
},
{
text: 'Spring 2017',
values: [],
legendMarker: {
backgroundColor: legendColors[4]
}
},
{
text: 'Fall 2017',
values: [],
legendMarker: {
backgroundColor: legendColors[5]
}
},
{
text: 'Spring 2018',
values: [],
legendMarker: {
backgroundColor: legendColors[5]
}
},
{
text: 'Fall 2018',
values: [],
legendMarker: {
backgroundColor: legendColors[5]
}
},
{
text: 'Spring 2019',
values: [],
legendMarker: {
backgroundColor: legendColors[5]
}
}
]
};
// RENDER CHARTS
// -----------------------------
window.addEventListener('load', () => {
zingchart.render({
id: 'myChart',
data: chartConfig,
output: 'svg'
});
});
