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.
For 500-point graphs, use
Plotly.relayout instead of
scatter will perform better than
Apart from that, there’s no other way to speed up things for the public API at the moment.
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.
Plotly.relayout actually work when changing the data?
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?
Plotly.addTraces takes around the same time And concerning
scattergl: Well, even for my simple, single 500 points line,
scattergl redrawing is about factor 3 faster.
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.
To change the data on the plot, look at