Callback of variable for update in layout

Dash Python
1

Hi all, I have the following code

# Import Libraries

import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
import dash 
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import datetime 

import dash_bootstrap_components as dbc

date_cols = ["date"]
df = pd.read_csv('base.csv', parse_dates=date_cols)

fig=px.bar(df,x='date',y='value_likes',color='type', barmode='group', 
        color_discrete_sequence=px.colors.sequential.deep, template='plotly_white'
        )

likes = df['value_likes'].iloc[-1]


app = dash.Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server
app.title = "CSV"

app.layout = html.Div([
  dcc.Interval(
            id='interval-component',
            interval=10*1000, # in milliseconds
            n_intervals=0
        ),
  dbc.Container([
      html.H1("REALTIME MONITORING"),
      html.H4("%s" % likes),
      dcc.Interval(id="progress-interval", n_intervals=0, interval=500),
      dcc.Graph(id='graph', figure=fig)
  ],)

])

@app.callback(
    Output('graph', 'figure'),
    [Input('interval-component', "n_intervals")]
)

def streamFig3(value):
    
    global df
    
    dfglobal = pd.read_csv('base.csv',dtype={'date':'string'})
    likes = dfglobal['value_likes'].iloc[-1]
    fig=px.bar(dfglobal,x='date',y='value_likes',color='type', barmode='group',
        color_discrete_sequence=px.colors.sequential.deep_r, template='plotly_white'
        )

    return(fig)

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

Everything is working fine, as soon as the csv is updated the graph gets updated but the likesvariable is not updating accordingly, and it keeps its “original value”.

Running in a local environment if I save app.py - even with no changes to code - the likes variable changes , but it doesn’t change when the CSV gets updated.

What would be the best solution to solve this? Thank you in advance.

2

You use some global variables in your app, which generally is a bad idea. Read the section “Why global variables will break your app” here for more details.

To get the behaviour you expect, add the destination of the likes (that is, the html.H4 in your dbc.Container) as an output of your callback streamFig3. So basically, you do with the H4 element what you are already doing with the dcc.Graph element.

  1. Give your H4 element an ID, eg. html.H4(id='likes-display')
  2. Put the H4 element as an output to your callback like so:
@app.callback(
    Output('graph', 'figure'),
    Output('likes-display', 'children'), # <- this line is new
    [Input('interval-component', "n_intervals")]
)
  1. Return the likes so that they land in the output like so:
return fig, str(likes) # instead of just return fig
1 Like
3

@MichelH thank you. That did it!