Live Streaming not 'Live Updating'

Dash Python
1

New to dash, here! Hello!
So I’m working through a tutorial that would be useful for me…And
well, I’m expecting a deque and a live update to trigger from toy data being outputted…yet I have to manually refresh to see the new data populate the graph. Simple. Should work. I’m confounded. I know it is probably something simple I am missing.
Here is the code:

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go
import datetime
from collections import deque
from bandmon import transrate

X = deque(maxlen=20)
X.append(1)
Y = deque(maxlen=20)
Y.append(1)


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

@app.callback(Output('live-graph', 'figure'),
        [Input('graph-update', 'interval')])
def update_graph_scatter(n):
    X.append(X[-1]+1)
    Y.append(Y[-1]+2)
    
trace = plotly.graph_objs.Scatter(
            x=list(X),
            y=list(Y),
            name='Scatter',
            mode= 'lines+markers'
    )

    return {'data': [trace],'layout' : go.Layout(
                                xaxis=dict(range=[min(X),max(X)]),
                                yaxis=dict(range=[min(Y),max(Y)]))
    }

if __name__ == '__main__':
    app.run_server(port=8051,debug=True)
2

Your issue is that your input is interval which is the value of how many milliseconds n_intervals should fire. But your input should be n_intervals which is the prop that actually fires every interval milliseconds.

I’ve updated your code to fix this and to include an initial figure ( just looks better, no code reason) :

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


X = deque(maxlen=20)
X.append(1)
Y = deque(maxlen=20)
Y.append(1)
initial_trace = plotly.graph_objs.Scatter(
    x=list(X),
    y=list(Y),
    name='Scatter',
    mode='lines+markers'
)

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(id='live-graph',
                  animate=True,
                  figure={'data': [initial_trace],
                          'layout': go.Layout(
                              xaxis=dict(range=[min(X), max(X)]),
                              yaxis=dict(range=[min(Y), max(Y)]))
                          }),
        dcc.Interval(
            id='graph-update',
            interval=1*1000
        ),
    ]
)


@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'n_intervals')])
def update_graph_scatter(n):
    X.append(X[-1]+1)
    Y.append(Y[-1]+2)

    trace = plotly.graph_objs.Scatter(
        x=list(X),
        y=list(Y),
        name='Scatter',
        mode='lines+markers'
    )

    return {'data': [trace],
            'layout': go.Layout(
                xaxis=dict(range=[min(X), max(X)]),
                yaxis=dict(range=[min(Y), max(Y)]))
            }


if __name__ == '__main__':
    app.run_server(port=8051, debug=True)

Hope that helps.

1 Like
3

Awesome! Thanks!
I guess one follow up question: is there a more in-depth online documentation, other than the online tutorials? Something like Python’s documentation, or Haskell’s Hoogle. Thanks again!

4

Unfortunately not that I’m aware of, the “Component Libraries” section of the Dash site is probably the best laid out reference documentation: https://dash.plot.ly/ . But being spoiled by the Python standard library documentation and a lot of third party libraries readthedocs documentation I find it a bit of a sore spot for Dash.

I initially got in to Dash by following this tutorial and while it’s still a great tutorial it teaches the no longer working events api which has been replaced by the input props n_clicks and n_intervals. So I can’t recommend it in the same way that I used to.

1 Like