Highcharts Demo

author(s): Torstein Hønsi

by Anuradha Pai

HTML

<script src="https://code.highcharts.com/stock/highstock.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() {

  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  });

  // Create the chart
  $('#container').highcharts('StockChart', {
    chart: {
      events: {
        load: function() {

          // set up the updating of the chart each second
          var series = this.series[0],
            hasPlotLine = false,
            $button = $('#button'),
            chart = $('#container').highcharts(),
            yAxis = chart.yAxis[0],
            plotLine,
            d,
            newY;

          yAxis.addPlotLine({
            value: 50,
            color: 'red',
            width: 2,
            id: 'plot-line-1',
            label: {
            align: 'right',
            	text: '<span style="color:red;">50</span>'
            }
          });

          setInterval(function() {

            var x = (new Date()).getTime(), // current time
              y = Math.round(Math.random() * 100);
            series.addPoint([x, y], true, true);

            plotLine = yAxis.plotLinesAndBands[0].svgElem;
            d = plotLine.d.split(' ');

            newY = yAxis.toPixels(y) - d[2];
            yAxis.plotLinesAndBands[0].label.textSetter('<span style="color:red;">'+y+'</span>')

            plotLine.animate({
              translateY: newY
            }, 300);


          }, 1000);
        }
      }
    },

    rangeSelector: {
      buttons: [{
        count: 1,
        type: 'minute',
        text: '1M'
      }, {
        count: 5,
        type: 'minute',
        text: '5M'
      }, {
        type: 'all',
        text: 'All'
      }],
      inputEnabled: false,
      selected: 0
    },

    title: {
      text: 'Live random data'
    },

    exporting: {
      enabled: false
    },

    series: [{
      name: 'Random data',
      data: (function() {
        // generate an array of random data
        var data = [],
          time = (new Date()).getTime(),
          i;

        for (i = -999; i <= 0; i += 1) {
          data.push([
  ...