• Edit
  • Download
  • <!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>
    <!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');
    
    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',
    });