Isomorphic Highcharts

[ashubham]

We have an application with ~50 (high)charts on a dashboard(with DataLabels: true). Even after general optimizations like using boost module and virtual scrolling, the browser hangs for a bit when the user scrolls or when the chart's first render.

See this: http://jsfiddle.net/fzLfdtph/

Is there a way I can speed this up maybe by:

1. Doing an initial rendering of the SVG on the server, ship it to the client and then have highcharts take over the interactivity on the client side. Something like React's isomorphic rendering.

The thing here is I need to figure out the event listeners which Highcharts puts on the rendered SVG, how do I put them on an already generated SVG. Is there a solution to this ?

Or

2. Using webworkers to do calculations parallely and then rendering the charts.

Any help would be greatly appreciated.

[TorsteinHonsi]

1. Pre-rendering on the server

It is a compelling idea to server-generate and SVG and serve it with event listeners built in, but unfortunately I don't think it's feasible. Simple things like the tooltip might work, but for complex interaction, it would depend too much on the underlying data and state of axes, series, chart etc. A better approach would probably be that you server-generate the charts, then once the user starts interacting (or once the chart comes into the viewport), instanciate a dynamic chart.

2. Using webworkers to do calculations parallely and then rendering the charts.

We've done some tests with webworkers on data-intense charts, and so far we have found that the delay in passing over large data to the worker and back costs more than the performance gain in the main thread. Using WebGL in the Boost module is quicker. But the Boost module is optimized for making one chart quicker - your problem is likely the amount of charts in the same page.

[sebastianbochan]

Only what comes to my mind is init all charts without data and then add series to all charts in callbacks, step by step.

[ashubham]

@TorsteinHonsi Thanks for the reply.

1. Well even we were thinking about the same, swapping out the chart on first interaction. That might work, but still there would be a sudden freeze of 200-300ms but I guess we could live with it. Just that the chart dynamically generated needs to be exactly the same, otherwise a flicker would occur. Which might be difficult to do, given the chart tiles are responsive in nature. (We were planning to cache the SVGs)

2. I think the bottleneck we see is in rendering of dataLabels, it takes a lot of cpu cycles figuring out dataLabel collisions, which makes each single chart sluggish, WebWorkers could help here. (Boost sadly does not)

@sebastianbochan

So we already do something like pipelining of chart renders. Its like a phased approach of rendering the chart and then rendering data labels.

[TorsteinHonsi]

I think the bottleneck we see is in rendering of dataLabels, it takes a lot of cpu cycles figuring out dataLabel collisions, which makes each single chart sluggish

Timing of data label rendering: http://jsfiddle.net/highcharts/fdjLvoqj/1

I didn't realize it was the data labels that slowed your charts down, thanks for that info. In a chart with 1000 data points, the rendering time goes from 60ms to 500ms when labels are enabled. The problem here is that we need to draw all the labels in order to get their bounding boxes and check for collisions. Probably we could optimize that bit, but it would require some refactoring.

In general, data labels are not very valuable in charts with hundreds of points. Are you sure you need to enable them in general? You could probably speed up the rendering considerably by only applying data labels to selected points, like positive and negative spikes: http://jsfiddle.net/highcharts/fdjLvoqj/2/

Another workaround would be that you first render your charts without data labels, then enable them asynchronously as the user interacts: http://jsfiddle.net/highcharts/fdjLvoqj/.

[ashubham]

@TorsteinHonsi Sorry for the late reply on this, we de-prioritized this for a bit based on your input.

Do you have any pointers on how could I make the tooltips work with a pre created SVG ? It seems tooltips is the major interaction our users do on our dashboards. Others mostly lead to a completely new chart anyways.

[pawelfus]

I think this is rather troublesome. We have static image/svg without references to real values (for example column is just a rect with x/y/width/height attributes). Probably you can somehow get these references (e.g. by index of the SVG element in a group) - then you can display an overlaying element (div) which will be your tooltip, simple example: http://jsfiddle.net/4xsv8ax8/6/

Of course, things will get complicated if you need features: line series, shared tooltip, zooming, panning etc.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!