highcharts plotLine animation

by beaver71

HTML

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

<div id="container" style="height: 400px"></div>
<button id="play" class="autocompare">Play</button>
<button id="click" class="autocompare">Click</button>

JavaScript

var chart = Highcharts.chart('container', {

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    plotLines: [{
      value: 0,
      color: 'blue',
      width: 2,
      zIndex: 10
    }]
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});


var drawNextPlotline = function(chart) {
  //console.log(i);
  //console.log(chart.xAxis[0].options);
  var newValue = (chart.xAxis[0].options.plotLines[0].value + 1) % 10;
  //var newValue = i;
  chart.xAxis[0].options.plotLines[0].value = newValue;
  chart.xAxis[0].update();
}

function sleep(miliseconds) {
  var currentTime = new Date().getTime();

  while (currentTime + miliseconds >= new Date().getTime()) {}
}

// the button action
var $playButton = $('#play');
var $clickButton = $('#click');

//
$playButton.click(function() {

  var i = 0, nr = 5;
  var intervalId = setInterval(function() { 	
    if (i < nr) {
      drawNextPlotline(chart);
    } else {
      clearInterval(intervalId);
    }
    i++;
  }, 1000)

});

$clickButton.click(function() {

    drawNextPlotline(chart);

});