Plot live updating at 20 frame per second

plotly.js
1

Hello,
I want to plot a graph, with live updating of realtime data (which can change a lot in 1 second ; think about a multimeter displaying voltage), so I’m interested for ~ 20 frame per second.

It is part of a larger dashboard with many other graphs (non-live-updating), already done in Plotly.js.

setInterval(() => {
        fetch("/data")
            .then((r) => r.json())
            .then((data) => {
                var y1 = data["y1"];  // 2000 points
                var y2 = data["y2"];  // 2000 points
                Plotly.react('container', [{y: y1, mode: 'lines', name: "y1"}, {y: y2, mode: 'lines', name: "y2"}], layout, config);
            });
    }, 50);    // 50 ms i.e.  ~ 20 fps

(The server sending the JSON data is in Python, but it could be anything else in backend)

Is this workflow adapted for fast updating data plotting?

Are there benchmarks about performance in this use case?

All the best.

2

Not sure if there is any benchmark out there. Everytime fast updates / high framerate is mentioned, I have to instantly think of websockets and clientside callbacks.

3

Whether with polling setInterval( ... fetch("/data").then(...) or with websockets, are the client drawing/rendering functions fast enough to do 20 or 30 fps, for a few thousands of points, without having too high CPU?

Or should we use specific parameters in config or layout to optimize fast rendering?

4

A little up :slight_smile: :

Are there recommended ways to display / update a plot of thousands of points 20 or 30 times per second?

Or just a standard setInterval every 50 milliseconds + fetch + Plotly.react is ok, even for thousands of points?