<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script 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');
var myConfig = {
"graphset": [{
"type": "line",
"title": {
"text": 'Click on chart to lock a crosshair'
},
"subtitle": {
"text": "change label text, move it or delete it"
},
"legend": {
"layout": "float",
"toggle-action": "remove"
},
"plotarea": {
"margin": "50 dynamic 100 dynamic"
},
"crosshair-x": {
"plot-label": {
"multiple": true
},
"exact": true
},
"crosshair-y": {
},
"options": {
"multi-guide": {
"label": {
"font-size": 20,
"background-color": "#f90",
"hover-state": {
"background-color": "#90f"
}
},
"handle": {
"size": 8,
"border-color": "#009"
},
"close": {
"border-color": "#090",
"border-width": 2,
"-text": "close"
},
"line": {
"line-width": 4,
"line-color": "#c0c",
"line-style": "dashed"
}
}
},
"scale-x": {
"step": "day",
"transform": {
"type": "date",
"item": {
"visible": false
}
},
"zooming": 1
},
"zoom": {
"preserve-zoom": true
},
"tooltip": {},
"tooltip": {
"visible": false,
"padding": 8,
"shadow": false,
"borderRadius": 8,
"color": "#fff",
"backgroundColor": "#333 #aaa",
"borderWidth": 0,
"alpha": 0.85
},
"preview": {
"live": true,
"borderWidth": 5,
"backgroundColor": "#f7d7f4",
"handle": {
"borderRadius": 0,
"backgroundColor": "#333",
"lineColor": "#aaa",
"height": 50,
"width": 13
}
},
"plot": {
"stacked": 1,
"max-nodes": 0,
"-mode": "fast",
"exact": 1,
"shadow": 0,
"aspect": "spline",
"lineWidth": 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: myConfig,
height: '100%',
width: '100%',
modules: 'multi-guide',
});
</script>
</body>
</html>
zingchart.loadModules('multi-guide');
var myConfig = {
"graphset": [{
"type": "line",
"title": {
"text": 'Click on chart to lock a crosshair'
},
"subtitle": {
"text": "change label text, move it or delete it"
},
"legend": {
"layout": "float",
"toggle-action": "remove"
},
"plotarea": {
"margin": "50 dynamic 100 dynamic"
},
"crosshair-x": {
"plot-label": {
"multiple": true
},
"exact": true
},
"crosshair-y": {
},
"options": {
"multi-guide": {
"label": {
"font-size": 20,
"background-color": "#f90",
"hover-state": {
"background-color": "#90f"
}
},
"handle": {
"size": 8,
"border-color": "#009"
},
"close": {
"border-color": "#090",
"border-width": 2,
"-text": "close"
},
"line": {
"line-width": 4,
"line-color": "#c0c",
"line-style": "dashed"
}
}
},
"scale-x": {
"step": "day",
"transform": {
"type": "date",
"item": {
"visible": false
}
},
"zooming": 1
},
"zoom": {
"preserve-zoom": true
},
"tooltip": {},
"tooltip": {
"visible": false,
"padding": 8,
"shadow": false,
"borderRadius": 8,
"color": "#fff",
"backgroundColor": "#333 #aaa",
"borderWidth": 0,
"alpha": 0.85
},
"preview": {
"live": true,
"borderWidth": 5,
"backgroundColor": "#f7d7f4",
"handle": {
"borderRadius": 0,
"backgroundColor": "#333",
"lineColor": "#aaa",
"height": 50,
"width": 13
}
},
"plot": {
"stacked": 1,
"max-nodes": 0,
"-mode": "fast",
"exact": 1,
"shadow": 0,
"aspect": "spline",
"lineWidth": 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: myConfig,
height: '100%',
width: '100%',
modules: 'multi-guide',
});