<!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;
}
zing-grid[loading] {
height: 450px;
}
</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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
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',
});