• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="zc"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var NODES = 2000;
        var _TS_ = (new Date()).getTime();
    
        var dataArea = [];
        var dataScatter1 = [];
        var dataScatter2 = [];
        var dataBubble1 = [];
        var dataBubble2 = [];
        var dataVolume = [];
    
        // set values between 10 & 90
        var vArea = Math.round(10 + 80 * Math.random());
    
        // set values between 2000 & 20000
        var vVolume = Math.round(2000 + 18000 * Math.random());
    
        var ts = _TS_;
    
        var zoomTo = [0, 0];
    
        for (var i = 0; i < NODES; i++) {
          dataArea.push([ts, vArea]);
          dataVolume.push([ts, vVolume]);
          dataScatter1.push([ts, vArea + Math.round(-4 * Math.random())]);
          dataScatter2.push([ts, vArea + Math.round(4 * Math.random())]);
          dataBubble1.push([ts, vArea + Math.round(-4 * Math.random()), Math.round(2 + 28 * Math.random())]);
          dataBubble2.push([ts, vArea + Math.round(4 * Math.random()), Math.round(2 + 28 * Math.random())]);
          vArea += Math.round(-5 + 10 * Math.random());
          if (vArea < 10 || vArea > 90) {
            vArea = Math.round(10 + 80 * Math.random());
          }
          vVolume = Math.round(2000 + 18000 * Math.random());
    
          if (i === Math.round(NODES * 0.95)) {
            zoomTo[0] = ts;
          }
          if (i === NODES - 1) {
            zoomTo[1] = ts;
          }
    
          ts += Math.round(1000 + 9000 * Math.random());
        }
    
        var jsonData = {
          'flat': true,
          'background-color': '#000',
          'graphset': [{
              'background-color': '#000',
              'type': 'mixed',
              'scale-x': {
                'step': '10second',
                'zooming': true,
                'transform': {
                  'type': 'date',
                  'uniform': false
                },
                'item': {
                  'font-family': 'Lucida Sans Unicode',
                  'font-size': 11
                },
                'guide': {
                  'visible': true,
                  'line-width': 1,
                  'alpha': 0.1,
                  'line-style': 'solid'
                },
                '-zoom-to-values': zoomTo
              },
              'plotarea': {
                'margin': '5 5 90 5'
              },
              'scale-y': {
                '-zooming': true,
                'offset-start': '21%',
                'auto-fit': true,
                'item': {
                  'placement': 'inner',
                  'font-family': 'Lucida Sans Unicode',
                  'font-size': 11
                },
                'tick': {
                  'placement': 'inner'
                },
                'guide': {
                  'line-width': 1,
                  'alpha': 0.1,
                  'line-style': 'solid'
                }
              },
              'scale-y-2': {
                'offset-end': '81%',
                'item': {
                  'placement': 'inner',
                  'font-family': 'Lucida Sans Unicode',
                  'font-size': 11
                },
                'short': true,
                'short-unit': 'K',
                'tick': {
                  'placement': 'inner'
                },
                'guide': {
                  'line-width': 1,
                  'alpha': 0.2,
                  'line-style': 'solid'
                }
              },
              'crosshair-x': {
                'plot-label': {
                  'multiple': true,
                  'font-family': 'Lucida Sans Unicode',
                  'font-size': 11
                },
                'scale-label': {
                  'font-family': 'Lucida Sans Unicode',
                  'font-size': 11
                }
              },
              'crosshair-y': {
                'scale-label': {
                  'font-family': 'Lucida Sans Unicode',
                  'font-size': 11,
                  'offset-x': 40,
                  'callout-position': 'left'
                }
              },
              'plot': {
                'exact': true,
                'smart-sampling': true,
                'max-trackers': 0,
                'mode': 'fast'
              },
              'series': [{
                  'type': 'area',
                  'hint-ts': true,
                  'aspect': 'stepped',
                  'step-start': 'after',
                  'values': dataArea,
                  'line-width': 0,
                  'line-color': '#388',
                  'alpha-area': 0.5,
                  'background-color': '#388',
                  'marker': {
                    'type': 'none'
                  },
                  'guide-label': {
                    'color': '#388',
                    'text': 'Trade: %node-value'
                  },
                  'preview-state': {
                    'line-width': 1,
                    'background-color': '#009',
                    'alpha-area': 0.2,
                    'alpha': 1,
                    'line-color': '#00b0ff'
                  }
                },
                {
                  'type': 'bubble',
                  'values': dataBubble1,
                  'preview': false,
                  'min-size': 3,
                  'max-size': 10,
                  'marker': {
                    'background-color': '#c33',
                    'border-width': 0,
                    'alpha': 0.4
                  }
                },
                {
                  'type': 'bubble',
                  'values': dataBubble2,
                  'preview': false,
                  'min-size': 3,
                  'max-size': 10,
                  'marker': {
                    'background-color': '#2a6',
                    'border-width': 0,
                    'alpha': 0.4
                  }
                },
    
                {
                  'type': 'vbar',
                  'hint-ts': true,
                  'background-color': '#ddd',
                  'alpha': 0.9,
                  'bar-space-left': 1.1,
                  'bar-space-right': 1.1,
                  'values': dataVolume,
                  'preview': false,
                  'scales': 'scale-x,scale-y-2',
                  'guide-label': {
                    'color': '#000',
                    'text': 'Volume: %node-value'
                  }
                }
              ],
              'preview': {
                'height': 40,
                'margin': 'auto 5 5 5',
                'live': false,
                'border-width': 1,
                'handle': {}
              }
            }
    
          ]
        };
    
        //zingchart.DEV.DOMFRAGMENTS = 0;
        //zingchart.DEV.SKIPCONTEXTMENU = 1;
        zingchart.DEV.SKIPPROGRESS = 1;
        zingchart.DEV.SORTTOKENS = 0;
        zingchart.DEV.PLOTSTATS = 0;
        zingchart.DEV.RESOURCES = 0;
        zingchart.DEV.KEEPSOURCE = 0;
        zingchart.DEV.COPYDATA = 0;
        zingchart.SYNTAX = 'dashed';
    
        if (window.location.hash === '#profile') {
          console.profile('zc');
        }
        console.time('zc');
    
        zingchart.render({
          id: 'zc',
          width: '100%',
          height: 500,
          data: jsonData,
          events: {
            load: function(p) {
              if (window.location.hash === '#profile') {
                console.profileEnd('zc');
              }
              console.timeEnd('zc');
            }
          }
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="zc"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var NODES = 2000;
    var _TS_ = (new Date()).getTime();
    
    var dataArea = [];
    var dataScatter1 = [];
    var dataScatter2 = [];
    var dataBubble1 = [];
    var dataBubble2 = [];
    var dataVolume = [];
    
    // set values between 10 & 90
    var vArea = Math.round(10 + 80 * Math.random());
    
    // set values between 2000 & 20000
    var vVolume = Math.round(2000 + 18000 * Math.random());
    
    var ts = _TS_;
    
    var zoomTo = [0, 0];
    
    for (var i = 0; i < NODES; i++) {
      dataArea.push([ts, vArea]);
      dataVolume.push([ts, vVolume]);
      dataScatter1.push([ts, vArea + Math.round(-4 * Math.random())]);
      dataScatter2.push([ts, vArea + Math.round(4 * Math.random())]);
      dataBubble1.push([ts, vArea + Math.round(-4 * Math.random()), Math.round(2 + 28 * Math.random())]);
      dataBubble2.push([ts, vArea + Math.round(4 * Math.random()), Math.round(2 + 28 * Math.random())]);
      vArea += Math.round(-5 + 10 * Math.random());
      if (vArea < 10 || vArea > 90) {
        vArea = Math.round(10 + 80 * Math.random());
      }
      vVolume = Math.round(2000 + 18000 * Math.random());
    
      if (i === Math.round(NODES * 0.95)) {
        zoomTo[0] = ts;
      }
      if (i === NODES - 1) {
        zoomTo[1] = ts;
      }
    
      ts += Math.round(1000 + 9000 * Math.random());
    }
    
    var jsonData = {
      'flat': true,
      'background-color': '#000',
      'graphset': [{
          'background-color': '#000',
          'type': 'mixed',
          'scale-x': {
            'step': '10second',
            'zooming': true,
            'transform': {
              'type': 'date',
              'uniform': false
            },
            'item': {
              'font-family': 'Lucida Sans Unicode',
              'font-size': 11
            },
            'guide': {
              'visible': true,
              'line-width': 1,
              'alpha': 0.1,
              'line-style': 'solid'
            },
            '-zoom-to-values': zoomTo
          },
          'plotarea': {
            'margin': '5 5 90 5'
          },
          'scale-y': {
            '-zooming': true,
            'offset-start': '21%',
            'auto-fit': true,
            'item': {
              'placement': 'inner',
              'font-family': 'Lucida Sans Unicode',
              'font-size': 11
            },
            'tick': {
              'placement': 'inner'
            },
            'guide': {
              'line-width': 1,
              'alpha': 0.1,
              'line-style': 'solid'
            }
          },
          'scale-y-2': {
            'offset-end': '81%',
            'item': {
              'placement': 'inner',
              'font-family': 'Lucida Sans Unicode',
              'font-size': 11
            },
            'short': true,
            'short-unit': 'K',
            'tick': {
              'placement': 'inner'
            },
            'guide': {
              'line-width': 1,
              'alpha': 0.2,
              'line-style': 'solid'
            }
          },
          'crosshair-x': {
            'plot-label': {
              'multiple': true,
              'font-family': 'Lucida Sans Unicode',
              'font-size': 11
            },
            'scale-label': {
              'font-family': 'Lucida Sans Unicode',
              'font-size': 11
            }
          },
          'crosshair-y': {
            'scale-label': {
              'font-family': 'Lucida Sans Unicode',
              'font-size': 11,
              'offset-x': 40,
              'callout-position': 'left'
            }
          },
          'plot': {
            'exact': true,
            'smart-sampling': true,
            'max-trackers': 0,
            'mode': 'fast'
          },
          'series': [{
              'type': 'area',
              'hint-ts': true,
              'aspect': 'stepped',
              'step-start': 'after',
              'values': dataArea,
              'line-width': 0,
              'line-color': '#388',
              'alpha-area': 0.5,
              'background-color': '#388',
              'marker': {
                'type': 'none'
              },
              'guide-label': {
                'color': '#388',
                'text': 'Trade: %node-value'
              },
              'preview-state': {
                'line-width': 1,
                'background-color': '#009',
                'alpha-area': 0.2,
                'alpha': 1,
                'line-color': '#00b0ff'
              }
            },
            {
              'type': 'bubble',
              'values': dataBubble1,
              'preview': false,
              'min-size': 3,
              'max-size': 10,
              'marker': {
                'background-color': '#c33',
                'border-width': 0,
                'alpha': 0.4
              }
            },
            {
              'type': 'bubble',
              'values': dataBubble2,
              'preview': false,
              'min-size': 3,
              'max-size': 10,
              'marker': {
                'background-color': '#2a6',
                'border-width': 0,
                'alpha': 0.4
              }
            },
    
            {
              'type': 'vbar',
              'hint-ts': true,
              'background-color': '#ddd',
              'alpha': 0.9,
              'bar-space-left': 1.1,
              'bar-space-right': 1.1,
              'values': dataVolume,
              'preview': false,
              'scales': 'scale-x,scale-y-2',
              'guide-label': {
                'color': '#000',
                'text': 'Volume: %node-value'
              }
            }
          ],
          'preview': {
            'height': 40,
            'margin': 'auto 5 5 5',
            'live': false,
            'border-width': 1,
            'handle': {}
          }
        }
    
      ]
    };
    
    //zingchart.DEV.DOMFRAGMENTS = 0;
    //zingchart.DEV.SKIPCONTEXTMENU = 1;
    zingchart.DEV.SKIPPROGRESS = 1;
    zingchart.DEV.SORTTOKENS = 0;
    zingchart.DEV.PLOTSTATS = 0;
    zingchart.DEV.RESOURCES = 0;
    zingchart.DEV.KEEPSOURCE = 0;
    zingchart.DEV.COPYDATA = 0;
    zingchart.SYNTAX = 'dashed';
    
    if (window.location.hash === '#profile') {
      console.profile('zc');
    }
    console.time('zc');
    
    zingchart.render({
      id: 'zc',
      width: '100%',
      height: 500,
      data: jsonData,
      events: {
        load: function(p) {
          if (window.location.hash === '#profile') {
            console.profileEnd('zc');
          }
          console.timeEnd('zc');
        }
      }
    });