• 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="zc"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var NODES = 2000;
    35.     var _TS_ = (new Date()).getTime();
    36.  
    37.     var dataArea = [];
    38.     var dataScatter1 = [];
    39.     var dataScatter2 = [];
    40.     var dataBubble1 = [];
    41.     var dataBubble2 = [];
    42.     var dataVolume = [];
    43.  
    44.     // set values between 10 & 90
    45.     var vArea = Math.round(10 + 80 * Math.random());
    46.  
    47.     // set values between 2000 & 20000
    48.     var vVolume = Math.round(2000 + 18000 * Math.random());
    49.  
    50.     var ts = _TS_;
    51.  
    52.     var zoomTo = [0, 0];
    53.  
    54.     for (var i = 0; i < NODES; i++) {
    55.       dataArea.push([ts, vArea]);
    56.       dataVolume.push([ts, vVolume]);
    57.       dataScatter1.push([ts, vArea + Math.round(-4 * Math.random())]);
    58.       dataScatter2.push([ts, vArea + Math.round(4 * Math.random())]);
    59.       dataBubble1.push([ts, vArea + Math.round(-4 * Math.random()), Math.round(2 + 28 * Math.random())]);
    60.       dataBubble2.push([ts, vArea + Math.round(4 * Math.random()), Math.round(2 + 28 * Math.random())]);
    61.       vArea += Math.round(-5 + 10 * Math.random());
    62.       if (vArea < 10 || vArea > 90) {
    63.         vArea = Math.round(10 + 80 * Math.random());
    64.       }
    65.       vVolume = Math.round(2000 + 18000 * Math.random());
    66.  
    67.       if (i === Math.round(NODES * 0.95)) {
    68.         zoomTo[0] = ts;
    69.       }
    70.       if (i === NODES - 1) {
    71.         zoomTo[1] = ts;
    72.       }
    73.  
    74.       ts += Math.round(1000 + 9000 * Math.random());
    75.     }
    76.  
    77.     var jsonData = {
    78.       'flat': true,
    79.       'background-color': '#000',
    80.       'graphset': [{
    81.           'background-color': '#000',
    82.           'type': 'mixed',
    83.           'scale-x': {
    84.             'step': '10second',
    85.             'zooming': true,
    86.             'transform': {
    87.               'type': 'date',
    88.               'uniform': false
    89.             },
    90.             'item': {
    91.               'font-family': 'Lucida Sans Unicode',
    92.               'font-size': 11
    93.             },
    94.             'guide': {
    95.               'visible': true,
    96.               'line-width': 1,
    97.               'alpha': 0.1,
    98.               'line-style': 'solid'
    99.             },
    100.             '-zoom-to-values': zoomTo
    101.           },
    102.           'plotarea': {
    103.             'margin': '5 5 90 5'
    104.           },
    105.           'scale-y': {
    106.             '-zooming': true,
    107.             'offset-start': '21%',
    108.             'auto-fit': true,
    109.             'item': {
    110.               'placement': 'inner',
    111.               'font-family': 'Lucida Sans Unicode',
    112.               'font-size': 11
    113.             },
    114.             'tick': {
    115.               'placement': 'inner'
    116.             },
    117.             'guide': {
    118.               'line-width': 1,
    119.               'alpha': 0.1,
    120.               'line-style': 'solid'
    121.             }
    122.           },
    123.           'scale-y-2': {
    124.             'offset-end': '81%',
    125.             'item': {
    126.               'placement': 'inner',
    127.               'font-family': 'Lucida Sans Unicode',
    128.               'font-size': 11
    129.             },
    130.             'short': true,
    131.             'short-unit': 'K',
    132.             'tick': {
    133.               'placement': 'inner'
    134.             },
    135.             'guide': {
    136.               'line-width': 1,
    137.               'alpha': 0.2,
    138.               'line-style': 'solid'
    139.             }
    140.           },
    141.           'crosshair-x': {
    142.             'plot-label': {
    143.               'multiple': true,
    144.               'font-family': 'Lucida Sans Unicode',
    145.               'font-size': 11
    146.             },
    147.             'scale-label': {
    148.               'font-family': 'Lucida Sans Unicode',
    149.               'font-size': 11
    150.             }
    151.           },
    152.           'crosshair-y': {
    153.             'scale-label': {
    154.               'font-family': 'Lucida Sans Unicode',
    155.               'font-size': 11,
    156.               'offset-x': 40,
    157.               'callout-position': 'left'
    158.             }
    159.           },
    160.           'plot': {
    161.             'exact': true,
    162.             'smart-sampling': true,
    163.             'max-trackers': 0,
    164.             'mode': 'fast'
    165.           },
    166.           'series': [{
    167.               'type': 'area',
    168.               'hint-ts': true,
    169.               'aspect': 'stepped',
    170.               'step-start': 'after',
    171.               'values': dataArea,
    172.               'line-width': 0,
    173.               'line-color': '#388',
    174.               'alpha-area': 0.5,
    175.               'background-color': '#388',
    176.               'marker': {
    177.                 'type': 'none'
    178.               },
    179.               'guide-label': {
    180.                 'color': '#388',
    181.                 'text': 'Trade: %node-value'
    182.               },
    183.               'preview-state': {
    184.                 'line-width': 1,
    185.                 'background-color': '#009',
    186.                 'alpha-area': 0.2,
    187.                 'alpha': 1,
    188.                 'line-color': '#00b0ff'
    189.               }
    190.             },
    191.             {
    192.               'type': 'bubble',
    193.               'values': dataBubble1,
    194.               'preview': false,
    195.               'min-size': 3,
    196.               'max-size': 10,
    197.               'marker': {
    198.                 'background-color': '#c33',
    199.                 'border-width': 0,
    200.                 'alpha': 0.4
    201.               }
    202.             },
    203.             {
    204.               'type': 'bubble',
    205.               'values': dataBubble2,
    206.               'preview': false,
    207.               'min-size': 3,
    208.               'max-size': 10,
    209.               'marker': {
    210.                 'background-color': '#2a6',
    211.                 'border-width': 0,
    212.                 'alpha': 0.4
    213.               }
    214.             },
    215.  
    216.             {
    217.               'type': 'vbar',
    218.               'hint-ts': true,
    219.               'background-color': '#ddd',
    220.               'alpha': 0.9,
    221.               'bar-space-left': 1.1,
    222.               'bar-space-right': 1.1,
    223.               'values': dataVolume,
    224.               'preview': false,
    225.               'scales': 'scale-x,scale-y-2',
    226.               'guide-label': {
    227.                 'color': '#000',
    228.                 'text': 'Volume: %node-value'
    229.               }
    230.             }
    231.           ],
    232.           'preview': {
    233.             'height': 40,
    234.             'margin': 'auto 5 5 5',
    235.             'live': false,
    236.             'border-width': 1,
    237.             'handle': {}
    238.           }
    239.         }
    240.  
    241.       ]
    242.     };
    243.  
    244.     //zingchart.DEV.DOMFRAGMENTS = 0;
    245.     //zingchart.DEV.SKIPCONTEXTMENU = 1;
    246.     zingchart.DEV.SKIPPROGRESS = 1;
    247.     zingchart.DEV.SORTTOKENS = 0;
    248.     zingchart.DEV.PLOTSTATS = 0;
    249.     zingchart.DEV.RESOURCES = 0;
    250.     zingchart.DEV.KEEPSOURCE = 0;
    251.     zingchart.DEV.COPYDATA = 0;
    252.     zingchart.SYNTAX = 'dashed';
    253.  
    254.     if (window.location.hash === '#profile') {
    255.       console.profile('zc');
    256.     }
    257.     console.time('zc');
    258.  
    259.     zingchart.render({
    260.       id: 'zc',
    261.       width: '100%',
    262.       height: 500,
    263.       data: jsonData,
    264.       events: {
    265.         load: function(p) {
    266.           if (window.location.hash === '#profile') {
    267.             console.profileEnd('zc');
    268.           }
    269.           console.timeEnd('zc');
    270.         }
    271.       }
    272.     });
    273.   </script>
    274. </body>
    275.  
    276. </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="zc"><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 NODES = 2000;
    2. var _TS_ = (new Date()).getTime();
    3.  
    4. var dataArea = [];
    5. var dataScatter1 = [];
    6. var dataScatter2 = [];
    7. var dataBubble1 = [];
    8. var dataBubble2 = [];
    9. var dataVolume = [];
    10.  
    11. // set values between 10 & 90
    12. var vArea = Math.round(10 + 80 * Math.random());
    13.  
    14. // set values between 2000 & 20000
    15. var vVolume = Math.round(2000 + 18000 * Math.random());
    16.  
    17. var ts = _TS_;
    18.  
    19. var zoomTo = [0, 0];
    20.  
    21. for (var i = 0; i < NODES; i++) {
    22.   dataArea.push([ts, vArea]);
    23.   dataVolume.push([ts, vVolume]);
    24.   dataScatter1.push([ts, vArea + Math.round(-4 * Math.random())]);
    25.   dataScatter2.push([ts, vArea + Math.round(4 * Math.random())]);
    26.   dataBubble1.push([ts, vArea + Math.round(-4 * Math.random()), Math.round(2 + 28 * Math.random())]);
    27.   dataBubble2.push([ts, vArea + Math.round(4 * Math.random()), Math.round(2 + 28 * Math.random())]);
    28.   vArea += Math.round(-5 + 10 * Math.random());
    29.   if (vArea < 10 || vArea > 90) {
    30.     vArea = Math.round(10 + 80 * Math.random());
    31.   }
    32.   vVolume = Math.round(2000 + 18000 * Math.random());
    33.  
    34.   if (i === Math.round(NODES * 0.95)) {
    35.     zoomTo[0] = ts;
    36.   }
    37.   if (i === NODES - 1) {
    38.     zoomTo[1] = ts;
    39.   }
    40.  
    41.   ts += Math.round(1000 + 9000 * Math.random());
    42. }
    43.  
    44. var jsonData = {
    45.   'flat': true,
    46.   'background-color': '#000',
    47.   'graphset': [{
    48.       'background-color': '#000',
    49.       'type': 'mixed',
    50.       'scale-x': {
    51.         'step': '10second',
    52.         'zooming': true,
    53.         'transform': {
    54.           'type': 'date',
    55.           'uniform': false
    56.         },
    57.         'item': {
    58.           'font-family': 'Lucida Sans Unicode',
    59.           'font-size': 11
    60.         },
    61.         'guide': {
    62.           'visible': true,
    63.           'line-width': 1,
    64.           'alpha': 0.1,
    65.           'line-style': 'solid'
    66.         },
    67.         '-zoom-to-values': zoomTo
    68.       },
    69.       'plotarea': {
    70.         'margin': '5 5 90 5'
    71.       },
    72.       'scale-y': {
    73.         '-zooming': true,
    74.         'offset-start': '21%',
    75.         'auto-fit': true,
    76.         'item': {
    77.           'placement': 'inner',
    78.           'font-family': 'Lucida Sans Unicode',
    79.           'font-size': 11
    80.         },
    81.         'tick': {
    82.           'placement': 'inner'
    83.         },
    84.         'guide': {
    85.           'line-width': 1,
    86.           'alpha': 0.1,
    87.           'line-style': 'solid'
    88.         }
    89.       },
    90.       'scale-y-2': {
    91.         'offset-end': '81%',
    92.         'item': {
    93.           'placement': 'inner',
    94.           'font-family': 'Lucida Sans Unicode',
    95.           'font-size': 11
    96.         },
    97.         'short': true,
    98.         'short-unit': 'K',
    99.         'tick': {
    100.           'placement': 'inner'
    101.         },
    102.         'guide': {
    103.           'line-width': 1,
    104.           'alpha': 0.2,
    105.           'line-style': 'solid'
    106.         }
    107.       },
    108.       'crosshair-x': {
    109.         'plot-label': {
    110.           'multiple': true,
    111.           'font-family': 'Lucida Sans Unicode',
    112.           'font-size': 11
    113.         },
    114.         'scale-label': {
    115.           'font-family': 'Lucida Sans Unicode',
    116.           'font-size': 11
    117.         }
    118.       },
    119.       'crosshair-y': {
    120.         'scale-label': {
    121.           'font-family': 'Lucida Sans Unicode',
    122.           'font-size': 11,
    123.           'offset-x': 40,
    124.           'callout-position': 'left'
    125.         }
    126.       },
    127.       'plot': {
    128.         'exact': true,
    129.         'smart-sampling': true,
    130.         'max-trackers': 0,
    131.         'mode': 'fast'
    132.       },
    133.       'series': [{
    134.           'type': 'area',
    135.           'hint-ts': true,
    136.           'aspect': 'stepped',
    137.           'step-start': 'after',
    138.           'values': dataArea,
    139.           'line-width': 0,
    140.           'line-color': '#388',
    141.           'alpha-area': 0.5,
    142.           'background-color': '#388',
    143.           'marker': {
    144.             'type': 'none'
    145.           },
    146.           'guide-label': {
    147.             'color': '#388',
    148.             'text': 'Trade: %node-value'
    149.           },
    150.           'preview-state': {
    151.             'line-width': 1,
    152.             'background-color': '#009',
    153.             'alpha-area': 0.2,
    154.             'alpha': 1,
    155.             'line-color': '#00b0ff'
    156.           }
    157.         },
    158.         {
    159.           'type': 'bubble',
    160.           'values': dataBubble1,
    161.           'preview': false,
    162.           'min-size': 3,
    163.           'max-size': 10,
    164.           'marker': {
    165.             'background-color': '#c33',
    166.             'border-width': 0,
    167.             'alpha': 0.4
    168.           }
    169.         },
    170.         {
    171.           'type': 'bubble',
    172.           'values': dataBubble2,
    173.           'preview': false,
    174.           'min-size': 3,
    175.           'max-size': 10,
    176.           'marker': {
    177.             'background-color': '#2a6',
    178.             'border-width': 0,
    179.             'alpha': 0.4
    180.           }
    181.         },
    182.  
    183.         {
    184.           'type': 'vbar',
    185.           'hint-ts': true,
    186.           'background-color': '#ddd',
    187.           'alpha': 0.9,
    188.           'bar-space-left': 1.1,
    189.           'bar-space-right': 1.1,
    190.           'values': dataVolume,
    191.           'preview': false,
    192.           'scales': 'scale-x,scale-y-2',
    193.           'guide-label': {
    194.             'color': '#000',
    195.             'text': 'Volume: %node-value'
    196.           }
    197.         }
    198.       ],
    199.       'preview': {
    200.         'height': 40,
    201.         'margin': 'auto 5 5 5',
    202.         'live': false,
    203.         'border-width': 1,
    204.         'handle': {}
    205.       }
    206.     }
    207.  
    208.   ]
    209. };
    210.  
    211. //zingchart.DEV.DOMFRAGMENTS = 0;
    212. //zingchart.DEV.SKIPCONTEXTMENU = 1;
    213. zingchart.DEV.SKIPPROGRESS = 1;
    214. zingchart.DEV.SORTTOKENS = 0;
    215. zingchart.DEV.PLOTSTATS = 0;
    216. zingchart.DEV.RESOURCES = 0;
    217. zingchart.DEV.KEEPSOURCE = 0;
    218. zingchart.DEV.COPYDATA = 0;
    219. zingchart.SYNTAX = 'dashed';
    220.  
    221. if (window.location.hash === '#profile') {
    222.   console.profile('zc');
    223. }
    224. console.time('zc');
    225.  
    226. zingchart.render({
    227.   id: 'zc',
    228.   width: '100%',
    229.   height: 500,
    230.   data: jsonData,
    231.   events: {
    232.     load: function(p) {
    233.       if (window.location.hash === '#profile') {
    234.         console.profileEnd('zc');
    235.       }
    236.       console.timeEnd('zc');
    237.     }
    238.   }
    239. });