Spline Chart updating Each Second

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.

An example of a Spline Chart updating each second is given below.

Configurations

Let us now see the additional configurations/steps taken.

chart.events

Add a load method to the chart.event property. This method adds a new point created randomly to the series at an interval of 1000 milliseconds.

chart: {
   events: {
      load: function () {
         // set up the updating of the chart each second
         var series = this.series[0];
         
         setInterval(function () {
            var x = (new Date()).getTime(), // current time
            y = Math.random();
            series.addPoint([x, y], true, true);
         }, 1000);
      }
   }
}

Example

highcharts_dynamic_spline.htm

Live Demo

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>  
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var chart = {
               type: 'spline',
               animation: Highcharts.svg, // don't animate in IE < IE 10.
               marginRight: 10,
               
               events: {
                  load: function () {
                     // set up the updating of the chart each second
                     var series = this.series[0];
                     
                     setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                        y = Math.random();
                        series.addPoint([x, y], true, true);
                     }, 1000);
                  }
               }
            };
            var title = {
               text: 'Live random data'   
            };   
            var xAxis = {
               type: 'datetime',
               tickPixelInterval: 150
            };
            var yAxis = {
               title: {
                  text: 'Value'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };
            var tooltip = {
               formatter: function () {
               return '<b>' + this.series.name + '</b><br/>' +
                  Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                  Highcharts.numberFormat(this.y, 2);
               }
            };
            var plotOptions = {
               area: {
                  pointStart: 1940,
                  marker: {
                     enabled: false,
                     symbol: 'circle',
                     radius: 2,
                     
                     states: {
                        hover: {
                           enabled: true
                        }
                     }
                  }
               }
            };
            var legend = {
               enabled: false
            };
            var exporting = {
               enabled: false
            };
            var series = [{
               name: 'Random data',
               data: (function () {
                  // generate an array of random data
                  var data = [],time = (new Date()).getTime(),i;
                  
                  for (i = -19; i <= 0; i += 1) {
                     data.push({
                        x: time + i * 1000,
                        y: Math.random()
                     });
                  }
                  return data;
               }())    
            }];     
      
            var json = {};   
            json.chart = chart; 
            json.title = title;     
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis; 
            json.legend = legend;  
            json.exporting = exporting;   
            json.series = series;
            json.plotOptions = plotOptions;
   
            Highcharts.setOptions({
               global: {
                  useUTC: false
               }
            });
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_dynamic_charts.htm