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.

[manishmohan]

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)

[CUclimber]

Thanks for this. Your tutorials are outstanding.

[marketsmoto]

When I tried this same thing but with a faster update time, it made the chart look like it was having a seizure rather than just smoothly updating faster.

[ronstubed]

You will one day save my life @sentdex!

[matst]

From Python Documentation: "Deques are a generalization of stacks and queues (the name is pronounced “deck” and is short for “double-ended queue”)"

[Naturefade]

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.

[wolfisraging]

Thanks very much for your tutorials and sharing your knowledge

[sentdex]

Whoops, we don't need the globals at all. Sorry about that. Just remove the 2 globals.

[jonathanramirovargassuasna]

How Can I solve this cannot import name 'Event' from 'dash.dependencies'?

[guilhermeoshiro]

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 ?

[ORLK_]

Hello, I need more than one line in figure1; dcc.graph with a new id and interval is existing but the changes in the function "update_graph_scatter(n)" are very confusing.

[sathishpaladi]

What if I want three line charts in one graph

[theAiWorld-qr]

Watching this at Chinese New Year's eve

[robertoguerra]

Thank you for your plotly animation demos :)

I tried this example, but I needed this correction:

There is no Event in dash anymore, and we must use [Input('graph-update', 'n_intervals')]) in the function decorator

Also, I tried reducing the interval to 100, like you did in example 5, but the browser is very slow in displaying the updated plots. I see the dash process receiving the Input and creating the output 10 times per second. But the browser only updates 2 times per second (or so).

I need this for a lidar that makes a radar plot 6 times per second (720 samples per revolution). I made it in matplotlib+tkinter successfully, but I need to display it on the web.

[pshah]

Events are no longer supported on dash. If possible, can you provide an alternative?

[zhubobofu]

looks like refreshing the page will also refresh the speed.

[harshgawai]

If we create a button and click it. How to print current live graph data values by clicking it?

[gauravmakasare]

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

[UniverseGames]

On that line graph, how can we use logo at the end of this line. Suppose if we want to use Facebook and Twitter logo, small size or even how can make a circle and write"FB" or Twitter like this at the end of each multiple line.

[susilo]

Dear Sentdex
Its possible in this tutorials to read real time data which store as a file and updated every 1s. Thank you