Weird Behavior while using Multple Input Callback

Dash Python
1

Hi,

I have a chart in my dashboard that Id like to update live on a certain interval. I’m also trying to allow the user to select a custom start date for the graph from a drop down if they choose to. I’ve added my dropdown but when I go to pass it in to my call back, I keep getting the following error:

ERROR in app: Exception on /_dash-update-component [POST]
IndexError: list index out of range

This code works fine with just one input

app = dash.Dash()
data = pd.read_csv(filename)

dropdown_options = []
for time in data['Timestamp']:
    dropdown_options.append({'label': time, 'value': time})

app.layout = html.Div([dash_table.DataTable(id='raw_data',
                                            data=[],
                                            style_table={
                                                'height': '200px',
                                                'overflowY': 'scroll',
                                            },
                                             ),

                       dcc.Interval(id='interval_component',
                                    interval=60000,
                                    n_intervals=0
                                    ),
                          
                   html.Div([
                       dcc.Graph(id='delta_graph'),

                   ], style={'width': '48%', 'display': 'inline-block'}),

                   html.Div([
                       dcc.Dropdown(id='start_date_dropdown',
                                    options=dropdown_options,
                                    placeholder='Choose Start Date Override',
                                    value=data['Timestamp'].max(),
                                    style={'width': '220px',
                                           'font-size': '90%',
                                           'height': '40px'
                                           }
                                    ),
                       html.Button('Submit', id='button', n_clicks=0)

                   ], style={'margin-left': '500px'}
                   ),
                   html.Div([dcc.Graph(id='model_v_pred')])

                   ])


@app.callback(Output('delta_graph', 'figure'),
              [Input('interval_component', 'n_intervals')])
def update_period_graph(n_intervals, n_clicks):

    #removed code for readability:

    fig = go.Figure(data=data, layout=layout)
    return fig

However, when I try to add the value from the dropdown, I get the aforementioned errror. I ever tried creating a simple button and used that value as my 2nd input to make sure it wasn’t something wrong the dropdown and I still get the same error.

This is what i’ve tried for the multipul input:

@app.callback(Output('delta_graph', 'figure'),
              [Input('interval_component', 'n_intervals'),
               Input('start_date_dropdown', 'value')])
def update_period_graph(n_intervals, value):

#removed code for readability. 
    fig = go.Figure(data=data, layout=layout)
    return fig

Any ideas would be greatly appreciated and let me know if you need to see the full code - i tried to snip out any parts that might not have been necessary

Edit:

I’ve also just tried storing the dropdown in State and using the button clicks as input and that still errors out. I’ll post the code below for just the call back (with the full code this time):

@app.callback(Output(‘delta_graph’, ‘figure’),
[Input(‘interval_component’, ‘n_intervals’),
Input(‘button’, ‘n_clicks’)],
[State(‘start_date_dropdown’, ‘value’)]
)
def update_period_graph(n_intervals, n_clicks, value):

df = pd.read_csv(filename, index_col='Timestamp', parse_dates=True)

start = workdays.workday(datetime.today(), -1)
df_start = datetime(start.year, start.month, start.day, 12, 4)

df_end = df.index.max()

filtered_df = df.loc[df_start:df_end].copy()

target_bar = go.Bar(x=filtered_df.index,
                    y=filtered_df['CLEDelta'],
                    name='CLE Change',
                    marker=dict(color='#FFD700')
                    )
model_bar = go.Bar(x=filtered_df.index,
                   y=filtered_df['ModelDelta'],
                   name='Model Cange',
                   marker=dict(color='#9EA0A1'))
data = [target_bar, model_bar]
layout = go.Layout(title='Period by Period Change',
                   titlefont={'size': 16,
                              'family': 'Balto'},
                   )
fig = go.Figure(data=data, layout=layout)
return fig