DatePickerRange to Update Data Table

Dash Python
1

My layout uses two dcc components a DatePickerRange and a DataTable. The datable is displaying a pandas df with ‘Date’ as a column.

I want to allow the user to select a start date & end date from the DatePickerRange and have the DataTable filter the df based on the dates selected. Seems that this is straight forward, but I get lost in writing out the function as you’ll see below:

@app.callback(
    dash.dependencies.Output('table', 'data'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])

def update_table(start_date, end_date):
    start_date = dt.strptime(start_date, '%Y-%m-%d')

    end_date = dt.strptime(end_date, '%Y-%m-%d')

    df2 = df[(df['Date']>start_date)&(df['Date']<end_date)]

    return df2

thanks for any help with this

1 Like
2

hi @Troy,

I faced the same issue, and actually removing dt.strptime solved it :

here is my example :

@app.callback(
    Output(component_id='chart_delay', component_property='figure'),
    [Input(component_id='my-date-picker-range', component_property='start_date'),
    Input(component_id='my-date-picker-range', component_property='end_date')]
    )
def update_chart(start_date, end_date) :
	new_results = results.loc[start_date: end_date]

Be sure that your DataFrame has only one index and that it is convert to DateTime.

Best,

Quentin

3

I had to do something similar, this helped me achieve the task::

@app.callback(
Output(component_id=‘chart_delay’, component_property=‘figure’),
[Input(component_id=‘my-date-picker-range’, component_property=‘start_date’),
Input(component_id=‘my-date-picker-range’, component_property=‘end_date’)]
)
def update_chart(start_date, end_date) :
df2 = df.loc[(df.Date > start_date) & (df.Date <= end_date)]

1 Like
4

Thanks so much for the response Quentin. I applied your suggestion and the weird thing is that the datatable is not updating. However, I can tell by looking through the Terminal that the code is working. Also, my datatable is not displaying the index (index is datetime). Something has got to be off with how I’ve set up the data table to read in the data? Full code below:

df = pd.read_csv('Test_Time_Series.csv')
df['Date'] = pd.to_datetime(df.Date,errors='coerce')
df.index = df['Date']
del df['Date']

app = dash.Dash()

app.layout = html.Div([
    dcc.DatePickerRange(
    id='my-date-picker-range',
	min_date_allowed=dt(2019, 1, 1),
    max_date_allowed=dt(2019, 1, 4),
    initial_visible_month=dt(2019, 1, 1),
    end_date=dt(2019, 1, 4)
),
dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("rows")
    )
])

@app.callback(
    dash.dependencies.Output('table', 'data'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])

def update_table(start_date, end_date):

    df2 = df.loc[start_date: end_date]

    return df2


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

Hi Troy, glad to see my answer helped you.

1 - Concerning the index : It seems that Dash Datatable is not taking it into account (so far). you simply have to reset it.

df2 = df2.reset_index(drop= False)

2 - Concerning the update :
It is really important to change the “Property” you wanna update, and not the full DataFrame. For example, in the code you provide, the property you try to change is ‘data’, while you return a full ‘Dataframe’.
Try the following and it should work :

@app.callback(
dash.dependencies.Output('table', 'data'),
[dash.dependencies.Input('my-date-picker-range', 'start_date'),
 dash.dependencies.Input('my-date-picker-range', 'end_date')])

def update_data(start_date, end_date):
    df2 = df.loc[start_date: end_date]
    data = df2.to_dict("rows")
return data

3 - You will probably have to do the same for the name of your columns and make another callback since the property is different (columns instead of data):

@app.callback(
dash.dependencies.Output('table', 'columns'),
[dash.dependencies.Input('my-date-picker-range', 'start_date'),
 dash.dependencies.Input('my-date-picker-range', 'end_date')])

def update_columns(start_date, end_date):
df2 = df.loc[start_date: end_date]
columns =[{"name": i, "id": i} for i in df2.columns]
return columns

When you try to update a Graph, Table, etc… Be sure that you update the right property.
You can get all the details if needed here : https://dash.plot.ly/datatable

I hope that helps, :slight_smile:

Quentin

1 Like
6

Quentin I REALLY appreciate you taking the time to write this out. It was super helpful and everything works as I intended it to now. Thank you!

1 Like
7

Hi Troy,

Pleasure is for me. Would you mind putting this topic as solved if it answered your question ?

See you around,

Quentin

8

Hey Quentin,

I tried your suggesting but I seem to be having some trouble with this. Any chance you might be able to shed some light? Any help would be super appreciated! Anytime I run the app, nothing appears in the tables.

app.layout = html.Div(

[  
                    dcc.DatePickerRange(
                        id='my-date-picker-range',
                        min_date_allowed=datetime(2019, 8, 5),
                        max_date_allowed=datetime(2021, 9, 19),
                        initial_visible_month=datetime(2020, 1, 1),
                        end_date=datetime(2020, 1, 2)
                    ),
                    dash_table.DataTable(
                        id="soc_cases",
                        columns=[{"name": i, "id": i} for i in df_soc.columns],
                        data=df_soc.to_dict("rows")
                    ),

])

#need to finish this call back
#ref DatePickerRange to Update Data Table

@app.callback(
dash.dependencies.Output(‘soc_cases’,‘data’),
[dash.dependencies.Input(‘my-date-picker-range’, ‘start_date’),
dash.dependencies.Input(‘my-date-picker-range’, ‘end_date’)])

def update_data(start_date, end_date):
df2 = df_soc.loc[(df_soc[‘firstBooking’] >= start_date) & (df_soc[‘firstBooking’] < end_date)]
data=df2.to_dict(‘rows’)
return data

@app.callback(
dash.dependencies.Output(‘soc_cases’,‘columns’),
[dash.dependencies.Input(‘my-date-picker-range’, ‘start_date’),
dash.dependencies.Input(‘my-date-picker-range’, ‘end_date’)])

def update_columns(start_date, end_date):
df2 = df_soc.loc[(df_soc[‘firstBooking’] >= start_date) & (df_soc[‘firstBooking’] < end_date)]
columns =[{“name”: i, “id”: i} for i in df2.columns]
return columns

if name == ‘main’:
app.run_server(debug=True)

9

There is no df.to_dict('rows')