Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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


<div id="container"></div>

CSS

#container {
    height: 800px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

var n = 10000,
  s = 5,
  pointStart = Date.UTC(2017, 0, 1),
  pointInterval = 24 * 36e5;

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([
      pointStart + i * pointInterval,
      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),
      dataGrouping: {
        enabled: false,
        units: [
          [
            'month',
            [6]
          ],
        ]
      },
      showInNavigator: true
    });
  }

  return r;
}

var series = getSeries(n, s);


Highcharts.stockChart('container', {
  navigator: {
    height: 400,
    series: {
      boostThreshold: 1,
      type: 'line',
      dataGrouping: {
        enabled: false
      },
    }
  },
  series: series
});