<!DOCTYPE html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/dev/zingchart.min.js"></script>
<style>
.zc-html,
.zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
margin: 2rem;
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<!-- CHART CONTAINER -->
<div id="zc" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'line',
title: {
text: 'STREAMS',
align: 'left',
color: '#999999',
fontSize: '10px',
marginTop: '178px',
paddingLeft: '90px',
},
legend: {
borderWidth: '0px',
item: {
text: "\u00A0\u00A0\u00A0\u00A0\u00A0%plot-text<br><span style='font-size:19px;color:%color'>%node-value</span>",
color: '#666666',
fontWeight: 'bold',
margin: '5 30 5 10',
},
layout: '2x3',
margin: '60px auto auto 14px',
marker: {
type: 'default',
backgroundImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAItJREFUeNpi/P//PwM5gImBTEAXjSpAnArngfxIBBYE4vP/ISAOJEaMjQJAvAeIDYD4IxDfR7aRCYirgNgQi01noTa9B2JTmBxMQSFU8jUQ6xDShKxRCYivQhW9AmIPID6JSxOyRhAWB+Ir/1EBVk3oGmGarxLShE0jCEsA8RYgtsAXRYx0T6sAAQYA/tZI643AdiwAAAAASUVORK5CYII=',
backgroundPosition: '50% 50%',
backgroundRepeat: false,
borderRadius: '2px',
borderWidth: '0px',
height: '12px',
offsetX: '22px',
offsetY: '-12px',
width: '12px',
},
markerOff: {
backgroundColor: '#bbb',
backgroundImage: 'none',
},
toggleAction: 'remove',
},
plot: {
tooltip: {
visible: false,
},
dataWeek: [
'Oct 1 - Oct 2',
'Oct 2 - Oct 4',
'Oct 5 - Oct 9',
'Oct 10 - Oct 11',
'Oct 11 - Oct 14',
'Oct 15 - Oct 17',
'Oct 18 - Oct 22',
'Oct 23 - Oct 25',
'Oct 26 - Oct 27',
'Oct 28 - Oct 29',
],
animation: {
speed: 400,
},
aspect: 'spline',
lineWidth: '2px',
marker: {
size: 3,
visible: true,
rules: [{
rule: '%node-index > 0',
visible: false,
}, ],
},
thousandsSeparator: ',',
},
plotarea: {
margin: '200px 50px dynamic 50px',
},
scaleX: {
labels: [
'Oct 1 - Oct 2',
'Oct 2 - Oct 4',
'Oct 5 - Oct 9',
'Oct 10 - Oct 11',
'Oct 11 - Oct 14',
'Oct 15 - Oct 17',
'Oct 18 - Oct 22',
'Oct 23 - Oct 25',
'Oct 26 - Oct 27',
'Oct 28 - Oct 29',
],
guide: {
alpha: 0.3,
lineWidth: '3px',
visible: true,
rules: [{
rule: '%i == 0',
visible: false,
}, ],
},
item: {
fontSize: '10px',
},
itemsOverlap: false,
maxItems: '999px',
offsetStart: '40px',
},
scaleY: {
guide: {
lineColor: '#9e9e9e',
lineGapSize: '5px',
lineStyle: 'dotted',
},
item: {
fontSize: '10px',
offsetX: '30px',
offsetY: '-10px',
},
lineWidth: 0,
short: true,
tick: {
visible: false,
},
},
crosshairX: {
alpha: 1,
lineColor: '#00e676',
lineWidth: '2px',
marker: {
visible: true,
size: 3,
borderWidth: 1,
borderColor: '#ffffff',
},
plotLabel: {
alpha: 0,
},
scaleLabel: {
fontSize: '10px',
},
shadow: true,
shadowAlpha: 0.2,
shadowAngle: 0,
shadowBlur: 18,
shadowColor: '#00e676',
shadowDistance: 0,
},
labels: [{
align: 'left',
id: 'week',
color: '#666666',
x: '50px',
y: '10px',
fontSize: '10px',
fontWeight: 'bold',
text: "WEEK<br><br><span style='font-size:13px;color:#000000'>%plot-0-data-week</span>",
'default-value': 'Oct 28 - Oct 29',
}, ],
series: [{
text: 'Apple Music',
values: [25, 44, 55, 40, 43, 55, 80, 95, 125, 200],
lineColor: '#9c27b0',
marker: {
backgroundColor: '#ba68c8',
},
},
{
text: 'Google Play',
values: [15, 24, 25, 20, 23, 25, 50, 55, 75, 100],
lineColor: '#ffea00',
marker: {
backgroundColor: '#ffea00',
},
},
{
text: 'Spotify',
values: [125, 144, 155, 140, 143, 155, 180, 195, 1125, 1200],
lineColor: '#00e676',
marker: {
backgroundColor: '#00e676',
},
},
{
text: 'Youtube UGC',
values: [115, 124, 135, 120, 133, 135, 150, 155, 1025, 1400],
lineColor: '#f50057',
marker: {
backgroundColor: '#f50057',
},
},
{
text: 'Youtube Official Music Videos',
values: [145, 164, 125, 125, 131, 132, 140, 145, 1015, 1100],
lineColor: '#f44336',
marker: {
backgroundColor: '#f44336',
},
},
],
};
let previousGuideObject = null;
// when user is moving the mouse around
zingchart.bind('zc', 'mousemove', function(e) {
// if we left the plotarea
if (!e.plotarea && previousGuideObject) {
zingchart.exec('zc', 'setguide', {
keyvalue: previousGuideObject.items[0].keyvalue,
});
}
});
// when user mouse leaves full chart
zingchart.bind('zc', 'mouseout', function(e) {
zingchart.exec('zc', 'setguide', {
keyvalue: previousGuideObject.items[0].keyvalue,
});
});
// save the guide position for when mouse
// leaves chart
zingchart.bind('zc', 'guide_mousemove', function(e) {
previousGuideObject = e;
});
// render chart
zingchart.render({
id: 'zc',
data: chartConfig,
height: '100%',
width: '100%',
});
});
</script>
</body>
</html>
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'line',
title: {
text: 'STREAMS',
align: 'left',
color: '#999999',
fontSize: '10px',
marginTop: '178px',
paddingLeft: '90px',
},
legend: {
borderWidth: '0px',
item: {
text: "\u00A0\u00A0\u00A0\u00A0\u00A0%plot-text<br><span style='font-size:19px;color:%color'>%node-value</span>",
color: '#666666',
fontWeight: 'bold',
margin: '5 30 5 10',
},
layout: '2x3',
margin: '60px auto auto 14px',
marker: {
type: 'default',
backgroundImage:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAItJREFUeNpi/P//PwM5gImBTEAXjSpAnArngfxIBBYE4vP/ISAOJEaMjQJAvAeIDYD4IxDfR7aRCYirgNgQi01noTa9B2JTmBxMQSFU8jUQ6xDShKxRCYivQhW9AmIPID6JSxOyRhAWB+Ir/1EBVk3oGmGarxLShE0jCEsA8RYgtsAXRYx0T6sAAQYA/tZI643AdiwAAAAASUVORK5CYII=',
backgroundPosition: '50% 50%',
backgroundRepeat: false,
borderRadius: '2px',
borderWidth: '0px',
height: '12px',
offsetX: '22px',
offsetY: '-12px',
width: '12px',
},
markerOff: {
backgroundColor: '#bbb',
backgroundImage: 'none',
},
toggleAction: 'remove',
},
plot: {
tooltip: {
visible: false,
},
dataWeek: [
'Oct 1 - Oct 2',
'Oct 2 - Oct 4',
'Oct 5 - Oct 9',
'Oct 10 - Oct 11',
'Oct 11 - Oct 14',
'Oct 15 - Oct 17',
'Oct 18 - Oct 22',
'Oct 23 - Oct 25',
'Oct 26 - Oct 27',
'Oct 28 - Oct 29',
],
animation: {
speed: 400,
},
aspect: 'spline',
lineWidth: '2px',
marker: {
size: 3,
visible: true,
rules: [
{
rule: '%node-index > 0',
visible: false,
},
],
},
thousandsSeparator: ',',
},
plotarea: {
margin: '200px 50px dynamic 50px',
},
scaleX: {
labels: [
'Oct 1 - Oct 2',
'Oct 2 - Oct 4',
'Oct 5 - Oct 9',
'Oct 10 - Oct 11',
'Oct 11 - Oct 14',
'Oct 15 - Oct 17',
'Oct 18 - Oct 22',
'Oct 23 - Oct 25',
'Oct 26 - Oct 27',
'Oct 28 - Oct 29',
],
guide: {
alpha: 0.3,
lineWidth: '3px',
visible: true,
rules: [
{
rule: '%i == 0',
visible: false,
},
],
},
item: {
fontSize: '10px',
},
itemsOverlap: false,
maxItems: '999px',
offsetStart: '40px',
},
scaleY: {
guide: {
lineColor: '#9e9e9e',
lineGapSize: '5px',
lineStyle: 'dotted',
},
item: {
fontSize: '10px',
offsetX: '30px',
offsetY: '-10px',
},
lineWidth: 0,
short: true,
tick: {
visible: false,
},
},
crosshairX: {
alpha: 1,
lineColor: '#00e676',
lineWidth: '2px',
marker: {
visible: true,
size: 3,
borderWidth: 1,
borderColor: '#ffffff',
},
plotLabel: {
alpha: 0,
},
scaleLabel: {
fontSize: '10px',
},
shadow: true,
shadowAlpha: 0.2,
shadowAngle: 0,
shadowBlur: 18,
shadowColor: '#00e676',
shadowDistance: 0,
},
labels: [
{
align: 'left',
id: 'week',
color: '#666666',
x: '50px',
y: '10px',
fontSize: '10px',
fontWeight: 'bold',
text: "WEEK<br><br><span style='font-size:13px;color:#000000'>%plot-0-data-week</span>",
'default-value': 'Oct 28 - Oct 29',
},
],
series: [
{
text: 'Apple Music',
values: [25, 44, 55, 40, 43, 55, 80, 95, 125, 200],
lineColor: '#9c27b0',
marker: {
backgroundColor: '#ba68c8',
},
},
{
text: 'Google Play',
values: [15, 24, 25, 20, 23, 25, 50, 55, 75, 100],
lineColor: '#ffea00',
marker: {
backgroundColor: '#ffea00',
},
},
{
text: 'Spotify',
values: [125, 144, 155, 140, 143, 155, 180, 195, 1125, 1200],
lineColor: '#00e676',
marker: {
backgroundColor: '#00e676',
},
},
{
text: 'Youtube UGC',
values: [115, 124, 135, 120, 133, 135, 150, 155, 1025, 1400],
lineColor: '#f50057',
marker: {
backgroundColor: '#f50057',
},
},
{
text: 'Youtube Official Music Videos',
values: [145, 164, 125, 125, 131, 132, 140, 145, 1015, 1100],
lineColor: '#f44336',
marker: {
backgroundColor: '#f44336',
},
},
],
};
let previousGuideObject = null;
// when user is moving the mouse around
zingchart.bind('zc', 'mousemove', function (e) {
// if we left the plotarea
if (!e.plotarea && previousGuideObject) {
zingchart.exec('zc', 'setguide', {
keyvalue: previousGuideObject.items[0].keyvalue,
});
}
});
// when user mouse leaves full chart
zingchart.bind('zc', 'mouseout', function (e) {
zingchart.exec('zc', 'setguide', {
keyvalue: previousGuideObject.items[0].keyvalue,
});
});
// save the guide position for when mouse
// leaves chart
zingchart.bind('zc', 'guide_mousemove', function (e) {
previousGuideObject = e;
});
// render chart
zingchart.render({
id: 'zc',
data: chartConfig,
height: '100%',
width: '100%',
});
});
