Highcharts Demo

author(s): Torstein Hønsi

HTML

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

<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

$(function() {

  var time = (new Date()).getTime();

  // generate an array of random data, example:
  // [ [x, y], [x, y], [x, y], ... , [x, y]]
  function getData(n, min, max) {
    var data = [],
      i;

    for (i = -n; i <= 0; i += 1) {
      data.push([
        time + i * 1000,
        Math.round(Math.random() * (max - min)) + min
      ]);
    }
    return data;
  }
  
  // generate an array of random data, example:
  // [ [x, low, high], [x, low, high], [x, low, high], ... , [x, low, high]]
  function getRangeData(n, min, max) {
    var data = [],
      i;

    for (i = -n; i <= 0; i += 1) {
      data.push([
        time + i * 1000,
        Math.round(Math.random() * 10) + min,
        Math.round(Math.random() * 10) + max
      ]);
    }
    return data;
  }


  // Create the chart
  $('#container').highcharts('StockChart', {
    series: [{
      name: 'Random data',
      id: "main",
      data: getData(100, 10, 20),
      zIndex: 10
    }, {
      linkedTo: "main",
      name: 'Random data - (min-max)',
      type: "arearange",
      data: getRangeData(100, 0, 30)
    }, {
      name: 'Another random data',
      id: "main-2",
      data: getData(100, 110, 120),
      zIndex: 10
    }, {
      linkedTo: "main-2",
      name: 'Another random data - (min-max)',
      type: "arearange",
      data: getRangeData(100, 100, 130)
    }]
  });

});