Highcharts Demo

author(s): Torstein Hønsi

by mariusseiceanu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

JavaScript

function getData(n) {
  var arr = [],
    i,
    a,
    b,
    c,
    spike;
  for (i = 0; i < n; i = i + 1) {
    if (i % 100 === 0) {
      a = 2 * Math.random();
    }
    if (i % 1000 === 0) {
      b = 2 * Math.random();
    }
    if (i % 10000 === 0) {
      c = 2 * Math.random();
    }
    if (i % 50000 === 0) {
      spike = 0;
    } else {
      spike = 0;
    }
    arr.push([
      i,
      2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
    ]);
  }
  return arr;
}

function getSeries(n, s) {
  var i = 0,
    r = [];

  for (; i < s; i++) {
    r.push({
      data: getData(n),
      lineWidth: 2,
      boostThreshold: 1,
      turboThreshold: 1
    });
  }

  return r;
}

var n = 10000,
  s = 300,
  series = getSeries(n, s);


console.time('line');
Highcharts.chart('container', {

  chart: {
    zoomType: 'x'
  },

  title: {
    text: 'Highcharts drawing ' + (n * s) + ' points across ' + s + ' series'
  },

  legend: {
    enabled: false
  },

  boost: {
    enabled: true,
    useGPUTranslations: true
  },

  xAxis: {
    min: 0,
    max: 120,
    ordinal: false,
    crosshair: true
  },

  navigator: {
    xAxis: {
      ordinal: false,
      min: 0,
      max: 10
    }
  },

  // yAxis: {
  //     min: 0,
  //     max: 8
  // },

  subtitle: {
    text: 'Using the Boost module'
  },

  tooltip: {
  	animation: false,
    valueDecimals: 2,
    shared: false,
    split: false
  },

  series: series

});
console.timeEnd('line');