Callback for pair of DateRangePicker?

Dash Python
1

Hi,

I’m trying to create a graph that allows a user to select 2 date ranges, and outputs the data for both to a single graph.

I’m not sure how to make the start_date and end_date values for each graph’s input in the callback unique, so the correct data is output. Is this possible with Dash?

2

Yes, it is possible. You will need to create callbacks that trigger based on the set value for updatemode (can be set to trigger when either date is selected or after both dates selected). These callbacks would perform error checking based on the date range of the other daterangepicker. You could also use a modal to provide feedback to the user.

3

Thanks for the reply :slight_smile:

Are there any examples or tutorials that can help show how to do this? I’ve looked around but can’t find anything that shows how to use updatemodewith daterangepicker the way I’m trying to.

4

How are you trying to use it so I can try to provide sample code?

5

Thankyou. Here is the code I’m trying to get working. It gets the date range, runs it through a function which pulls data from a sqlite file and outputs it to 2 lists.

The code works with a single DateRangePicker, but I can’t find out how to differentiate between the start_date and end_date of range_cal_A and range_cal_B

@app.callback([
    dash.dependencies.Output('graph', 'figure'),
    [dash.dependencies.Input('range_cal_A', 'start_date'),
    dash.dependencies.Input('range_cal_A', 'end_date'),
    dash.dependencies.Input('range_cal_B', 'start_date'),
    dash.dependencies.Input('range_cal_B', 'end_date')
     ]]
    )
def update_tab3(start_date, end_date):

    if start_date is not None and end_date is not None:

        # start_date and end_date for range_cal_A as a datetime function
        start_dt_A = dt.strptime(start_date, '%Y-%m-%d')
        end_dt_A = dt.strptime(end_date, '%Y-%m-%d')

        # gets data of first date
        data_A = gettdata(start_date)

        # gets data for date range from range_cal_A
        while start_dt_A < end_dt_A:
            start_dt_A += timedelta(days=1)
            date_string = start_dt.strftime('%Y-%m-%d')
            date_data = gettdata(date_string)
            for a, b in zip(data_A, date_data):
                a.extend(b)

        # start_date and end_date for range_cal_B as a datetime function
        start_dt_B = dt.strptime(start_date, '%Y-%m-%d')
        end_dt_B = dt.strptime(end_date, '%Y-%m-%d')

        # gets data of first date of range_cal_B
        data_B = gettdata(start_date)

        # gets data for date range from range_cal_B
        while start_dt_B < end_dt_B:
            start_dt_B += timedelta(days=1)
            date_string = start_dt.strftime('%Y-%m-%d')
            date_data = gettdata(date_string)
            for a, b in zip(data_B, date_data):
                a.extend(b)

        figure = {
            'data': [
                {'x': data_A[0], 'y': data_A[1], 'name': 'Date Range A', 'legendgroup': 'Level 1', 'marker': {'color': 'rgb(0, 0, 255)'}},
                {'x': data_B[0], 'y': data_B[1], 'name': 'Date Range B', 'legendgroup': 'Level 2', 'marker': {'color': 'rgb(255, 0, 0)'}},
        ],


            'layout': {
                      'title': 'Ticket Stats For Date Range ' + parser.parse(start_date).strftime("%A") + ' ' + start_date + ' to '
                        + parser.parse(end_date).strftime("%A") + ' ' + end_date,
                      'plot_bgcolor': colors['background'],
                'xaxis': {'title': 'Hour Of The Day', 'tickmode': 'array', 'dtick': 1, 'tickformat': '%Y-%m-%d %H'},
                'yaxis': {'title': 'Ticket Count', 'tickmode': 'linear', 'dtick': 10},
                'legend': {'orientation': 'h', 'x': 0, 'y': -0.2, 'yanchor': 'top'}
                      }
                  }
    return figure
6

Your callback is being triggered by 4 inputs, but you are only passing 2 into the update_tab3 function. Change it to def update_tab3(start_date_A, end_date_A, start_date_B, end_dateB_B) in order to differentiate between range_cal_A and range_cal_B times within the function.