How to prevent "animated" bokeh plot from stuttering - animation

Question

I'm trying to create a kind of dashboard for monitoring ECG data and relevant features. When "animating" the ECG by constantly updating two ColumnDataSources, very soon the plot starts stuttering and growing slow. At the moment, I'm running this in a notebook, but it's the same with a bokeh server.
The ECG itself shows about the latest second, some 400 data points in a line. Left on its own, this runs almost smooth, but this is not really helpful, dashboard-wise. Another plot shows the heart rate variability, maybe a dozen circles but derived from the last minute of data, thus the two sources.
It seems that the more is gathered in the data sources and the faster the updates happen, the slower the plotting becomes. The rollover parameter of ColumnDataSource.stream() cuts the overall length of what is collected but ultimately does not prevent the stuttering.
There is probably some rookie mistake in my code, as I feel bokeh should be well-equipped for visualizing such an amount of data. So, here is what I do for plotting:
dashboard_source = ColumnDataSource(record[:1]) # initialize with first row
ecg_source = ColumnDataSource(record[:1]) # initialize with first row
# some options
time_window = 12 # seconds to keep in view
ecg_length = 1 # seconds to keep in view in ECG plot
update_rate = 1000 / sampling_rate # number of milliseconds between each plot update
# update function in which source data is fed from record dataframe
current_record_pos = 1
def update_dashboard_source():
global current_record_pos
new_row = record.iloc[current_record_pos]
dashboard_source.stream(new_row, rollover = sampling_rate * time_window)
ecg_source.stream(new_row, rollover = sampling_rate * ecg_length)
current_record_pos += 1
def ecg_dashboard(doc):
# dashboard element: ECG plot/s ---- ------- ---- ------- ---- ------- ---- -------
ecg_plot = figure(width=800, height=400, title='ECG', x_axis_label='time in ms', y_range=(-1, 1.5))
# plot ECG channels
for record_channel, color in zip(record_channels, ['green', 'blue']):
ecg_plot.line(source=ecg_source, x='time_ms', y=record_channel, alpha=.3, legend=record_channel+' ', color=color)
# dashboard element: heart rate variability ---- ------- ---- ------- ---- ------- ---- -------
hrv_plot = figure(width=400, height=400, title='heart rate variability', x_axis_label="r'r''", y_axis_label="r''r'''")
hrv_plot.circle(source=dashboard_source, x='r_diff_1', y='r_diff_2', size=10, alpha=.23)
# gather everything in a dashboard element and add it to the document
ecg_row = row(ecg_plot)
feature_row = row(hrv_plot)
dashboard = column(ecg_row, feature_row)
doc.add_root(dashboard)
doc.add_periodic_callback(update_dashboard_source, update_rate)
show(ecg_dashboard)
I did not find bokeh's user guide very helpful regarding updated plotting. Is there maybe a collection of best practices somewhere?

Answer 1

Concluding the conversation in comments: Each time a single point is added to the plot the entire canvas area in the browser is being re-drawn. This is how browsers work. Having a sampling_rate of 250 results in 250 plot updates per second that is one update per 4ms. This will make the browser running slower and slower as the number of points to be rendered (re-redrawn) every 4ms will increase.
I would advice to increase the update period from 4ms to about 100ms (possibly with larger data packets)