Black Lives Matter. Please consider donating to Black Girls Code today.

Plotting Live High Frequency Data Quickly

I’ve created a dashboard that takes in coordinate data from 3 websocket connections simultaneously, upon each websocket message I use Plotly to graph the coordinates.

Each websocket is sending data every 1/10 of a second and each message only contains about 10 coordinates. When I only had one websocket connection Plotly worked fine, but now it can’t keep up.

When plotting each set of coordinate I first use .deleteTraces() to remove the previous coordinates, and then use .addTraces() to add the new ones. Each of these methods is called once per message.

I know the frequency of the data being added is high but is there anyway to get Plotly to handle this?

Here’s an image of Chrome Timeline run on it

I’m not too good at reading Timelines but it looks like to me like runtime is split between Plotly drawing the graph after .deleteTraces() is run and again after .addTraces() is run. I originally used .newPlot() but thought I could save some overhead by not replotting the layout every step, was this wrong?

UPDATE:: I’ve switched to using .redraw(), this is faster then both .newPlot and addTraces/deleteTraces. Is there anymore efficient way of doing this? I’m assuming .redraw redraws the layout so it would be nice if there was some sort of .updateTraces method that combined add/delete traces.

I still have an issue where not every frame is rendering quick enough
You can see in the above timeline that a new frame doesn’t always appear after I call Plotly. Often times I have to pause the websocket connections to allow the plotting to catch up. Is there anyway to fix that?