How to create real time dashboard with schedule refresh

Dash Python
1

Hi Dash Community,

I am creating a dash app which is fetching data from a postgresql database. I want the visuals in the dashboard to get updated after every 5 minutes i.e when new data in the database is added it should get updated onto the visuals of the dashboard also. For this I am using dcc.Interval but it is not updating the visuals after every 5 minutes. Infact, the dashboard remains static with no changes on the visuals.

In simple words, the issue I’m facing is I’m not able to refresh my data displayed by my graphs in real time after every 5 minutes. The data is being fetched from a postgresql database.

I am attaching the code below. Pls guide me how should I proceed with this since I doing such kind of refresh of data for the first time. Right now in this code I only need this bar graph to be updated after every 5 minutes.

Whatever changes in the code are to be made please let me know. Thanks

import psycopg2
import pandas as pd 
import pandas.io.sql as psql
import dash 
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Output, Input
from urllib.request import urlopen

#establishing the connection
conn = psycopg2.connect(
   database="db_name", user='username', password='password', host='hostname', port= 'port')


df = psql.read_sql('SELECT * from table', conn)

df1 = df.groupby('complaint').count().reset_index()

app = dash.Dash(__name__)

app.layout = html.Div([

    html.Div([
        dcc.Graph(id='the_graph'),
        dcc.Interval(
            id='interval-component',
            interval=5*60*1000,
            n_intervals=0
        )
    ]),

])

@app.callback(
    Output(component_id='the_graph', component_property='figure'),
    Input('interval-component', 'n_intervals'),
    )

def update_graph(n):
    dff = df1
    fig = px.bar(data_frame=dff,x="complaint",y="id",opacity=0.9,orientation="v",text='id')   
    fig.update_layout(barmode='stack', xaxis={'categoryorder':'total descending'})
    fig.update_layout(width=600, height=500,margin={"r":0,"t":0,"l":0,"b":0},)
    return fig

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

You need to read the dataframe in the callback itself if you want it to update every 5 minutes. In the code above the dataframe is staying the same from the first time you read it. Change the update graph function to:

def update_graph(n):
    df = psql.read_sql('SELECT * from table', conn)
    dff = df.groupby('complaint').count().reset_index()
    fig = px.bar(data_frame=dff,x="complaint",y="id",opacity=0.9,orientation="v",text='id')   
    fig.update_layout(barmode='stack', xaxis={'categoryorder':'total descending'})
    fig.update_layout(width=600, height=500,margin={"r":0,"t":0,"l":0,"b":0},)
    return fig
1 Like
3

Thank you so much. It worked !!