Add a point with 20ms interval to chart - Javascript highcharts

Javascript examples for highcharts:Chart Point

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

Description

Add a point with 20ms interval to chart

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.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="button" class="autocompare">Add point</button> 
      <script type="text/javascript">
// Create chart//from   w ww.  j  a  va 2  s .  c om
var chart = Highcharts.chart('container', {
  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]
  }],
  plotOptions: {
    line: {
      animation: false
    }
  }
})
// Add points every 20ms
var i = 0;
setInterval(function() {
  chart.series[0].addPoint(50 * (i % 3), false, false, false);
  i += 1;
}, 20)
// Redraw in 60Hz frequency
setInterval(function() {
  chart.redraw(false)
}, 1000 / 60)
// Clear data
setInterval(function() {
   if(chart.series[0].data.length > 1000) {
     chart.series[0].setData([])
  }
  chart.redraw(false)
}, 1000)

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

Related Tutorials