Ways to speed up rendering / plotting performance

plotly.js
1

Hi everyone,

I’m looking for all kinds of ways to speed up the rendering of plots in JavaScript, maybe we can collect some stuff here?

I’m plotting scientific data, around 500 points + errors per trace (between 1 and 4 traces normally). Doesn’t sound too much, does it? Now the data changes according to user input - a slider, and my goal is to update the plots as smoothly as possible while dragging the slider. And that’s where I realized that im not satisfied with the drawing speed.

Since the y data (+errors) can totally change, I use Plotly.redraw - this takes in my case on Chrome about 30-40ms. Seems ok, but considering that I want to present 5-15 plots at the same time, this often adds up to half a second or more. 1 or 2 fps ain’t exactly what one would call “smooth”. Plus, that’s on Chrome, it looks way worse on other Browsers.

So I wonder if redrawing is the only option, and if so, how to speed this up? Any ideas? I tried type: 'scattergl'and while this seems to be a big boost (down to 10-15ms), it only works like a charm for small plots with only one trace, I can’t manage to get it to work for all 10-15 plots - it throws multiple different errors, not worth mentioning since they are always different on different machines. So my conclusion is, that the scattergl interface isn’t as mature as svg, but maybe I’m using it wrong?

Sorry for the long text, but now I would be really glad to hear some ideas on how to speed things up.

Best regards

Clemens

2

For 500-point graphs, use

  • Plotly.relayout instead of Plotly.redraw
  • scatter will perform better than scattergl

Apart from that, there’s no other way to speed up things for the public API at the moment.

3

Thank you! I might be mistaken, but I thought Plotly.relayout only works for layout changes? I just tried this on my most simple plot, one trace, and it throws an relayout failed undefined undefined error.
Should Plotly.relayout actually work when changing the data?

4

Ah, just realized relayout needs a second argument. So I just put in there the unchanged layout and it works without an error - but, as expected, without updating the trace data. Am I assuming right that Plotly.relayout can not be used to change the actual data?

Edit: Plotly.deleteTraces + Plotly.addTraces takes around the same time :wink: And concerning scattergl: Well, even for my simple, single 500 points line, scattergl redrawing is about factor 3 faster.

5

Small update:

The amount of points is definitely not the problem, the base amount of time needed to call Plotly.redraw is way to high:

Chrome 5 points: 35ms
Chrome 500 points: 40ms
Firefox 5 points: 40ms
Firefox 500 points: 45ms
IE 5 points: 100ms
IE 500 points: 130ms
Edge 5 points: 100ms
Edge 500 points: 160ms

Check it out on jsFiddle - just change nPoints to the desired value.
So a lot of fixed time is consumed, regardless of the amount of data… not to mention that it’s not possible to build a responsive graph on Edge at all.

6

To change the data on the plot, look at Plotly.restyle

1 Like