Vertical line on chart, with position tied to animation frame from another div? - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Vertical line on chart, with position tied to animation frame from another div?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script> 
      <script type="text/javascript">
$(function () {/*from w  w w.j a  va 2  s .  com*/
    var someData = [];
    var maxY = -9999, minY = 9999;
    for (var i = 0; i < 60; i++)
    {
        var x = i;
        var y = Math.random() * 10;
        if (y < minY) minY = y;
        if (y > maxY) maxY = y;
        someData.push([x,y]);
    }
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            minPadding: 0.05,
            maxPadding: 0.05
        },
        yAxis: {min: minY, max: maxY},
        series: [{
            data: someData
        },
        {
            data: [[0,minY],[0,maxY]]
        }]
    });
    moveLine = function(){
       if (chart.series[1].data[0].x == 59){
          x = 0;
        }else{
          x = chart.series[1].data[0].x + 1;
        }
        chart.series[1].setData([[x,minY],[x,maxY]]);
       setTimeout(moveLine,1000);
    }
    setTimeout(moveLine,1000);
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials