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

62 comments

  1. Hans-Jürgen Kraus on

    What do I have to do to see the graph on an other device than the one the server is running? Do I have to run a web server as well?

    Reply
  2. Hans-Jürgen Kraus on

    What do I have to do to see the graph on other devices than the one the server is running on? Do I have to run a web server as well?

    Reply
  3. Goosi GD on

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

    Reply
  4. Goosi on

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

    Reply
  5. fuba44 on

    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”

    Reply
  6. Ceut on

    Great video, as always.

    It seems the animation in dcc.Graph lacks 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.

    Reply
  7. Ceut on

    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.

    Reply
  8. John Withrow on

    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)

    Reply
  9. Vijay Nafria on

    Many say its deck which is what it actually is FIFO, even in bidirectional version.
    But I call it “dee-queue” like an adversary to queue en-queue 😉

    Reply
  10. nassima noufail on

    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.

    Reply
  11. Ricardo Santos on

    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

    Reply
  12. MUNNANGI BANUPRAKASH REDDY on

    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 ?

    Reply
  13. Joel Muckom on

    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

    Reply
  14. Felipe Gutierrez on

    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

    Reply
  15. Guilherme Oshiro on

    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 ?

    Reply
  16. Jose Gabriel Kordahi Amair on

    The Event dash.dependencies is no loger supported on actual version of Dash, is there any Work around to get the “event” behavior working on the browsers?

    Reply
  17. gaurav m on

    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 !!

    Reply
  18. Lars Magnus on

    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
    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?

    Reply
  19. Cristian Enriquez on

    Hi, i really liked your tutorial but the event system got removed in the latest version, so what changes could be necesary to take this functional?, thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Show Buttons
Hide Buttons