<!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>
<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',
});
});
