• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig = {
    24.       "type": "mixed",
    25.       "title": {
    26.         "text": "Mixed Chart with Time-Series Scale"
    27.       },
    28.       "scale-x": {
    29.         "min-value": 1420218000000,
    30.         "step": "day",
    31.         "transform": {
    32.           "type": "date",
    33.           "all": "%m/%d/%y"
    34.         },
    35.         "items-overlap": true,
    36.         "max-items": 5
    37.       },
    38.       "scale-y": {
    39.         "values": "0:50:10",
    40.         "format": "$%v"
    41.       },
    42.       "scale-y-2": {
    43.         "values": "0:15000:3000",
    44.         "visible": false
    45.       },
    46.       "series": [{
    47.           "type": "stock",
    48.           "scales": "scale-x,scale-y",
    49.           "values": [
    50.             [1420218000000, [30, 39, 25, 34]], //01/02/15
    51.             [1420477200000, [34, 40, 29, 30]], //01/05/15
    52.             [1420563600000, [30, 45, 25, 36]], //01/06/15
    53.             [1420650000000, [36, 39, 25, 29]], //01/07/15
    54.             [1420736400000, [29, 33, 21, 25]], //01/08/15
    55.             [1420822800000, [25, 37, 25, 33]], //01/09/15
    56.  
    57.             [1421082000000, [33, 41, 31, 35]], //01/12/15
    58.             [1421168400000, [35, 39, 28, 31]], //01/13/15
    59.             [1421254800000, [31, 40, 28, 30]], //01/14/15
    60.             [1421341200000, [30, 36, 25, 28]], //01/15/15
    61.             [1421427600000, [28, 38, 28, 37]], //01/16/15
    62.  
    63.             [1421773200000, [37, 48, 37, 40]], //01/20/15
    64.             [1421859600000, [40, 45, 34, 35]], //01/21/15
    65.             [1421946000000, [35, 39, 31, 33]], //01/22/15
    66.             [1422032400000, [33, 34, 24, 26]], //01/23/15
    67.  
    68.             [1422291600000, [26, 34, 25, 31]], //01/26/15
    69.             [1422378000000, [31, 38, 28, 33]], //01/27/15
    70.             [1422464400000, [33, 37, 27, 29]], //01/28/15
    71.             [1422550800000, [29, 35, 25, 30]], //01/29/15
    72.             [1422637200000, [30, 39, 29, 34]] //01/30/15
    73.           ],
    74.           "tooltip": {
    75.             "text": "On %kv:<br><br>Open: $%v0<br>High: $%v1<br>Low: $%v2<br>Close: $%v3<br>",
    76.             "decimals": 2
    77.           }
    78.         },
    79.         {
    80.           "type": "bar",
    81.           "scales": "scale-x,scale-y-2",
    82.           "values": [
    83.             [1420218000000, 3000], //01/02/15
    84.             [1420477200000, 3400], //01/05/15
    85.             [1420563600000, 1500], //01/06/15
    86.             [1420650000000, 2900], //01/07/15
    87.             [1420736400000, 3100], //01/08/15
    88.             [1420822800000, 2000], //01/09/15
    89.  
    90.             [1421082000000, 2500], //01/12/15
    91.             [1421168400000, 3900], //01/13/15
    92.             [1421254800000, 3500], //01/14/15
    93.             [1421341200000, 2200], //01/15/15
    94.             [1421427600000, 2600], //01/16/15
    95.  
    96.             [1421773200000, 2700], //01/20/15
    97.             [1421859600000, 3100], //01/21/15
    98.             [1421946000000, 3400], //01/22/15
    99.             [1422032400000, 3000], //01/23/15
    100.  
    101.             [1422291600000, 3200], //01/26/15
    102.             [1422378000000, 2900], //01/27/15
    103.             [1422464400000, 2400], //01/28/15
    104.             [1422550800000, 2100], //01/29/15
    105.             [1422637200000, 3400] //01/30/15
    106.           ],
    107.           "tooltip": {
    108.             "text": "Volume: %v shares",
    109.             "thousands-separator": ","
    110.           }
    111.         }
    112.       ]
    113.     };
    114.  
    115.     zingchart.render({
    116.       id: 'myChart',
    117.       data: myConfig,
    118.       height: "100%",
    119.       width: "100%"
    120.     });
    121.   </script>
    122. </body>
    123.  
    124. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfig = {
    2.   "type": "mixed",
    3.   "title": {
    4.     "text": "Mixed Chart with Time-Series Scale"
    5.   },
    6.   "scale-x": {
    7.     "min-value": 1420218000000,
    8.     "step": "day",
    9.     "transform": {
    10.       "type": "date",
    11.       "all": "%m/%d/%y"
    12.     },
    13.     "items-overlap": true,
    14.     "max-items": 5
    15.   },
    16.   "scale-y": {
    17.     "values": "0:50:10",
    18.     "format": "$%v"
    19.   },
    20.   "scale-y-2": {
    21.     "values": "0:15000:3000",
    22.     "visible": false
    23.   },
    24.   "series": [{
    25.       "type": "stock",
    26.       "scales": "scale-x,scale-y",
    27.       "values": [
    28.         [1420218000000, [30, 39, 25, 34]], //01/02/15
    29.         [1420477200000, [34, 40, 29, 30]], //01/05/15
    30.         [1420563600000, [30, 45, 25, 36]], //01/06/15
    31.         [1420650000000, [36, 39, 25, 29]], //01/07/15
    32.         [1420736400000, [29, 33, 21, 25]], //01/08/15
    33.         [1420822800000, [25, 37, 25, 33]], //01/09/15
    34.  
    35.         [1421082000000, [33, 41, 31, 35]], //01/12/15
    36.         [1421168400000, [35, 39, 28, 31]], //01/13/15
    37.         [1421254800000, [31, 40, 28, 30]], //01/14/15
    38.         [1421341200000, [30, 36, 25, 28]], //01/15/15
    39.         [1421427600000, [28, 38, 28, 37]], //01/16/15
    40.  
    41.         [1421773200000, [37, 48, 37, 40]], //01/20/15
    42.         [1421859600000, [40, 45, 34, 35]], //01/21/15
    43.         [1421946000000, [35, 39, 31, 33]], //01/22/15
    44.         [1422032400000, [33, 34, 24, 26]], //01/23/15
    45.  
    46.         [1422291600000, [26, 34, 25, 31]], //01/26/15
    47.         [1422378000000, [31, 38, 28, 33]], //01/27/15
    48.         [1422464400000, [33, 37, 27, 29]], //01/28/15
    49.         [1422550800000, [29, 35, 25, 30]], //01/29/15
    50.         [1422637200000, [30, 39, 29, 34]] //01/30/15
    51.       ],
    52.       "tooltip": {
    53.         "text": "On %kv:<br><br>Open: $%v0<br>High: $%v1<br>Low: $%v2<br>Close: $%v3<br>",
    54.         "decimals": 2
    55.       }
    56.     },
    57.     {
    58.       "type": "bar",
    59.       "scales": "scale-x,scale-y-2",
    60.       "values": [
    61.         [1420218000000, 3000], //01/02/15
    62.         [1420477200000, 3400], //01/05/15
    63.         [1420563600000, 1500], //01/06/15
    64.         [1420650000000, 2900], //01/07/15
    65.         [1420736400000, 3100], //01/08/15
    66.         [1420822800000, 2000], //01/09/15
    67.  
    68.         [1421082000000, 2500], //01/12/15
    69.         [1421168400000, 3900], //01/13/15
    70.         [1421254800000, 3500], //01/14/15
    71.         [1421341200000, 2200], //01/15/15
    72.         [1421427600000, 2600], //01/16/15
    73.  
    74.         [1421773200000, 2700], //01/20/15
    75.         [1421859600000, 3100], //01/21/15
    76.         [1421946000000, 3400], //01/22/15
    77.         [1422032400000, 3000], //01/23/15
    78.  
    79.         [1422291600000, 3200], //01/26/15
    80.         [1422378000000, 2900], //01/27/15
    81.         [1422464400000, 2400], //01/28/15
    82.         [1422550800000, 2100], //01/29/15
    83.         [1422637200000, 3400] //01/30/15
    84.       ],
    85.       "tooltip": {
    86.         "text": "Volume: %v shares",
    87.         "thousands-separator": ","
    88.       }
    89.     }
    90.   ]
    91. };
    92.  
    93. zingchart.render({
    94.   id: 'myChart',
    95.   data: myConfig,
    96.   height: "100%",
    97.   width: "100%"
    98. });