We have a timer that fires every 200ms. On each tick it gathers the full series of data for the chart, creates buffers for it, marshals it across to JS, then calls Plotly.update.
This causes high CPU, and causes chart updates to be a little jerky.
For dashpages, where we will show many charts on screen at once, this overhead becomes multiplied.
Instead, we should use Plotly.extend to append new data items, only when they exist, and in only on the JS side should we have an animation loop that calls Plotly.relayout with updated y-axis coordinates.
With this we avoid many invocations from Blazor to JS, cutting CPU. We can then likely increase the rate of updates for the chart from 5fps to 30fps or even 60fps, making the animation very smooth.
We have a timer that fires every 200ms. On each tick it gathers the full series of data for the chart, creates buffers for it, marshals it across to JS, then calls
Plotly.update
.This causes high CPU, and causes chart updates to be a little jerky.
For dashpages, where we will show many charts on screen at once, this overhead becomes multiplied.
Instead, we should use
Plotly.extend
to append new data items, only when they exist, and in only on the JS side should we have an animation loop that callsPlotly.relayout
with updated y-axis coordinates.With this we avoid many invocations from Blazor to JS, cutting CPU. We can then likely increase the rate of updates for the chart from 5fps to 30fps or even 60fps, making the animation very smooth.