• 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></style>
</head>

<body>
  <div id="myChart"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      "type": "line",
      "title": {
        "text": "Value Boxes"
      },
      "plot": {
        "value-box": {
          "text": "%kv",
          "transform": {
            "type": "date",
            "all": "%G:%i:%s"
          }
        }
      },
      "scale-x": {
        "min-value": "1457101800000",
        "max-value": "1457125200000",
        "step": "30minute",
        "transform": {
          "type": "date",
          "all": "%g:%i"
        },
        "label": {
          "text": "Trading Day"
        },
        "item": {
          "font-size": 10
        },
        "max-items": 14
      },
      "utc": true,
      "timezone": -5, //EST time
      "scale-y": {
        "values": "30:34:1",
        "format": "$%v",
        "label": {
          "text": "Price"
        },
        "item": {
          "font-size": 10
        },
        "guide": {
          "line-style": "solid"
        }
      },
      "series": [{
        "values": [
          [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
          [1457103600000, 31.30], //10:00 a.m.
          [1457105400000, 30.95], //10:30 a.m.
          [1457107200000, 30.99], //11:00 a.m.
          [1457109000000, 32.33], //11:30 a.m.
          [1457110800000, 33.34], //12:00 p.m.
          [1457112600000, 33.01], //12:30 p.m.
          [1457114400000, 34], //1:00 p.m.
          [1457116200000, 33.64], //1:30 p.m.
          [1457118000000, 32.59], //2:00 p.m.
          [1457119800000, 32.60], //2:30 p.m.
          [1457121600000, 31.99], //3:00 p.m.
          [1457123400000, 31.14], //3:30 p.m.
          [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
        ]
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 400,
      width: "100%"
    });
  </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"></div>
</body>

</html>
    
      
    
      
    
        
    let chartConfig = {
  "type": "line",
  "title": {
    "text": "Value Boxes"
  },
  "plot": {
    "value-box": {
      "text": "%kv",
      "transform": {
        "type": "date",
        "all": "%G:%i:%s"
      }
    }
  },
  "scale-x": {
    "min-value": "1457101800000",
    "max-value": "1457125200000",
    "step": "30minute",
    "transform": {
      "type": "date",
      "all": "%g:%i"
    },
    "label": {
      "text": "Trading Day"
    },
    "item": {
      "font-size": 10
    },
    "max-items": 14
  },
  "utc": true,
  "timezone": -5, //EST time
  "scale-y": {
    "values": "30:34:1",
    "format": "$%v",
    "label": {
      "text": "Price"
    },
    "item": {
      "font-size": 10
    },
    "guide": {
      "line-style": "solid"
    }
  },
  "series": [{
    "values": [
      [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
      [1457103600000, 31.30], //10:00 a.m.
      [1457105400000, 30.95], //10:30 a.m.
      [1457107200000, 30.99], //11:00 a.m.
      [1457109000000, 32.33], //11:30 a.m.
      [1457110800000, 33.34], //12:00 p.m.
      [1457112600000, 33.01], //12:30 p.m.
      [1457114400000, 34], //1:00 p.m.
      [1457116200000, 33.64], //1:30 p.m.
      [1457118000000, 32.59], //2:00 p.m.
      [1457119800000, 32.60], //2:30 p.m.
      [1457121600000, 31.99], //3:00 p.m.
      [1457123400000, 31.14], //3:30 p.m.
      [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    ]
  }]
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: 400,
  width: "100%"
});