<!DOCTYPE html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script 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 = {
"graphset": [{
"type": "line",
"labels": [{
"align": "left",
"id": "week",
"color": "#666666",
"x": 50,
"y": 10,
"fontSize": 10,
"fontWeight": "bold",
"text": "WEEK<br><br><span style='font-size:13px;color:#000000'>%plot-0-data-week</span>",
"default-value": "Oct 28 - Oct 29"
}],
"legend": {
"toggle-action": "remove",
"margin": "60 auto auto 14",
"layout": "2x3",
"borderWidth": 0,
"item": {
"margin": "5 30 5 10",
"color": "#666666",
"fontWeight": "bold",
"text": "\u00A0\u00A0\u00A0\u00A0\u00A0%plot-text<br><span style='font-size:19px;color:%color'>%node-value</span>"
},
"marker": {
"type": "default",
"width": 12,
"height": 12,
"border-width": 0,
"border-radius": 2,
"offsetX": 22,
"offsetY": -12,
"background-image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAItJREFUeNpi/P//PwM5gImBTEAXjSpAnArngfxIBBYE4vP/ISAOJEaMjQJAvAeIDYD4IxDfR7aRCYirgNgQi01noTa9B2JTmBxMQSFU8jUQ6xDShKxRCYivQhW9AmIPID6JSxOyRhAWB+Ir/1EBVk3oGmGarxLShE0jCEsA8RYgtsAXRYx0T6sAAQYA/tZI643AdiwAAAAASUVORK5CYII=",
"background-position": "50% 50%",
"background-repeat": false
},
"marker-off": {
"background-image": "none",
"background-color": "#bbb"
}
},
"plotarea": {
"margin": "200 50 dynamic 50"
},
"title": {
"text": "STREAMS",
"align": "left",
"fontSize": 10,
"color": "#999999",
"marginTop": 178,
"paddingLeft": 90
},
"scaleX": {
"offsetStart": 40,
"maxItems": 999,
"itemsOverlap": false,
"item": {
"fontSize": 10
},
"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": {
"visible": true,
"lineWidth": "3px",
"alpha": 0.3,
"rules": [{
"rule": "%i == 0",
"visible": false
}]
}
},
"scaleY": {
"short": true,
"item": {
"fontSize": 10,
"offsetX": "30px",
"offsetY": "-10px"
},
"guide": {
"lineStyle": "dotted",
"lineColor": "#9e9e9e",
"lineGapSize": "5px"
},
"lineWidth": 0,
"tick": {
"visible": false
}
},
"plot": {
"thousands-separator": ",",
"data-week": ["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"],
"aspect": "spline",
"lineWidth": 2,
"marker": {
"size": 3,
"visible": true,
"rules": [{
"rule": "%node-index > 0",
"visible": false
}]
},
"tooltip": {
"visible": false
},
"animation": {
"speed": 400
}
},
"crosshairX": {
"plotLabel": {
"alpha": 0
},
"scaleLabel": {
"fontSize": 10
},
"marker": {
"visible": true,
"size": 3,
"borderWidth": 1,
"borderColor": "#ffffff"
},
"lineWidth": 2,
"alpha": 1,
"shadow": true,
"shadowDistance": 0,
"shadowAngle": 0,
"shadowBlur": 18,
"shadowColor": "#00e676",
"shadowAlpha": 0.2,
"lineColor": "#00e676"
},
"series": [{
"values": [25, 44, 55, 40, 43, 55, 80, 95, 125, 200],
"lineColor": "#9c27b0",
"marker": {
"backgroundColor": "#ba68c8"
},
"text": "Apple Music"
},
{
"values": [15, 24, 25, 20, 23, 25, 50, 55, 75, 100],
"lineColor": "#ffea00",
"marker": {
"backgroundColor": "#ffea00"
},
"text": "Google Play"
},
{
"values": [125, 144, 155, 140, 143, 155, 180, 195, 1125, 1200],
"lineColor": "#00e676",
"marker": {
"backgroundColor": "#00e676"
},
"text": "Spotify"
},
{
"values": [115, 124, 135, 120, 133, 135, 150, 155, 1025, 1400],
"lineColor": "#f50057",
"marker": {
"backgroundColor": "#f50057"
},
"text": "Youtube UGC"
},
{
"values": [145, 164, 125, 125, 131, 132, 140, 145, 1015, 1100],
"lineColor": "#f44336",
"marker": {
"backgroundColor": "#f44336"
},
"text": "Youtube Official Music Videos"
}
]
}]
};
let previouseGuidePosition = null;
let previousGuideObject = null;
// when user is moving the mouse around
zingchart.bind('zc', 'mousemove', function(e) {
// if we left the plotarea
if (!e.plotarea) {
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 = {
"graphset":[
{
"type":"line",
"labels":[
{
"align":"left",
"id":"week",
"color":"#666666",
"x":50,
"y":10,
"fontSize":10,
"fontWeight":"bold",
"text":"WEEK<br><br><span style='font-size:13px;color:#000000'>%plot-0-data-week</span>",
"default-value":"Oct 28 - Oct 29"
}
],
"legend":{
"toggle-action":"remove",
"margin":"60 auto auto 14",
"layout":"2x3",
"borderWidth":0,
"item":{
"margin":"5 30 5 10",
"color":"#666666",
"fontWeight":"bold",
"text":"\u00A0\u00A0\u00A0\u00A0\u00A0%plot-text<br><span style='font-size:19px;color:%color'>%node-value</span>"
},
"marker":{
"type":"default",
"width":12,
"height":12,
"border-width":0,
"border-radius":2,
"offsetX":22,
"offsetY":-12,
"background-image":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAItJREFUeNpi/P//PwM5gImBTEAXjSpAnArngfxIBBYE4vP/ISAOJEaMjQJAvAeIDYD4IxDfR7aRCYirgNgQi01noTa9B2JTmBxMQSFU8jUQ6xDShKxRCYivQhW9AmIPID6JSxOyRhAWB+Ir/1EBVk3oGmGarxLShE0jCEsA8RYgtsAXRYx0T6sAAQYA/tZI643AdiwAAAAASUVORK5CYII=",
"background-position":"50% 50%",
"background-repeat":false
},
"marker-off":{
"background-image":"none",
"background-color":"#bbb"
}
},
"plotarea":{
"margin":"200 50 dynamic 50"
},
"title":{
"text":"STREAMS",
"align":"left",
"fontSize":10,
"color":"#999999",
"marginTop":178,
"paddingLeft":90
},
"scaleX":{
"offsetStart":40,
"maxItems":999,
"itemsOverlap":false,
"item":{
"fontSize":10
},
"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":{
"visible":true,
"lineWidth":"3px",
"alpha":0.3,
"rules":[
{
"rule":"%i == 0",
"visible":false
}
]
}
},
"scaleY":{
"short":true,
"item":{
"fontSize":10,
"offsetX":"30px",
"offsetY":"-10px"
},
"guide":{
"lineStyle":"dotted",
"lineColor":"#9e9e9e",
"lineGapSize":"5px"
},
"lineWidth":0,
"tick":{
"visible":false
}
},
"plot":{
"thousands-separator":",",
"data-week":["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"],
"aspect":"spline",
"lineWidth":2,
"marker":{
"size":3,
"visible":true,
"rules":[
{
"rule" : "%node-index > 0",
"visible" : false
}
]
},
"tooltip":{
"visible":false
},
"animation":{
"speed":400
}
},
"crosshairX":{
"plotLabel":{
"alpha":0
},
"scaleLabel":{
"fontSize":10
},
"marker":{
"visible":true,
"size":3,
"borderWidth":1,
"borderColor":"#ffffff"
},
"lineWidth":2,
"alpha":1,
"shadow":true,
"shadowDistance":0,
"shadowAngle":0,
"shadowBlur":18,
"shadowColor":"#00e676",
"shadowAlpha":0.2,
"lineColor":"#00e676"
},
"series":[
{
"values":[25,44,55,40,43,55,80,95,125,200],
"lineColor":"#9c27b0",
"marker":{
"backgroundColor":"#ba68c8"
},
"text":"Apple Music"
},
{
"values":[15,24,25,20,23,25,50,55,75,100],
"lineColor":"#ffea00",
"marker":{
"backgroundColor":"#ffea00"
},
"text":"Google Play"
},
{
"values":[125,144,155,140,143,155,180,195,1125,1200],
"lineColor":"#00e676",
"marker":{
"backgroundColor":"#00e676"
},
"text":"Spotify"
},
{
"values":[115,124,135,120,133,135,150,155,1025,1400],
"lineColor":"#f50057",
"marker":{
"backgroundColor":"#f50057"
},
"text":"Youtube UGC"
},
{
"values":[145,164,125,125,131,132,140,145,1015,1100],
"lineColor":"#f44336",
"marker":{
"backgroundColor":"#f44336"
},
"text":"Youtube Official Music Videos"
}
]
}
]
};
let previouseGuidePosition = null;
let previousGuideObject = null;
// when user is moving the mouse around
zingchart.bind('zc', 'mousemove', function(e) {
// if we left the plotarea
if (!e.plotarea) {
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%',
});
});
