<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
zingchart.loadModules('multi-guide');
let chartConfig = {
type: 'line',
title: {
text: 'Click on chart to lock a crosshair'
},
subtitle: {
text: 'change label text, move it or delete it'
},
legend: {
layout: 'float',
toggleAction: 'remove'
},
plotarea: {
margin: '50 dynamic 100 dynamic'
},
crosshairX: {
plotLabel: {
multiple: true
},
exact: true
},
crosshairY: {},
options: {
close: {
borderColor: '#090',
borderWidth: 2,
topState: {
backgroundColor: 'red',
offsetX: 10,
offsetY: 10,
},
},
},
scaleX: {
step: 'day',
transform: {
type: 'date',
item: {
visible: false
}
},
zooming: 1
},
zoom: {
preserveZoom: true
},
tooltip: {
alpha: 0.85,
backgroundColor: '#333 #aaa',
borderRadius: 8,
borderWidth: 0,
color: '#fff',
padding: 8,
shadow: false,
visible: false,
},
preview: {
backgroundColor: '#f7d7f4',
borderWidth: 5,
live: true,
handle: {
backgroundColor: '#333',
borderRadius: 0,
lineColor: '#aaa',
height: 50,
width: 13
}
},
plot: {
aspect: 'spline',
exact: 1,
lineWidth: 1,
maxNodes: 0,
shadow: 0,
stacked: 1,
marker: {
size: 2
}
},
series: [{
values: [
[1379486375000, 182],
[1380263975000, 181],
[1380523175000, 171],
[1380695975000, 169],
[1381991975000, 167],
[1382337575000, 169],
[1382683175000, 170],
[1382855975000, 178],
[1382942375000, 180],
[1383115175000, 184],
[1383806375000, 191],
[1384411175000, 190],
[1385620775000, 195],
[1385793575000, 205],
[1386225575000, 203],
[1386657575000, 200],
[1387089575000, 198],
[1387607975000, 191],
[1387953575000, 184],
[1388817575000, 179],
[1388903975000, 174],
[1389940775000, 178],
[1390372775000, 175],
[1390977575000, 176],
[1391063975000, 177],
[1391409575000, 175],
[1391927975000, 183],
[1392878375000, 184],
[1394433575000, 185],
[1395211175000, 187],
[1395470375000, 181],
[1396247975000, 182],
[1396420775000, 187],
[1396679975000, 185],
[1397284775000, 190],
[1398321575000, 182],
[1398407975000, 173],
[1398580775000, 179],
[1398839975000, 173],
[1399271975000, 183],
[1399876775000, 175],
[1400827175000, 165],
[1400999975000, 173],
[1401691175000, 180],
[1402123175000, 176],
[1402295975000, 182],
[1403159975000, 184],
[1404455975000, 180],
[1404628775000, 171],
[1404801575000, 169],
[1405060775000, 177],
[1406356775000, 173],
[1406443175000, 168],
[1407652775000, 168],
[1408343975000, 164],
[1408862375000, 171],
[1408948775000, 172],
[1409380775000, 169],
[1409553575000, 164],
[1410071975000, 174],
[1410417575000, 172],
[1410763175000, 177],
[1410849575000, 183],
[1411108775000, 184],
[1411540775000, 183],
[1412145575000, 193],
[1413873575000, 196],
[1414391975000, 197],
[1414478375000, 202],
[1418366375000, 211],
[1418625575000, 209],
[1418798375000, 204],
[1418971175000, 202],
[1419835175000, 196],
[1420007975000, 196],
[1420094375000, 204],
[1420439975000, 210],
[1420785575000, 214],
[1420871975000, 220],
[1422340775000, 211],
[1423377575000, 210],
[1423723175000, 207],
[1424414375000, 198],
[1426228775000, 189],
[1426660775000, 184],
[1426833575000, 178],
[1427697575000, 177],
[1428820775000, 169],
[1428993575000, 160],
[1429252775000, 164],
[1429511975000, 155],
[1429943975000, 151],
[1430030375000, 149],
[1431067175000, 149],
[1431412775000, 149],
[1431585575000, 157],
[1432017575000, 166],
[1432708775000, 157],
[1433572775000, 151],
[1434695975000, 160],
[1436337575000, 159],
[1436596775000, 164],
[1436769575000, 154],
[1437115175000, 164],
[1437460775000, 165],
[1437547175000, 159],
[1437719975000, 159],
[1438497575000, 156],
[1438583975000, 165],
[1438756775000, 172],
[1439015975000, 180],
[1439879975000, 184],
[1439966375000, 193],
[1440830375000, 202],
[1441694375000, 204],
[1443249575000, 211],
[1443854375000, 205],
[1444113575000, 215],
[1444199975000, 223],
[1445841575000, 222],
[1445927975000, 232],
[1446359975000, 225],
[1446532775000, 216],
[1446705575000, 213],
[1446791975000, 206],
[1447223975000, 198],
[1447310375000, 205],
[1448347175000, 195],
[1449124775000, 191],
[1451457575000, 200],
[1451716775000, 191],
[1452580775000, 193],
[1452667175000, 185],
[1453099175000, 193],
[1453185575000, 199],
[1453531175000, 189],
[1453790375000, 189],
[1453876775000, 189],
[1454827175000, 186],
[1455431975000, 183],
[1455950375000, 177],
[1456987175000, 167],
[1457505575000, 160],
[1458283175000, 153],
[1459233575000, 160],
[1459751975000, 153],
[1459838375000, 150],
[1460097575000, 158],
[1460702375000, 152],
[1461393575000, 155],
[1461479975000, 165],
[1463121575000, 170],
[1463380775000, 176],
[1463899175000, 180],
[1464331175000, 172],
[1464935975000, 182],
[1465281575000, 190],
[1465713575000, 182]
]
},
{
rules: [{
rule: '%node-value < 50',
lineColor: '#900'
},
{
rule: '%node-value >= 50 && %node-value < 70',
lineColor: '#090'
}
],
values: [
[1379486375000, 48],
[1380436775000, 55],
[1380523175000, 61],
[1380782375000, 60],
[1380868775000, 65],
[1381819175000, 56],
[1382251175000, 54],
[1382510375000, 48],
[1382942375000, 53],
[1383115175000, 49],
[1383547175000, 58],
[1383633575000, 65],
[1384670375000, 62],
[1384756775000, 59],
[1385102375000, 50],
[1385447975000, 59],
[1385793575000, 50],
[1386916775000, 44],
[1387003175000, 38],
[1387348775000, 38],
[1388039975000, 47],
[1389767975000, 48],
[1391409575000, 41],
[1391668775000, 34],
[1392187175000, 34],
[1392964775000, 44],
[1394087975000, 43],
[1394174375000, 50],
[1394692775000, 46],
[1394865575000, 49],
[1395038375000, 57],
[1396075175000, 57],
[1396247975000, 56],
[1396507175000, 56],
[1397111975000, 63],
[1397543975000, 57],
[1397630375000, 63],
[1397716775000, 60],
[1398062375000, 62],
[1398494375000, 65],
[1398753575000, 69],
[1399012775000, 59],
[1399963175000, 65],
[1400049575000, 72],
[1400999975000, 80],
[1401604775000, 74],
[1402123175000, 75],
[1402814375000, 79],
[1403332775000, 75],
[1404369575000, 85],
[1406875175000, 78],
[1407307175000, 72],
[1407652775000, 82],
[1407825575000, 81],
[1408343975000, 86],
[1409467175000, 96],
[1409639975000, 91],
[1410244775000, 81],
[1411022375000, 72],
[1411108775000, 75],
[1412577575000, 67],
[1413182375000, 62],
[1413787175000, 59],
[1414305575000, 61],
[1414651175000, 59],
[1415860775000, 59],
[1416724775000, 66],
[1417675175000, 62],
[1418452775000, 53],
[1418539175000, 53],
[1418798375000, 51],
[1419230375000, 60],
[1420007975000, 68],
[1420094375000, 68],
[1420267175000, 63],
[1421303975000, 61],
[1422599975000, 55],
[1422772775000, 57],
[1422859175000, 63],
[1422945575000, 59],
[1423031975000, 64],
[1423550375000, 60],
[1423809575000, 57],
[1424327975000, 49],
[1425105575000, 52],
[1425796775000, 60],
[1425883175000, 59],
[1426401575000, 54],
[1427006375000, 53],
[1427179175000, 48],
[1427351975000, 43],
[1428388775000, 46],
[1428561575000, 47],
[1428734375000, 47],
[1429079975000, 55],
[1429771175000, 51],
[1430116775000, 45],
[1431067175000, 50],
[1431153575000, 58],
[1431412775000, 58],
[1431499175000, 53],
[1431671975000, 51],
[1433140775000, 57],
[1433399975000, 50],
[1433745575000, 53],
[1433918375000, 47],
[1434004775000, 55],
[1435041575000, 50],
[1435300775000, 57],
[1435646375000, 65],
[1436251175000, 67],
[1436423975000, 57],
[1436596775000, 57],
[1439361575000, 65],
[1440052775000, 68],
[1440916775000, 73],
[1442558375000, 72],
[1442903975000, 66],
[1443508775000, 65],
[1444199975000, 65],
[1444459175000, 59],
[1445582375000, 62],
[1445755175000, 62],
[1446187175000, 72],
[1446619175000, 72],
[1446791975000, 73],
[1447223975000, 67],
[1447310375000, 76],
[1448606375000, 80],
[1449038375000, 80],
[1449297575000, 74],
[1450420775000, 75],
[1451198375000, 78],
[1452494375000, 88],
[1452839975000, 79],
[1455086375000, 77],
[1456036775000, 79],
[1457678375000, 70],
[1458455975000, 73],
[1458542375000, 63],
[1458887975000, 54],
[1460183975000, 53],
[1460788775000, 50],
[1461652775000, 60],
[1462084775000, 69],
[1462689575000, 64],
[1464763175000, 74],
[1464935975000, 65],
[1465108775000, 58],
[1465281575000, 51]
]
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
modules: 'multi-guide',
});
</script>
</body>
</html>
zingchart.loadModules('multi-guide');
let chartConfig = {
type: 'line',
title: {
text: 'Click on chart to lock a crosshair'
},
subtitle: {
text: 'change label text, move it or delete it'
},
legend: {
layout: 'float',
toggleAction: 'remove'
},
plotarea: {
margin: '50 dynamic 100 dynamic'
},
crosshairX: {
plotLabel: {
multiple: true
},
exact: true
},
crosshairY: {},
options: {
close: {
borderColor: '#090',
borderWidth: 2,
topState: {
backgroundColor: 'red',
offsetX: 10,
offsetY: 10,
},
},
},
scaleX: {
step: 'day',
transform: {
type: 'date',
item: {
visible: false
}
},
zooming: 1
},
zoom: {
preserveZoom: true
},
tooltip: {
alpha: 0.85,
backgroundColor: '#333 #aaa',
borderRadius: 8,
borderWidth: 0,
color: '#fff',
padding: 8,
shadow: false,
visible: false,
},
preview: {
backgroundColor: '#f7d7f4',
borderWidth: 5,
live: true,
handle: {
backgroundColor: '#333',
borderRadius: 0,
lineColor: '#aaa',
height: 50,
width: 13
}
},
plot: {
aspect: 'spline',
exact: 1,
lineWidth: 1,
maxNodes: 0,
shadow: 0,
stacked: 1,
marker: {
size: 2
}
},
series: [{
values: [
[1379486375000, 182],
[1380263975000, 181],
[1380523175000, 171],
[1380695975000, 169],
[1381991975000, 167],
[1382337575000, 169],
[1382683175000, 170],
[1382855975000, 178],
[1382942375000, 180],
[1383115175000, 184],
[1383806375000, 191],
[1384411175000, 190],
[1385620775000, 195],
[1385793575000, 205],
[1386225575000, 203],
[1386657575000, 200],
[1387089575000, 198],
[1387607975000, 191],
[1387953575000, 184],
[1388817575000, 179],
[1388903975000, 174],
[1389940775000, 178],
[1390372775000, 175],
[1390977575000, 176],
[1391063975000, 177],
[1391409575000, 175],
[1391927975000, 183],
[1392878375000, 184],
[1394433575000, 185],
[1395211175000, 187],
[1395470375000, 181],
[1396247975000, 182],
[1396420775000, 187],
[1396679975000, 185],
[1397284775000, 190],
[1398321575000, 182],
[1398407975000, 173],
[1398580775000, 179],
[1398839975000, 173],
[1399271975000, 183],
[1399876775000, 175],
[1400827175000, 165],
[1400999975000, 173],
[1401691175000, 180],
[1402123175000, 176],
[1402295975000, 182],
[1403159975000, 184],
[1404455975000, 180],
[1404628775000, 171],
[1404801575000, 169],
[1405060775000, 177],
[1406356775000, 173],
[1406443175000, 168],
[1407652775000, 168],
[1408343975000, 164],
[1408862375000, 171],
[1408948775000, 172],
[1409380775000, 169],
[1409553575000, 164],
[1410071975000, 174],
[1410417575000, 172],
[1410763175000, 177],
[1410849575000, 183],
[1411108775000, 184],
[1411540775000, 183],
[1412145575000, 193],
[1413873575000, 196],
[1414391975000, 197],
[1414478375000, 202],
[1418366375000, 211],
[1418625575000, 209],
[1418798375000, 204],
[1418971175000, 202],
[1419835175000, 196],
[1420007975000, 196],
[1420094375000, 204],
[1420439975000, 210],
[1420785575000, 214],
[1420871975000, 220],
[1422340775000, 211],
[1423377575000, 210],
[1423723175000, 207],
[1424414375000, 198],
[1426228775000, 189],
[1426660775000, 184],
[1426833575000, 178],
[1427697575000, 177],
[1428820775000, 169],
[1428993575000, 160],
[1429252775000, 164],
[1429511975000, 155],
[1429943975000, 151],
[1430030375000, 149],
[1431067175000, 149],
[1431412775000, 149],
[1431585575000, 157],
[1432017575000, 166],
[1432708775000, 157],
[1433572775000, 151],
[1434695975000, 160],
[1436337575000, 159],
[1436596775000, 164],
[1436769575000, 154],
[1437115175000, 164],
[1437460775000, 165],
[1437547175000, 159],
[1437719975000, 159],
[1438497575000, 156],
[1438583975000, 165],
[1438756775000, 172],
[1439015975000, 180],
[1439879975000, 184],
[1439966375000, 193],
[1440830375000, 202],
[1441694375000, 204],
[1443249575000, 211],
[1443854375000, 205],
[1444113575000, 215],
[1444199975000, 223],
[1445841575000, 222],
[1445927975000, 232],
[1446359975000, 225],
[1446532775000, 216],
[1446705575000, 213],
[1446791975000, 206],
[1447223975000, 198],
[1447310375000, 205],
[1448347175000, 195],
[1449124775000, 191],
[1451457575000, 200],
[1451716775000, 191],
[1452580775000, 193],
[1452667175000, 185],
[1453099175000, 193],
[1453185575000, 199],
[1453531175000, 189],
[1453790375000, 189],
[1453876775000, 189],
[1454827175000, 186],
[1455431975000, 183],
[1455950375000, 177],
[1456987175000, 167],
[1457505575000, 160],
[1458283175000, 153],
[1459233575000, 160],
[1459751975000, 153],
[1459838375000, 150],
[1460097575000, 158],
[1460702375000, 152],
[1461393575000, 155],
[1461479975000, 165],
[1463121575000, 170],
[1463380775000, 176],
[1463899175000, 180],
[1464331175000, 172],
[1464935975000, 182],
[1465281575000, 190],
[1465713575000, 182]
]
},
{
rules: [{
rule: '%node-value < 50',
lineColor: '#900'
},
{
rule: '%node-value >= 50 && %node-value < 70',
lineColor: '#090'
}
],
values: [
[1379486375000, 48],
[1380436775000, 55],
[1380523175000, 61],
[1380782375000, 60],
[1380868775000, 65],
[1381819175000, 56],
[1382251175000, 54],
[1382510375000, 48],
[1382942375000, 53],
[1383115175000, 49],
[1383547175000, 58],
[1383633575000, 65],
[1384670375000, 62],
[1384756775000, 59],
[1385102375000, 50],
[1385447975000, 59],
[1385793575000, 50],
[1386916775000, 44],
[1387003175000, 38],
[1387348775000, 38],
[1388039975000, 47],
[1389767975000, 48],
[1391409575000, 41],
[1391668775000, 34],
[1392187175000, 34],
[1392964775000, 44],
[1394087975000, 43],
[1394174375000, 50],
[1394692775000, 46],
[1394865575000, 49],
[1395038375000, 57],
[1396075175000, 57],
[1396247975000, 56],
[1396507175000, 56],
[1397111975000, 63],
[1397543975000, 57],
[1397630375000, 63],
[1397716775000, 60],
[1398062375000, 62],
[1398494375000, 65],
[1398753575000, 69],
[1399012775000, 59],
[1399963175000, 65],
[1400049575000, 72],
[1400999975000, 80],
[1401604775000, 74],
[1402123175000, 75],
[1402814375000, 79],
[1403332775000, 75],
[1404369575000, 85],
[1406875175000, 78],
[1407307175000, 72],
[1407652775000, 82],
[1407825575000, 81],
[1408343975000, 86],
[1409467175000, 96],
[1409639975000, 91],
[1410244775000, 81],
[1411022375000, 72],
[1411108775000, 75],
[1412577575000, 67],
[1413182375000, 62],
[1413787175000, 59],
[1414305575000, 61],
[1414651175000, 59],
[1415860775000, 59],
[1416724775000, 66],
[1417675175000, 62],
[1418452775000, 53],
[1418539175000, 53],
[1418798375000, 51],
[1419230375000, 60],
[1420007975000, 68],
[1420094375000, 68],
[1420267175000, 63],
[1421303975000, 61],
[1422599975000, 55],
[1422772775000, 57],
[1422859175000, 63],
[1422945575000, 59],
[1423031975000, 64],
[1423550375000, 60],
[1423809575000, 57],
[1424327975000, 49],
[1425105575000, 52],
[1425796775000, 60],
[1425883175000, 59],
[1426401575000, 54],
[1427006375000, 53],
[1427179175000, 48],
[1427351975000, 43],
[1428388775000, 46],
[1428561575000, 47],
[1428734375000, 47],
[1429079975000, 55],
[1429771175000, 51],
[1430116775000, 45],
[1431067175000, 50],
[1431153575000, 58],
[1431412775000, 58],
[1431499175000, 53],
[1431671975000, 51],
[1433140775000, 57],
[1433399975000, 50],
[1433745575000, 53],
[1433918375000, 47],
[1434004775000, 55],
[1435041575000, 50],
[1435300775000, 57],
[1435646375000, 65],
[1436251175000, 67],
[1436423975000, 57],
[1436596775000, 57],
[1439361575000, 65],
[1440052775000, 68],
[1440916775000, 73],
[1442558375000, 72],
[1442903975000, 66],
[1443508775000, 65],
[1444199975000, 65],
[1444459175000, 59],
[1445582375000, 62],
[1445755175000, 62],
[1446187175000, 72],
[1446619175000, 72],
[1446791975000, 73],
[1447223975000, 67],
[1447310375000, 76],
[1448606375000, 80],
[1449038375000, 80],
[1449297575000, 74],
[1450420775000, 75],
[1451198375000, 78],
[1452494375000, 88],
[1452839975000, 79],
[1455086375000, 77],
[1456036775000, 79],
[1457678375000, 70],
[1458455975000, 73],
[1458542375000, 63],
[1458887975000, 54],
[1460183975000, 53],
[1460788775000, 50],
[1461652775000, 60],
[1462084775000, 69],
[1462689575000, 64],
[1464763175000, 74],
[1464935975000, 65],
[1465108775000, 58],
[1465281575000, 51]
]
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
modules: 'multi-guide',
});