Add data to chart with timer - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

Add data to chart with timer

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {//from  w w w .  jav a  2 s  .c o m
    type: 'line',
    events: {
      load: function() {
        var chart = this,
          series = chart.series[0],
          dayInterval = 1000 * 60 * 60 * 24,
          lengthOfSeries,
          x,
          y;
        setInterval(function() {
          lengthOfSeries = series.points.length;
          x = series.points[lengthOfSeries - 1].x + dayInterval;
          y = Math.random() * 10;
          chart.series[0].addPoint([x, y], true);
        }, 1000);
      }
    }
  },
  xAxis: {
    type: 'datetime',
    labels: {
      step: 4
    }
  },
  plotOptions: {
    series: {
      pointStart: Date.UTC(2017, 0, 1),
      pointInterval: 1000 * 60 * 60 * 24,
    }
  },
  series: [{
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }]
});

      </script>  
   </body>
</html>

Related Tutorials