Highcharts Demo

author(s): Torstein Hønsi

by John Dow

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  var dataSet = [];

  // Generate dummy set:
  for (var i = 0; i < 275500; i++) {
  	dataSet.push([
      Date.UTC(2000, 0, 1) + i*1000,
      Math.random(),
      Math.random() * 10,
      Math.random() * 20,
      Math.random() * 30,
      Math.random() * 50,
      Math.random() * 100,
      Math.random() * 110,
      Math.random() * 120,
      Math.random() * 150,
      Math.random() * 180,
    ])
  }

  // Remove some points in the middle to show gap:
  dataSet.splice(50000, 5000);

  // Generate Highcharts series:
  console.time('generateSeries')
  var series = [],
    dataLength = dataSet.length,
    numberOfSeries = dataSet[0].length,
    j;

  for (i = 0; i < numberOfSeries; i++) {
    series[i] = {
      data: []
    };
  }

  for (i = 0; i < dataLength; i++) {
    for (j = 0; j < numberOfSeries; j++) {
      series[j].data[i] = [dataSet[i][0], dataSet[i][j + 1]];
    }
  }

  console.timeEnd('generateSeries');

	console.time('createChart');
  var chart = new Highcharts.chart('container', {
    chart: {
      zoomType: 'x'
    },
    xAxis: {
      type: "datetime",
      //ordinal: false // show gap
    },

    series: series
  });
	console.timeEnd('createChart');
});