CODEWITHSUNDEEP
pythonplotly-dash
MaxB
MaxB

Reputation: 458

Live Updating Component Callback Dash

I am having trouble wrapping my head around Dash component callbacks. I am simply trying to update on an interval. The backend that I am pointing to is a database that will update. Below is what I am working with. The function produces the figure I want well, but when the datasource inevitably updates I would like the figure to reflect that.

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
children=[
    html.Div(id="Graphs", children=[dcc.Graph(id='lapTime')]),
    dcc.Interval(id='interval-component', 
                 interval=1 * 1000, 
                 n_intervals=0)
    
    ]
)

@app.callback(Output('Graphs', 'children'),
              Input('interval-component', 'n_intervals'))
def lapTimePlot():
      # SQL Calls for data
    channel = pyodbc.connect("DRIVER={ODBC Driver 17 for SQL Server};~~connection String Omitted~~") 
    Run=pd.read_sql("SQL OMITTED", channel).iloc[0]['Name']
    Event=pd.read_sql("SQL OMITTED", channel).iloc[0]['evID']
    Lap=pd.read_sql("SQL OMITTED", channel)
    #Clean Data
    Lap=Lap[Lap['RunName']==Run]
    Lap=Lap[Lap['evID']==Event]
    Lap=Lap[Lap['Ltime']>10] 
    Lap=Lap[Lap['Ltime']<(Lap['Ltime'].min()*1.1)]
    # Generate tables and sort values
    med=Lap.groupby(['Driver'])['Ltime'].median().sort_values()
    mini=Lap.groupby(['Driver'])['Ltime'].min().sort_values()
    # Combine tables and put into dataframe
    tab=pd.concat([mini,med],axis=1)
    tab=tab.reset_index()
    tab.columns = ['Driver','Min_Ltime','Mean_Ltime']
    tab=tab.sort_values('Min_Ltime',ascending=True) 
    tab=tab.reset_index(drop=True)
    tab=tab.reset_index()
    tab.columns = ['Rank','Driver','Min_Ltime','Mean_Ltime']
    tab.Rank=tab.Rank+1
    tab=tab.round({'Min_Ltime': 3,'Mean_Ltime': 3})
    # Set order by laptime
    Lap['Driver_Sort']= pd.Categorical(Lap['Driver'], categories=tab.Driver, ordered=True)
    Lap=Lap.sort_values('Driver_Sort',ascending=True)   
    ses="Session: " + Run  
    rheight=650/tab.Driver.count()   
    #Generate Table
    trace=go.Table(
                domain=dict(x=[0,0.2],
                            y=[0,1]),
                columnwidth=[1, 3, 1, 1],
                header=dict(
                values=["Rank","Driver", "Fast Lap", "Mean Lap",],
                height=50,
                font=dict(size=10),
                align="center"),
                cells=dict(
                values=tab.transpose().values.tolist(),
                height=rheight)) 
    
      # Generate box plot
    trace1=go.Box(
              x=Lap['Ltime'], y=Lap['Driver'] ,
              notched=True,
              orientation='h',
              xaxis="x1",
              yaxis="y1")
    layout = dict(xaxis1=dict( dict(domain=[0.28, 1], anchor='y1')),
                 yaxis1=dict( dict(domain=[0.05, 0.93], anchor='x1')),
                 title_text=ses) 
    Fig1 = go.Figure(data = [trace,trace1], layout = layout)
    return Fig1



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

I am struggling to see where this is going pear shaped. First time working with Dash and callbacks.

The page opens, and is updating every 1 second like it is supposed to, but the graph has nothing on it and is seemingly not being rendered by the lapTimePlot()

UPDATE:

When running with app.run_server(debug=True,use_reloader=False) there are no errors that can be seen when debugging.

Upvotes: 0

Views: 994

Answers (1)

bas
bas

Reputation: 15722

The first problem I can identify is that you're missing a parameter for your callback function.

Each callback function requires at least one Input and Output. The inputs map to the parameters of the callback function by their position.

@app.callback(Output("Graphs", "children"), Input("interval-component", "n_intervals"))
def lapTimePlot(n_intervals):
    # Do something...

You need to supply this parameter here even if you don't use it in the callback. You can name it something else as long as you supply a number of parameters to lapTimePlot equal to the number of Inputs used.

Upvotes: 1

Related Questions