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/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px">
    <div id="lastprice" style="position:absolute;x:0">fuckQ
  </div>
</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: 66,
            color: 'red',
            width: 2,
            id: 'plot-line-1',
						label: {
                    text: 66,
                    align: 'right',
                    y: newY,
                    x: 0
                }
          });

          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];

            plotlabel = yAxis.plotLinesAndBands[0].label;
            plotlabel.animate({
                translateY: newY,
                text: Highcharts.numberFormat(y, 2)
              }, {
              	duration: 400,
                step: function() {
                  $(this.element).html(Highcharts.numberFormat(this.textStr,2));
                },
                complete: function() { }
              }),


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


          }, 1000);
        }
      }
    },

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