We have an application which renders ~50 (high)charts simultaneously on a dashboard. The thing is the browser freezes when the charts are getting rendered. (I tried using boost and virtual scroll). What makes it worse is that our users generally have datalabels on.
A fiddle with experiments: http://jsfiddle.net/z9msdftt/1/
var to;
$('#charts').scroll((e) => {
clearTimeout(to);
to = setTimeout(() => {
var offset = Math.floor($('#charts').scrollTop() / 400);
var start = new Date();
[...Array(5)].forEach((_, i) => {
renderChart(offset + i);
});
var end = new Date();
$('#counter').html('Time rendering: ' + (end - start) + 'ms');
}, 50);
});
Is there a way I can speed this up maybe by:
- Doing an initial server rendering of the SVG and then handle further interactions on the client side (isomorphic render)
Or
- Using webworkers to do calculations parallely and then rendering the charts.
Any help, would be greatly appreciated.