speed updates

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" 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');
    }
  }
});