• 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>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       type: 'range',
    36.       plot: {
    37.         minMarker: {
    38.           size: 8
    39.         },
    40.         maxMarker: {
    41.           visible: false
    42.         }
    43.       },
    44.       series: [{
    45.           values: [
    46.             [1457101800000, [35, 40]],
    47.             [1457103600000, [40, 42]],
    48.             [1457105400000, [67, 75]],
    49.             [1457107200000, [80, 89]],
    50.             [1457109000000, [25, 33]],
    51.             [1457110800000, [19, 34]],
    52.             [1457112600000, [49, 67]]
    53.           ]
    54.         },
    55.         {
    56.           values: [
    57.             [1457101800000, [25, 33]],
    58.             [1457103600000, [49, 59]],
    59.             [1457105400000, [30, 39]],
    60.             [1457107200000, [15, 16]],
    61.             [1457109000000, [51, 60]],
    62.             [1457110800000, [89, 95]],
    63.             [1457112600000, [31, 55]]
    64.           ]
    65.         }
    66.       ],
    67.  
    68.       utc: true,
    69.       timezone: -5,
    70.       scaleX: {
    71.         minValue: 1457101800000,
    72.         maxValue: 1457112600000,
    73.         step: '30minute',
    74.         transform: {
    75.           type: 'date',
    76.           all: '%g:%i'
    77.         },
    78.         item: {
    79.           fontSize: 10
    80.         }
    81.       },
    82.       scaleY: {
    83.         values: '0:100:25',
    84.         format: '$%v',
    85.         item: {
    86.           fontSize: 10
    87.         },
    88.         guide: {
    89.           lineStyle: 'solid'
    90.         }
    91.       }
    92.     };
    93.  
    94.     zingchart.render({
    95.       id: 'myChart',
    96.       data: myConfig,
    97.       height: 300,
    98.       width: '100%'
    99.     });
    100.   </script>
    101. </body>
    102.  
    103. </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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   type: 'range',
    3.   plot: {
    4.     minMarker: {
    5.       size: 8
    6.     },
    7.     maxMarker: {
    8.       visible: false
    9.     }
    10.   },
    11.   series: [{
    12.       values: [
    13.         [1457101800000, [35, 40]],
    14.         [1457103600000, [40, 42]],
    15.         [1457105400000, [67, 75]],
    16.         [1457107200000, [80, 89]],
    17.         [1457109000000, [25, 33]],
    18.         [1457110800000, [19, 34]],
    19.         [1457112600000, [49, 67]]
    20.       ]
    21.     },
    22.     {
    23.       values: [
    24.         [1457101800000, [25, 33]],
    25.         [1457103600000, [49, 59]],
    26.         [1457105400000, [30, 39]],
    27.         [1457107200000, [15, 16]],
    28.         [1457109000000, [51, 60]],
    29.         [1457110800000, [89, 95]],
    30.         [1457112600000, [31, 55]]
    31.       ]
    32.     }
    33.   ],
    34.  
    35.   utc: true,
    36.   timezone: -5,
    37.   scaleX: {
    38.     minValue: 1457101800000,
    39.     maxValue: 1457112600000,
    40.     step: '30minute',
    41.     transform: {
    42.       type: 'date',
    43.       all: '%g:%i'
    44.     },
    45.     item: {
    46.       fontSize: 10
    47.     }
    48.   },
    49.   scaleY: {
    50.     values: '0:100:25',
    51.     format: '$%v',
    52.     item: {
    53.       fontSize: 10
    54.     },
    55.     guide: {
    56.       lineStyle: 'solid'
    57.     }
    58.   }
    59. };
    60.  
    61. zingchart.render({
    62.   id: 'myChart',
    63.   data: myConfig,
    64.   height: 300,
    65.   width: '100%'
    66. });