Plot Live Graphs using Python Dash and Plotly - GeeksforGeeks

16 Jul, 2020
Dash is a Python framework built on top of ReactJS, Plotly and Flask. It is used to create interactive web dashboards using just python. Live graphs are particularly necessary for certain applications such as medical tests, stock data, or basically for any kind of data that changes in a very short amount of time where it is not viable to reload each time the data is updated. This can be done using a feature called “hot reloading”, not to be confused with “live reloading”. Live reloading reloads or refreshes the entire app when the data is updated, while hot reloading only refreshes the data that was updated without changing the state of the app. Dash automatically includes hot-reloading making it the best choice for this kind of visualization. 
Now, let’s build a dashboard that generates random data, appends it onto a buffer at regular intervals and visualizes the same. 
Install Dash module and Plotly modules. 
pip install dash
pip install plotly

First, let’s import all the required modules and dependencies. Import Output and Input for callbacks, dash_core_components for graphs and other basic components offered by Dash. Import dash_html_components offers basic HTML components. Also, import dash and plotly. Import the graph_objs from plotly for graph features. Import deque(Doubly Ended Queue) from collections.
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
Let’s initialize two deques for X and Y components of the graph. Append single data to it, this will be our first points on the graph. 
X = deque(maxlen = 20)
X.append(1)

Y = deque(maxlen = 20)
Y.append(1)
Initialize the dash app.
app = dash.Dash(__name__)
Now let’s specify the layout of the dashboard that we want to build. It is important to note that there is no need to write HTML pages for the layout and we can use dash’s HTML components to make simple layouts. Let’s build a simple layout with just a graph component. In the code below, let’s set animate to True, this will easily handle scroll animations for the graph which would look better than an abrupt change in the values after updating. Let’s assign an id to the graph component. We have another component named Interval, which has properties like id which specifies a unique ID for this component. The property interval specifies the time elapsed between two updations of data. n_interval refers to the number of intervals completed from the start of the server.
app.layout = html.Div(
    [    
        dcc.Graph(id = 'live-graph',
                  animate = True),
        dcc.Interval(
            id = 'graph-update',
            interval = 1000,
            n_intervals = 0
        ),
    ]
)
Now let’s call the callback decorators
@app.callback(
    Output('live-graph', 'figure'),
    [ Input('graph-update', 'n_intervals') ]
)
Now let’s make the update_graph method which takes in n_intervals as parameter. Let’s update X values sequentially, i.e., from 1 to 2 to 3 and so on. Let’s update Y values to random values. Now let’s make a new data variable and assign it to a plotly graph. Plotly graphs, by default, requires you to set X and Y values with a list. Let’s specify the mode to “lines+markers” which essentially means that Plotly is going to plot markers first and then draw lines to it.
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)]),
                    )}
Finally, run the server.
if __name__ == '__main__':
    app.run_server()
Complete Code:
Python3
import dashfrom dash.dependencies import Output, Inputimport dash_core_components as dccimport dash_html_components as htmlimport plotlyimport randomimport plotly.graph_objs as gofrom 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()
Open the browser and run the app on the local host and port 8050
http://localhost:8050/
Output:
This is how dash can be used for live graph visualizations. In this article, we have used it with random values generated by the computer. However, the same can be done with data pulled from APIs or a database. 
Python-Plotly
Python-projects
python-utility
Python
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Read JSON file using Python
Adding new column to existing DataFrame in Pandas
Python map() function
How to get column names in Pandas dataframe
Python Dictionary
Taking input in Python
Read a file line by line in Python
How to Install PIP on Windows ?
Enumerate() in Python
Different ways to create Pandas Dataframe