• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    8.   <script nonce="undefined" src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
    9.   <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    10.  
    11.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12.   <style>
    13.     .container {
    14.       width: 400px;
    15.       height: 200px;
    16.       min-width: 400px;
    17.       border: 1px dashed #777;
    18.     }
    19.  
    20.     #myChart {
    21.       width: 100%;
    22.       height: 100%;
    23.     }
    24.   </style>
    25. </head>
    26.  
    27. <body>
    28.   <div class='container'>
    29.     <div id='myChart'></div>
    30.   </div>
    31.   <script>
    32.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    33.     let chartConfig = {
    34.       type: 'area',
    35.       scaleX: {
    36.         minValue: 1457101800000,
    37.         maxValue: 1457125200000,
    38.         step: '30minute',
    39.         transform: {
    40.           type: 'date',
    41.           all: '%g:%i'
    42.         },
    43.         label: {
    44.           text: 'Trading Day',
    45.           fontSize: 16
    46.         },
    47.         item: {
    48.           fontSize: 12
    49.         },
    50.         itemsOverlap: true,
    51.         maxItems: 14,
    52.         mediaRules: [{
    53.             maxWidth: 500,
    54.             maxItems: 3,
    55.             label: {
    56.               fontSize: 12
    57.             },
    58.             item: {
    59.               fontSize: 9
    60.             }
    61.           },
    62.           {
    63.             maxWidth: 300,
    64.             label: {
    65.               visible: false
    66.             }
    67.           }
    68.         ]
    69.       },
    70.       scaleY: {
    71.         values: '30:34:1',
    72.         format: '$%v',
    73.         label: {
    74.           text: 'Price',
    75.           fontSize: 16
    76.         },
    77.         item: {
    78.           fontSize: 12
    79.         },
    80.         guide: {
    81.           lineStyle: 'solid'
    82.         },
    83.         mediaRules: [{
    84.             maxWidth: 500,
    85.             values: '30:34:2',
    86.             label: {
    87.               fontSize: 12
    88.             },
    89.             item: {
    90.               fontSize: 9
    91.             }
    92.           },
    93.           {
    94.             maxWidth: 300,
    95.             label: {
    96.               visible: false
    97.             }
    98.           }
    99.         ]
    100.       },
    101.       utc: true,
    102.       timezone: -5, //EST time
    103.       plot: {
    104.         tooltip: {
    105.           text: '$%v/share<br>at<br>%kv',
    106.           decimals: 2,
    107.           transform: {
    108.             type: 'date',
    109.             all: '%g:%i %a'
    110.           },
    111.           borderRadius: '3px'
    112.         },
    113.         lineColor: '#1ABC9C',
    114.         backgroundColor: '#3498DB #1ABC9C',
    115.         marker: {
    116.           backgroundColor: '#3498DB',
    117.           borderColor: '#1ABC9C',
    118.           size: 3
    119.         },
    120.         alphaArea: 0.5
    121.       },
    122.       plotarea: {
    123.         adjustLayout: true
    124.       },
    125.       series: [{
    126.         values: [
    127.           [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
    128.           [1457103600000, 31.30], //10:00 a.m.
    129.           [1457105400000, 30.95], //10:30 a.m.
    130.           [1457107200000, 30.99], //11:00 a.m.
    131.           [1457109000000, 32.33], //11:30 a.m.
    132.           [1457110800000, 33.34], //12:00 p.m.
    133.           [1457112600000, 33.01], //12:30 p.m.
    134.           [1457114400000, 34], //1:00 p.m.
    135.           [1457116200000, 33.64], //1:30 p.m.
    136.           [1457118000000, 32.59], //2:00 p.m.
    137.           [1457119800000, 32.60], //2:30 p.m.
    138.           [1457121600000, 31.99], //3:00 p.m.
    139.           [1457123400000, 31.14], //3:30 p.m.
    140.           [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    141.         ]
    142.       }]
    143.     };
    144.  
    145.     // adjust the refresh rate of the chart
    146.     zingchart.DEV.RESIZESPEED = 50;
    147.     zingchart.DEV.DEBOUNCESPEED = 50;
    148.  
    149.     zingchart.render({
    150.       id: 'myChart',
    151.       data: chartConfig,
    152.       height: '100%',
    153.       width: '100%'
    154.     });
    155.  
    156.     // initiate jquery resizable container for demo purposes
    157.     $('.container').resizable();
    158.   </script>
    159. </body>
    160.  
    161. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    8.   <script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
    9.   <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    10.  
    11.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.   <div class='container'>
    16.     <div id='myChart'></div>
    17.   </div>
    18. </body>
    19.  
    20. </html>
    1. .container {
    2.   width: 400px;
    3.   height: 200px;
    4.   min-width: 400px;
    5.   border: 1px dashed #777;
    6. }
    7.  
    8. #myChart {
    9.   width: 100%;
    10.   height: 100%;
    11. }
    1. let chartConfig = {
    2.   type: 'area',
    3.   scaleX: {
    4.     minValue: 1457101800000,
    5.     maxValue: 1457125200000,
    6.     step: '30minute',
    7.     transform: {
    8.       type: 'date',
    9.       all: '%g:%i'
    10.     },
    11.     label: {
    12.       text: 'Trading Day',
    13.       fontSize: 16
    14.     },
    15.     item: {
    16.       fontSize: 12
    17.     },
    18.     itemsOverlap: true,
    19.     maxItems: 14,
    20.     mediaRules: [{
    21.         maxWidth: 500,
    22.         maxItems: 3,
    23.         label: {
    24.           fontSize: 12
    25.         },
    26.         item: {
    27.           fontSize: 9
    28.         }
    29.       },
    30.       {
    31.         maxWidth: 300,
    32.         label: {
    33.           visible: false
    34.         }
    35.       }
    36.     ]
    37.   },
    38.   scaleY: {
    39.     values: '30:34:1',
    40.     format: '$%v',
    41.     label: {
    42.       text: 'Price',
    43.       fontSize: 16
    44.     },
    45.     item: {
    46.       fontSize: 12
    47.     },
    48.     guide: {
    49.       lineStyle: 'solid'
    50.     },
    51.     mediaRules: [{
    52.         maxWidth: 500,
    53.         values: '30:34:2',
    54.         label: {
    55.           fontSize: 12
    56.         },
    57.         item: {
    58.           fontSize: 9
    59.         }
    60.       },
    61.       {
    62.         maxWidth: 300,
    63.         label: {
    64.           visible: false
    65.         }
    66.       }
    67.     ]
    68.   },
    69.   utc: true,
    70.   timezone: -5, //EST time
    71.   plot: {
    72.     tooltip: {
    73.       text: '$%v/share<br>at<br>%kv',
    74.       decimals: 2,
    75.       transform: {
    76.         type: 'date',
    77.         all: '%g:%i %a'
    78.       },
    79.       borderRadius: '3px'
    80.     },
    81.     lineColor: '#1ABC9C',
    82.     backgroundColor: '#3498DB #1ABC9C',
    83.     marker: {
    84.       backgroundColor: '#3498DB',
    85.       borderColor: '#1ABC9C',
    86.       size: 3
    87.     },
    88.     alphaArea: 0.5
    89.   },
    90.   plotarea: {
    91.     adjustLayout: true
    92.   },
    93.   series: [{
    94.     values: [
    95.       [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
    96.       [1457103600000, 31.30], //10:00 a.m.
    97.       [1457105400000, 30.95], //10:30 a.m.
    98.       [1457107200000, 30.99], //11:00 a.m.
    99.       [1457109000000, 32.33], //11:30 a.m.
    100.       [1457110800000, 33.34], //12:00 p.m.
    101.       [1457112600000, 33.01], //12:30 p.m.
    102.       [1457114400000, 34], //1:00 p.m.
    103.       [1457116200000, 33.64], //1:30 p.m.
    104.       [1457118000000, 32.59], //2:00 p.m.
    105.       [1457119800000, 32.60], //2:30 p.m.
    106.       [1457121600000, 31.99], //3:00 p.m.
    107.       [1457123400000, 31.14], //3:30 p.m.
    108.       [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    109.     ]
    110.   }]
    111. };
    112.  
    113. // adjust the refresh rate of the chart
    114. zingchart.DEV.RESIZESPEED = 50;
    115. zingchart.DEV.DEBOUNCESPEED = 50;
    116.  
    117. zingchart.render({
    118.   id: 'myChart',
    119.   data: chartConfig,
    120.   height: '100%',
    121.   width: '100%'
    122. });
    123.  
    124. // initiate jquery resizable container for demo purposes
    125. $('.container').resizable();