Highcharts Demo

author(s): Torstein Hønsi

by Nayana Das

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(document).ready(function() {
  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  });

  Highcharts.chart('container', {
    chart: {
      type: 'spline',
      animation: Highcharts.svg, // don't animate in old IE
      marginRight: 10,
      events: {
        load: function() {
          var series1 = this.addSeries({
            name: "Random 1",
            data: [[(new Date()).getTime(), 5000]]
          });
          var series2 = this.addSeries({
            name: "Random 2",
            data: [[(new Date()).getTime(), 5000]]
          });
          
          var xAxis = this.xAxis[0];
          (function loop() {
            var rand = Math.round(Math.random() * 100) + 2500;
            setTimeout(function() {
              var x = (new Date()).getTime();
              var y1 = 5000 + Math.round(Math.random() * 100);
              var y2 = 5000 + Math.round(Math.random() * 100);
              //console.log(x + ', ' + y);
              series1.addPoint([x, y1], false);
              series2.addPoint([x, y2], false);
              xAxis.setExtremes(Math.max(series1.points[0].x, x - 10 * 1000 /*10s*/));
              loop();
            }, rand);
          }());
        }
      }
    },
    title: {
      text: 'Live random data'
    },
    xAxis: {
      type: 'datetime',
      //tickPixelInterval: 150
    },
    yAxis: {
      title: {
        text: 'Value'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    exporting: {
      enabled: false
    }
  });
});