• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id="myChart"></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     let chartConfig = {
    17.       "type": "line",
    18.       "title": {
    19.         "text": "X-Axis Scale"
    20.       },
    21.  
    22.       "scale-x": {
    23.         "min-value": "1457101800000",
    24.         "max-value": "1457125200000",
    25.         "step": "30minute",
    26.         "transform": {
    27.           "type": "date",
    28.           "all": "%g:%i"
    29.         },
    30.         "label": {
    31.           "text": "Trading Day"
    32.         },
    33.         "item": {
    34.           "font-size": 10
    35.         },
    36.         "max-items": 14
    37.       },
    38.       "utc": true,
    39.       "timezone": -5, //EST time
    40.       "scale-y": {
    41.         "values": "30:34:1",
    42.         "format": "$%v",
    43.         "label": {
    44.           "text": "Price"
    45.         },
    46.         "item": {
    47.           "font-size": 10
    48.         },
    49.         "guide": {
    50.           "line-style": "solid"
    51.         }
    52.       },
    53.       "series": [{
    54.         "values": [
    55.           [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
    56.           [1457103600000, 31.30], //10:00 a.m.
    57.           [1457105400000, 30.95], //10:30 a.m.
    58.           [1457107200000, 30.99], //11:00 a.m.
    59.           [1457109000000, 32.33], //11:30 a.m.
    60.           [1457110800000, 33.34], //12:00 p.m.
    61.           [1457112600000, 33.01], //12:30 p.m.
    62.           [1457114400000, 34], //1:00 p.m.
    63.           [1457116200000, 33.64], //1:30 p.m.
    64.           [1457118000000, 32.59], //2:00 p.m.
    65.           [1457119800000, 32.60], //2:30 p.m.
    66.           [1457121600000, 31.99], //3:00 p.m.
    67.           [1457123400000, 31.14], //3:30 p.m.
    68.           [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    69.         ]
    70.       }]
    71.     };
    72.     zingchart.render({
    73.       id: 'myChart',
    74.       data: chartConfig,
    75.       height: 400,
    76.       width: "100%"
    77.     });
    78.   </script>
    79. </body>
    80.  
    81. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. let chartConfig = {
    2.   "type": "line",
    3.   "title": {
    4.     "text": "X-Axis Scale"
    5.   },
    6.  
    7.   "scale-x": {
    8.     "min-value": "1457101800000",
    9.     "max-value": "1457125200000",
    10.     "step": "30minute",
    11.     "transform": {
    12.       "type": "date",
    13.       "all": "%g:%i"
    14.     },
    15.     "label": {
    16.       "text": "Trading Day"
    17.     },
    18.     "item": {
    19.       "font-size": 10
    20.     },
    21.     "max-items": 14
    22.   },
    23.   "utc": true,
    24.   "timezone": -5, //EST time
    25.   "scale-y": {
    26.     "values": "30:34:1",
    27.     "format": "$%v",
    28.     "label": {
    29.       "text": "Price"
    30.     },
    31.     "item": {
    32.       "font-size": 10
    33.     },
    34.     "guide": {
    35.       "line-style": "solid"
    36.     }
    37.   },
    38.   "series": [{
    39.     "values": [
    40.       [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
    41.       [1457103600000, 31.30], //10:00 a.m.
    42.       [1457105400000, 30.95], //10:30 a.m.
    43.       [1457107200000, 30.99], //11:00 a.m.
    44.       [1457109000000, 32.33], //11:30 a.m.
    45.       [1457110800000, 33.34], //12:00 p.m.
    46.       [1457112600000, 33.01], //12:30 p.m.
    47.       [1457114400000, 34], //1:00 p.m.
    48.       [1457116200000, 33.64], //1:30 p.m.
    49.       [1457118000000, 32.59], //2:00 p.m.
    50.       [1457119800000, 32.60], //2:30 p.m.
    51.       [1457121600000, 31.99], //3:00 p.m.
    52.       [1457123400000, 31.14], //3:30 p.m.
    53.       [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    54.     ]
    55.   }]
    56. };
    57. zingchart.render({
    58.   id: 'myChart',
    59.   data: chartConfig,
    60.   height: 400,
    61.   width: "100%"
    62. });