How do I create a Dash app that uses multiple independent date range pickers with multiple callbacks for multiple plots?

Dash Python
1

0

I have a Dash app that queries a pair of database tables and produces a pair of plots of some of the data from those tables. The database query and plotting are done in a separate function that receives a number of arguments such as table name, column names, start date, end date etc.

I want to be able to independently update the plots using callbacks, but I cannot seem to get the callbacks to run or update. Below is the code snippet that sets the layout and the callbacks. There are (at the moment) 2 plots and 2 callbacks.

For now I have added an update function that is supposed to re-run the query when the start or end date are changed. I use the start and end date as arguments for the function, but not all the other arguments that the function fig_generator uses.

My problem is that the plot does not update when the new start and end dates are chosen in the date range picker.

How I create 2 independent update functions that would allow the site user to independently select start and end times for each of the plots?

Here is the relevant code snippet:

# set up the app layout
layout = html.Div(children=
                    [
                    html.H1(children=['Borden Dashboard']),
                    html.H2(children=['Borden CSAT Display']),

                    dcc.DatePickerRange(
                        id='csat-date-picker',
                        min_date_allowed=csat_first_date,
                        max_date_allowed=end_date,
                        display_format='YYYY-MM-DD'
                    ),
                    dcc.Graph(id='csat_plot',figure=fig_generator(start_date,end_date,csat_table,csat_species_list,csat_axis_list,csat_plot_title,csat_y_title_1,csat_secondary_y_flag,csat_y_title_2)),
                    html.Br(),
                    html.H2(children=['Borden Picarro Display']),

                    dcc.DatePickerRange(
                        id='pic-date-picker',
                        min_date_allowed=pic_first_date,
                        max_date_allowed=end_date
                    ),
                    dcc.Graph(id='pic_plot',figure=fig_generator(start_date,end_date,pic_table,pic_species_list,pic_axis_list,pic_plot_title,pic_y_title_1,pic_secondary_y_flag,pic_y_title_2))
                    ] 
                    )

@callback(
    Output('csat_plot', 'figure'),
    Input('csat-date-picker', 'csat_start_date'),
    Input('csat-date-picker', 'csat_end_date'))

def update_csat(csat_start_date,csat_end_date):
    if not csat_start_date or not csat_end_date:
        raise PreventUpdate
    else:
        print ('Updating plot')
        csat_fig=fig_generator(csat_start_date,csat_end_date,\
                               csat_table,csat_species_list,\
                                csat_axis_list,csat_plot_title,\
                                csat_y_title_1,csat_y_title_2,csat_secondary_y_flag)
    return csat_fig

@callback(
    Output('pic_plot', 'figure'),
    Input('pic-date-picker', 'pic_start_date'),
    Input('pic-date-picker', 'pic_end_date'))

def update_pic(pic_start_date,pic_end_date):
    if not pic_start_date or not pic_end_date:
        raise PreventUpdate
    else:
        print ('Updating plot')
        pic_fig=fig_generator(pic_start_date,pic_end_date,\
                               pic_table,pic_species_list,\
                                pic_axis_list,pic_plot_title,\
                                pic_y_title_1,pic_y_title_2,pic_secondary_y_flag)
    return pic_fig
2

I think your callback should change as below:

@callback(
    Output('csat_plot', 'figure'),
    Input('csat-date-picker', 'start_date'),
    Input('csat-date-picker', 'end_date'))
3

Thanks for the suggestion. It turns out my colleague just wants a single data picker for all the plots. I got that working with some of your advice.