I have implemented 2 chained callbacks for dropdowns and now I want to create a third chained dropdown which gives the Date through DatePickerRange. So in steps, first we select the “Technology”, the filtered list of “Releases” appears for that Technology and as a next step, I want the DatePickerRange to get updated with the min and max Date values of that Release.
I tried to do something on my own but it doesn’t work, my major doubts are I can’t find a way to fill in start_date, end_date and I do need a third @app.callback but I don’t know how to further do that. Here’s the code:
df = pd.DataFrame(source, columns=
['Technology', 'Release', 'Date', 'Type', 'Version'])
html.Div(
children=[
html.Div(
children=[
html.Div(children='Select Technology:', className="menu-title"),
dcc.Dropdown(
id='Tech_choice',
options=[{'label': x, 'value': x}
for x in df.Technology.unique()],
value='A',
clearable=False,
className="dropdown",
), ]),
html.Div(
children=[
html.Div(children="Select Release:", className="menu-title"),
dcc.Dropdown(
id='release_choice',
options=[],
clearable=False,
className="dropdown",
)
]
),
html.Div(
children=[
html.Div(
children="Date Range",
className="menu-title"
),
dcc.DatePickerRange(
id="date-range",
min_date_allowed=min(df['Date']),
max_date_allowed=max(df['Date']),
start_date=min(df['Date']),
end_date=max(df['Date']),
),
]
@app.callback(
Output(component_id='release_choice', component_property='options'),
Input(component_id='Tech_choice', component_property='value'))
def get_options(Tech_choice):
dff = df[df.Technology == Tech_choice]
return [{'label': i, 'value': i} for i in dff['Release'].unique()]
@app.callback(
Output(component_id='release_choice', component_property='value'),
Input(component_id='release_choice', component_property='options'))
def get_values(release_choice):
return [k['value'] for k in release_choice][1]
@app.callback(Output(component_id='my-graph', component_property='figure'),
[Input(component_id='release_choice', component_property='value')],
[Input(component_id='date-range', component_property='start_date')],
[Input(component_id='date-range', component_property='end_date')], )
def interactive_graphs(release_choice, Tech_choice, start_date, end_date):
print(Tech_choice)
print(release_choice)
dff = df[
(df['SystemRelease'] == release_choice) & (df['Technology'] == Tech_choice) & (df['date1'] >= start_date) & (
df['date1'] <= end_date)]
fig = px.scatter(data_frame=dff, x='Date', y='Release', color="Type", text='Package)
})
The data is huge but here is an image if somebody wants an idea
