"Pre-selected" datepicker range via Dropdown Values?

Dash Python
1

Good Evening All!

I have been working on my web app (A dashboard for displaying sports science/medicine metrics to coaches that I work with). Right now I am trying to switch from using the included datepicker to using a dropdown that has preselected values that correspond with custom date ranges (past 4 weeks, 3 months, 6 months, year, 4 years). This is being done to modify a plotly scatter plot that is showing a specific athlete’s body weight over time.

I created variables that have these date ranges calculated like so (I just started learning to program in late April so please be ready to cringe…):

today = datetime.date.today()

four_weeks= timedelta(weeks = 4)

three_months = timedelta(weeks = 12)

six_months = timedelta(weeks = 24)

twelve_months = timedelta(weeks = 48)

four_years = timedelta (weeks = 192)

month_ago = today - four_weeks

three_months_ago = today - three_months

six_months_ago = today - six_months

one_year_ago = today - twelve_months

four_years_ago = today - four_years

I then wanted to create “values” in my dropdown that would be connected to these?

I have my callback setup like this currently:

@app.callback(
Output(body_weight_graph, ‘figure’),
Output(mytitle, ‘children’),
Input(dropdown, ‘value’),
Input(weight_drop, ‘value’)
)

def update_graph(column_name, start_date):
print(column_name)
print(type(column_name))
dff = df[(df[‘Name’] == column_name)]
dff = dff[([‘Date’] <= today) & (dff[‘Date’] >= start_date)]
fig = px.line(data_frame=dff, x=‘Date’, y=[‘Weight’, ‘Goal’],
color_discrete_map={‘Weight’: “blue”, “Goal”: “green”}, markers=True, template=‘plotly_dark’, title=“Weight Progress over Time”)

return fig, '# '+column_name

and here is my current dropdown setup…I deleted what I had for values on the weight_drop dropdown because I kept on just making strings that weren’t connected to the first set of variables (which are global variables right now instead of local).

mytitle = dcc.Markdown(children=‘’)

body_weight_graph = dcc.Graph(id=‘body_weight_graph’, figure={})

dropdown = dcc.Dropdown(id=‘dropdown_1’, options=df.Name.unique(), value=‘John Doe’, clearable=False)

weight_drop = dcc.Dropdown(id=‘weight_dropdown’, options=‘’, value=‘’, clearable=False)

Does anyone have any general direction to point me in for something like this? I am just assuming this is an easy solution and this is a dumb question to be asking…

2

Reading through the documentation and trying to looking at different examples I think I answered my own question for how to list my dropdown options correctly so that they refer to the above variables. Below is what I came up with.

weight_drop = dcc.Dropdown
(id=‘weight_dropdown’,
options=[{“label”:html.Div([‘Past Month’]),“value”: month_ago,},
{“label”:html.Div([‘Past 3 Months’]),“value”: three_months_ago,},
{“label”:html.Div([‘Past 6 Months’]),“value”: six_months_ago,},
{“label”:html.Div([‘Past Year’]),“value”: one_year_ago},
{“label”:html.Div([‘Past 4 Years’]),“value”: four_years_ago,},
], clearable=False)

However, if anyone has any insight on how to properly setup my callback I am still having issues getting the callback to select the correct date range.

@app.callback(
Output(body_weight_graph, ‘figure’),
Output(mytitle, ‘children’),
Input(dropdown, ‘value’),
Input(weight_drop, ‘value’)
)

def update_graph(column_name, start_date):
print(column_name)
print(type(column_name))
dff = df[(df[‘Name’] == column_name)]
dff.set_index(‘Date’, inplace=True)
dff.loc[str(start_date):str(today)]
fig = px.line(data_frame=dff, y=[‘Weight’, ‘Goal’],
color_discrete_map={‘Weight’: “blue”, “Goal”: “green”}, markers=True, template=‘plotly_dark’, title=“Weight Progress over Time”)

return fig, '# '+column_name

I have also tried not setting the index by Date and instead using something along the lines of:

dff[(dff[‘Date’] > today) & (dff[‘Date’] < start_date]

3

hi @lykolate
:wave: Welcome to the community.

I’m glad you solved your first challenge.

Regarding the date filtering of the dataframe, that’s a complicated topic. I’ve always struggled with dates and filtering a pandas dataframe according to the right date type.
What I would recommend you do is try to test things without the callback. Try to figure out the date filtering solution outside of the callback. Ty to filter your dataframe with those dates you have at the very beginning of the app. Once you got the right filter, then you can just add it to the callback. For example:

from dash import Dash, html, Output, Input, callback
import pandas as pd

app = Dash(__name__)
df = my_dataframe

one_year_ago = today - twelve_months
four_years_ago = today - four_years

# Below, just try different methods of filtering
dff = df.loc[str(four_years_ago ):str(today)]
print(dff)
exit()

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

I hope this helps,