- <!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: {
- label: {
- backgroundColor: '#f90',
- fontSize: 20,
- hoverState: {
- backgroundColor: '#90f'
- }
- },
- handle: {
- borderColor: '#009',
- size: 8,
- },
- close: {
- borderColor: '#090',
- borderWidth: 2,
- },
- line: {
- lineColor: '#c0c',
- lineStyle: 'dashed',
- lineWidth: 4,
- }
- },
- 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: {
- label: {
- backgroundColor: '#f90',
- fontSize: 20,
- hoverState: {
- backgroundColor: '#90f'
- }
- },
- handle: {
- borderColor: '#009',
- size: 8,
- },
- close: {
- borderColor: '#090',
- borderWidth: 2,
- },
- line: {
- lineColor: '#c0c',
- lineStyle: 'dashed',
- lineWidth: 4,
- }
- },
- 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',
- });