• 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.     var myConfig = {
    17.       "type": "bar",
    18.       "title": {
    19.         "text": "Exact Mode"
    20.       },
    21.       "crosshair-x": {
    22.         "exact": true, //false (default) or true
    23.         "plot-label": {
    24.           "text": "%vv bars at %kv",
    25.           "transform": {
    26.             "type": "date",
    27.             "all": "%g:%i %a"
    28.           }
    29.         }
    30.       },
    31.       "scale-x": {
    32.         "min-value": 1451606436000,
    33.         "max-value": 1451692836000,
    34.         "step": "hour",
    35.         "transform": {
    36.           "type": "date",
    37.           "all": "%g %a"
    38.         },
    39.         "max-items": 9,
    40.         "item": {
    41.           "font-size": 10
    42.         }
    43.       },
    44.       "utc": true,
    45.       "plot": {
    46.         "tooltip": {
    47.           "visible": false
    48.         },
    49.         "bar-width": "40%",
    50.         "background-color": "pink orange",
    51.         "border-width": 1,
    52.         "border-color": "gray"
    53.       },
    54.       "series": [{
    55.         "values": [
    56.           [1451631600000, 35],
    57.           [1451634600000, 42],
    58.           [1451636100000, 67],
    59.           [1451637780000, 89],
    60.           [1451648040000, 34],
    61.           [1451649600000, 25],
    62.           [1451655240000, 67],
    63.           [1451656800000, 85],
    64.           [1451681700000, 32],
    65.           [1451683200000, 99],
    66.           [1451685240000, 64],
    67.           [1451691120000, 16]
    68.         ]
    69.       }]
    70.     };
    71.  
    72.     zingchart.render({
    73.       id: 'myChart',
    74.       data: myConfig,
    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. var myConfig = {
    2.   "type": "bar",
    3.   "title": {
    4.     "text": "Exact Mode"
    5.   },
    6.   "crosshair-x": {
    7.     "exact": true, //false (default) or true
    8.     "plot-label": {
    9.       "text": "%vv bars at %kv",
    10.       "transform": {
    11.         "type": "date",
    12.         "all": "%g:%i %a"
    13.       }
    14.     }
    15.   },
    16.   "scale-x": {
    17.     "min-value": 1451606436000,
    18.     "max-value": 1451692836000,
    19.     "step": "hour",
    20.     "transform": {
    21.       "type": "date",
    22.       "all": "%g %a"
    23.     },
    24.     "max-items": 9,
    25.     "item": {
    26.       "font-size": 10
    27.     }
    28.   },
    29.   "utc": true,
    30.   "plot": {
    31.     "tooltip": {
    32.       "visible": false
    33.     },
    34.     "bar-width": "40%",
    35.     "background-color": "pink orange",
    36.     "border-width": 1,
    37.     "border-color": "gray"
    38.   },
    39.   "series": [{
    40.     "values": [
    41.       [1451631600000, 35],
    42.       [1451634600000, 42],
    43.       [1451636100000, 67],
    44.       [1451637780000, 89],
    45.       [1451648040000, 34],
    46.       [1451649600000, 25],
    47.       [1451655240000, 67],
    48.       [1451656800000, 85],
    49.       [1451681700000, 32],
    50.       [1451683200000, 99],
    51.       [1451685240000, 64],
    52.       [1451691120000, 16]
    53.     ]
    54.   }]
    55. };
    56.  
    57. zingchart.render({
    58.   id: 'myChart',
    59.   data: myConfig,
    60.   height: 400,
    61.   width: "100%"
    62. });