Live Graphs with Events – Data Visualization GUIs with Dash and Python p.4



How to create live graphs in Python with Dash, the browser-based data visualization application framework.

Text tutorials and sample code: https://pythonprogramming.net/live-graphs-data-visualization-application-dash-python-tutorial/

Discord: https://discordapp.com/invite/3jCqXJj
https://pythonprogramming.net/support-donate/

https://www.facebook.com/pythonprogramming.net/
https://www.twitch.tv/sentdex
https://plus.google.com/+sentdex

Related Posts

47 Comments

  1. Seen a lot of people having issues with Events getting removed, here is the updated code using Input:

    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

    from collections import deque

    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=1000,

    n_intervals = 0

    ),

    ]

    )

    @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]+Y[-1]*random.uniform(-0.1,0.1))

    data = plotly.graph_objs.Scatter(

    x=list(X),

    y=list(Y),

    name='Scatter',

    mode= 'lines+markers'

    )

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

    yaxis=dict(range=[min(Y),max(Y)]),)}

    if _name_ == '__main__':

    app.run_server(debug=True)

  2. the returned data after update dash should be a list so we shoild add [ ]
    return [ {'data': [data],'layout' : go.Layout(xaxis=dict(range=[min(X),max(X)]),
    yaxis=dict(range=[min(Y),max(Y)]))}]

  3. I attempted to run the above under Ubuntu, but I get the following library focused errors:

    Traceback (most recent call last):
    File "GUI2.py", line 29, in <module>
    events = [Event('graph-update','interval')])
    File "/home/lars99/.local/lib/python2.7/site-packages/dash/dash.py", line 878, in callback
    self._validate_callback(output, inputs, state, events)
    File "/home/lars99/.local/lib/python2.7/site-packages/dash/dash.py", line 712, in _validate_callback
    component.available_events):
    AttributeError: 'Interval' object has no attribute 'available_events'

    IAW with your pt.1 video series, I installed the dash, plotly,etc libraries under Ubuntu by entering the following:

    sudo -H pip install dash dash-renderer dash-html-components dash-core-components plotly

    Do you know if there is a fix for this? What do you suggest?

  4. i am having an error which says that it cannot import the dependency Event. I researched about it and found out that it has been removed or something like that . Does anyone have an alternative . Please help !!

  5. Hello!
    Im facing an issue with "hours and minutes" to "date" plots,

    My date range goes ok but my time range goes messy, it starts at 07:40 and goes to 11:30 then it backs to 09:25, not respecting intervals

    Tried lots of things, putting Hours as datetime object and date as string, , hour as datetime and date as datetime and so on (lots of combination)

    I put the tickformat to "%HH:%MM" but didnt work too

    Can anyone help me ?

  6. Hi @sentdex, thanks for the video. It was really helpful. I got some example from the Dash Plot.ly web site and modified to be "animated". When I change the dropdown box it also changes the graph. However it does not change the xaxis,yaxis names. Do you know why? Would you kindly check the issue that I posted here? …. https://stackoverflow.com/questions/53541886/how-to-update-xaxis-and-yaxis-name-on-interval-using-dash-plotly-in-python thanks

  7. Hi sentdex,

    In this tutorial you just added some random data in, but you mentioned that we may be using a .csv or .txt file. How do I go about using one of these files instead of random data for a class project.

    Thanks

  8. Hi Sentdex ! Your tutorials are really amazing. I implemented the same code for live streaming. But when I zoom in at an instant, it is getting reset immediately because of 1 second interval and of data updating. Is there a way that I can freeze the zoomed in portion without disturbing the rest of the functionality ?

  9. COngrats on the tutorials.
    I've a question:
    You are always showing the plots in the html in the local IP 127.0.0.1:8050. How do I do to place it in a specific web server? Where do I say to dash to send it to the web? By default that local IP and port is used, what i i want to change it.

    I have several sensors and i'm collecting them using a raspberry pi (headless). I would like to see Live streaming from anywhere only by using a Link. How can I do that.
    It would be nice if you did a tutorial on this.

    Thanks

  10. hello, I tried to implement that code while changing the fact that the X-axis elements are read from an excel file and the graph should stop after a specific condition and it's not working for me if you have any idea about how to implement that plz let me know.

  11. Hi sentdex! I really have gotten a lot out of your videos! I attempted to modify the code presented in this video to something that simply supposed to draw a circle. While the change is very minor, I'm getting strange behavior that I can barely describe, much less explain. I realize that this isn't stackoverflow, but my guess is that there is something basic and foundational that I'm not getting. Perhaps a quick look? Code follows:

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

    x0 = 5
    y0 = 0
    theta = 0

    X = [x0]
    Y = [y0]

    app = dash.Dash(__name__)

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

    @app.callback(Output('live-graph', 'figure'),
    events = [Event('graph-update','interval')])
    def update_graph():
    global X
    global Y
    global theta
    theta = theta + 0.01
    X.append(5 * math.cos(theta))
    Y.append(5 * math.sin(theta))
    data = go.Scatter(
    x = X,
    y = Y,
    name = 'Scatter',
    mode = 'lines+markers'
    )
    return {'data':[data],'layout': go.Layout(xaxis = dict(range=[-10,10]),
    yaxis = dict(range=[-10,10]))}

    if _name_ == '__main__':
    app.run_server(debug=True)

  12. Great video, as always.

    It seems the animation in dcc.Graph lags behind if going faster than 500 ms (at least in Chrome for me), so if you really need to go faster, turn off animation (animate=False), still looks fine.

    Easiest way I found to check if animation is causing issues, is letting it run for a while, and then if your x-axis changes dramatically upon refreshing your site, you have an issue.

    Another way is to run it in two different tabs, and then manually refresh one of them.

  13. Can it plot more live data sets in the same graph from different data sources.. ? Like for stock "volume" and "price" or "speed" and "acceleration" or "temperature" and "humidity"

  14. Hello can u help me, it keeps telling me “module ‘random’ has no attribute ‘randrage’” it would be nice if you respond quickly 🙂

Leave a Reply

Your email address will not be published.

© 2022 Code As Pro - Theme by WPEnjoy · Powered by WordPress