Highchart performance slow on plotting live data

Question

I am plotting live data in Highchart's(4.2.4) Line type chart for each second data i.e. 60 points for 1 min. and requirement is to collect each second data for long duration. I am using below code to add point in series. The number of series I have is 20. And for each series I have to add point per second. The turboThreshold set for each series is also around 2000. And slicing should be done after 1000 points data.

chart.series[0].addPoint(point, false, data > 1000?shift: false, false);

I see a very low performance my browser keeps hanging and also chart is very irresponsive after some time. What can I do for better performance? I have tried below stuff: 1) Off the animation for series :

plotOptions: {
                            series: {
                                animation:false,
                                states: {
                                    hover: {
                                        lineWidthPlus: 0
                                    }
                                }
                            }
                        },

2) Turn off animation and redrawing on addpoint to the chart

3) Turn off markers for series

4) Included boost.js module in application

 script src="https://code.highcharts.com/modules/boost.js"

Its still slow I tried to add 20 series in the live data example of highchart live data xample (jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/… ) and this also shows performance issue — piu

apokryfos apokryfos · Accepted Answer · 2016-07-06T12:00:16

Without your actual code I can only speculate what you're doing, but my assumption is you're trying to redraw the chart every time you add a point, that would be 20 redraws per second, which is pretty excessive and will probably take more than 1 second to complete the redraws which means there will be new points added while old ones are still being drawn. Set the redraw to false on adding points and manually redraw every second or at random.

Example code:

$(function() {


  var series = function(i) {
    return {
      name: 'Random data '+i,
      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;
      }())
    };
  };

  $(document).ready(function() {
    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });

    $('#container').highcharts({
      chart: {
        type: 'line',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
          load: function() {
                        var chart = this;
            // set up the updating of the chart each second            
              setInterval(function() {
                for (var i = 0; i < 20; i++) {              
                var series = chart.series[i];
                var x = (new Date()).getTime(), // current time
                  y = Math.random();
                  series.addPoint([x, y], false, false,false);
                }
                chart.redraw();
              }, 1000);            
          }
        }
      },
      title: {
        text: 'Live random data'
      },
      xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
      },
      yAxis: {
        title: {
          text: 'Value'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      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);
        }
      },
      exporting: {
        enabled: true
      },      
      plotOptions: {
        series: {
            marker: {
            enabled: true
          }
        }
      },
      series: [series(1), series(2),series(3), series(4),series(5), series(6),series(7), series(8),series(9), series(10),series(11), series(12),series(13), series(14),series(15), series(16),series(17), series(18),series(19), series(20)]
    });
  });
});

Fiddle at http://jsfiddle.net/62k8sryc/1/

NOTE

Because this is JavaScript it heavily depends on browser build/version and machine specs.

Highchart performance slow on plotting live data

1 Answers