Flickering scatter plot with short interval update (<600 ms)

Dash Python
1

Hi, I want to create a live plot with relatively short update, every ~200ms.
I noticed that with small Interval update, the plot has some glitches.
If I set the Interval update > 600 it works OK.
Anyone with similar issues?

Peek%202019-10-11%2023-36
Peek%202019-10-11%2023-361268×457 265 KB
Peek%202019-10-11%2023-48
Peek%202019-10-11%2023-481268×457 82.5 KB 

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import random
import plotly.graph_objs as go

my_x = [1]
my_y = [1]
UPDATE_POINTS_INTERVAL = 20

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(id='live-graph', animate=True),
        dcc.Interval(
            id='graph-update',
            interval=1*500,
            n_intervals=0
        ),
    ]
)

@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'n_intervals')])
def update_graph_scatter(n):
    xy = increment_coordinates(my_x,my_y,0)
    X = xy[0]
    Y = xy[1]
    data = plotly.graph_objs.Scatter(
            x=list(X),
            y=list(Y),
            name='Scatter',
            mode= 'lines'
            )

    return {'data': [data],'layout' : go.Layout(xaxis=dict(range=[((min(X)) // UPDATE_POINTS_INTERVAL) * UPDATE_POINTS_INTERVAL,
                                                                  (max(X) // UPDATE_POINTS_INTERVAL + 1) * UPDATE_POINTS_INTERVAL]),
                                                yaxis=dict(range=[0,3]), )}


def increment_coordinates(x_list,y_list,new_y):
    x_list.append(x_list[-1]+1)
    y_list.append(y_list[-1] + y_list[-1] * random.uniform(-0.1, 0.1))
    size = len(x_list)
    if size > 100+UPDATE_POINTS_INTERVAL:
        del x_list[:UPDATE_POINTS_INTERVAL]
        del y_list[:UPDATE_POINTS_INTERVAL]

    return [x_list,y_list]

if __name__ == '__main__':
    xy = increment_coordinates(my_x,my_y,0)
    app.run_server(debug=True)
2

Same here. Every update comes with flickering the whole page no matter what the interval is. Pretty annoying. I can only run it with the interval set to 2000 or more, otherwise it just flickers the screen constantly and kinda freezes. Do you have any updates on this issue?

3

hi. I’m having the same problem and I wonder if you found any solution.
In my case i wanna use it to plot EKG sensor data that requires a very small update interval (5ms) and if i make the interval less than 600 it seems to keep flickering and redrawing the whole thing instead of just adding more values

4

Same problem. Flickering is distracting from the page as a whole.

5

You can use the extendData property and client side updates to achieve smooth updates.