Highcharts: updating highcharts with new series data is very slow
I want to set the data for time-series chart I am using react + flux the code is :
var chart = $('#'+this.props.elementSelector).highcharts();
this.props.chartData.map(function(dt, idx){
chart.series[idx].data.length = 0;
chart.series[idx].setData(dt.data, false);
});
chart.redraw()
data length is greater than 50K
when the first time chart is created it's pretty fast it takes hardly 4-5 seconds when i change the data and call setData method it take 13-14 seconds to update chart.
aatifbandey
All 24 comments
Hi @aatifbandey
Is there any reason to clear chart.series[idx].data.length = 0 data? setData() should take care of it. My guess is that you clear array with points, and there may be a problem with clearing old data. Could you remove that line?
Additionally, try to run chart.redraw(false);, so animation will be turned off.
If you could recreate issue on jsFiddle (random data should be enough), it would be great. I tried your solution and it works pretty fast: http://jsfiddle.net/qf2754p4/ - maybe you are not using Highstock or have dataGrouping disabled?
pawelfus
on 7 Sep 2016
@pawelfus i removed chart.series[idx].data.length = 0 and disabled the animation still a lot time and there are multiple series and multiple data points for each series (around 50K)
aatifbandey
on 7 Sep 2016
I see. Could you update my example to recreate issue? We will check this.
pawelfus
on 7 Sep 2016
@pawelfus and data can be such data : [[1454531400000, null], [1454531700000, 10]] with many null values too
aatifbandey
on 7 Sep 2016
@pawelfus
aatifbandey
on 7 Sep 2016
@pawelfus I am not using highstock this the method to draw chart
var newChart = $('#'+element).highcharts({
chart: {
type: 'column',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10
},
title: {
text: categorizationValue
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
series: {
animation: false
},
spline:{
minPointLength: 1
}
},
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);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series:series_array
});
aatifbandey
on 7 Sep 2016
If you are not using Highstock, then have you considered using Boost module? See article.
pawelfus
on 7 Sep 2016
thanks @pawelfus its fast but whats the best to way to use it
aatifbandey
on 7 Sep 2016
Simply download/include boost.js file.
You can also change when boost.js should kick in, default value is 5000. Snippet:
plotOptions: {
series: {
boostThreshold: 500 // number of points in one series, when reaching this number, boost.js module will be used
}
}
If you have many series, I suggest to decrease boostThreshold.
pawelfus
on 7 Sep 2016
and after including boost i think it creates base64 format image which doesnt appear on my chart tootltip with data is shown but no lines when the chart is created first time
@pawelfus
aatifbandey
on 7 Sep 2016
Unfortunately, without a live demo I won't be able to help you more :( It may be connected to your data (NaN's in a data?). Also, make sure you have 4.2.6 version of Highcharts. You can also try master branch.
pawelfus
on 7 Sep 2016
without boost it draw the line with boots it doesn't
aatifbandey
on 7 Sep 2016
@pawelfus
aatifbandey
on 7 Sep 2016
@pawelfus i found the issue if i have null data it doesnt draw if i have replace null value with zero or 1 it works fine (after including boost.js)
aatifbandey
on 7 Sep 2016
It's strange, it works fine for me : http://jsfiddle.net/qf2754p4/3/
pawelfus
on 7 Sep 2016
@pawelfus i update your example isnt the tooltip behaving weird ?
aatifbandey
on 7 Sep 2016
@pawelfus http://jsfiddle.net/qf2754p4/7/ upated
aatifbandey
on 7 Sep 2016
@pawelfus my mistake here its working file let me check my code again
aatifbandey
on 7 Sep 2016
I inspect using firebug there is a base64 image but no path @pawelfus
aatifbandey
on 7 Sep 2016
@aatifbandey - I see the problem with tooltip, it looks like x-value is wrong. Is that the same issue you see in your application? Or is it unrelated issue?
pawelfus
on 8 Sep 2016
@pawelfus yes this is one of the problem.
aatifbandey
on 8 Sep 2016
Okay, then let me close this ticket, and open new one, with clear description. Thank you for reporting this!
Reported as #5672
pawelfus
on 9 Sep 2016
Hello guys.
Can anybody explain me why this chart rendering so long time?
http://jsfiddle.net/ngnueab9/3/
And when I play before with random data they build very quickly.
http://jsfiddle.net/ngnueab9/
P.S. I use Angular4 for front-end on my project, and I use https://www.npmjs.com/package/angular2-highcharts to build charts.
ShevtsivAndriy
on 21 Nov 2017
Each funtion like setTitle, addSeries redraw your chart. Set the redraw flag as false.
Fixed demo:
sebastianbochan
on 5 Dec 2017
Related issues
vivekk123
路
3Comments
sebastianbochan
路
3Comments
alirezameftahi71
路
3Comments
bbonczek
路
3Comments
balupton
路
3Comments
Most helpful comment
Each funtion like setTitle, addSeries redraw your chart. Set the redraw flag as false.
Fixed demo: