javascript - Highchart performance slow on plotting live data -

i plotting live data in highchart's(4.2.4) line type chart each second data i.e. 60 points 1 min. , requirement collect each second data long duration. using below code add point in series. the number of series have 20. , each series have add point per second. turbothreshold set each series around 2000. , slicing should done after 1000 points data.

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

i see low performance browser keeps hanging , chart irresponsive after time. can better performance? have tried below stuff: 1) off animation series :

plotoptions: {                             series: {                                 animation:false,                                 states: {                                     hover: {                                         linewidthplus: 0                                     }                                 }                             }                         }, 

2) turn off animation , redrawing on addpoint chart

3) turn off markers series

4) included boost.js module in application

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

without actual code can speculate you're doing, assumption you're trying redraw chart every time add point, 20 redraws per second, pretty excessive , take more 1 second complete redraws means there new points added while old ones still being drawn. set redraw false on adding points , manually redraw every second or @ random.

example code:

$(function() {     var series = function(i) {     return {       name: 'random data '+i,       data: (function() {         // generate array of random data         var data = [],           time = (new date()).gettime(),           i;          (i = -19; <= 0; += 1) {           data.push({             x: time + * 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 updating of chart each second                           setinterval(function() {                 (var = 0; < 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 @ http://jsfiddle.net/62k8sryc/1/

note

because javascript heavily depends on browser build/version , machine specs.