Hello everybody,
I have the following problem: I want to use the a DatePickerRange to be able to Zoom into a specific time range via callback. The DatePickerRange works fine so far but the figure doesn’t get Updates by the callback, so I just get a blank figure.
My Code looks like this:
app = Dash()
app.layout = html.Div([
dcc.Graph(id = 'SoC_line_chart', style={"border":"2px solid black",'width': '100%', 'height': '65vh', 'display': 'inline-block'}),
dcc.DatePickerRange(
id='my-date-picker-range',
min_date_allowed=date(1995, 8, 5),
max_date_allowed=date(2024, 9, 19),
initial_visible_month=date(2022, 8, 5),
start_date_placeholder_text="Start Period",
end_date_placeholder_text="End Period",
),
html.Div(id='output-container-date-picker-range')
])
@app.callback(
Output('SoC_line_chart', 'figure'),
[Input('my-date-picker-range', 'start_date'),
Input('my-date-picker-range', 'end_date')])
def update_SoC_line_chart(start_date,end_date):
Result_all_f = Result_all.loc[Result_all["Time_stamp"].between(*pd.to_datetime([start_date, end_date]))]
fig = make_subplots(specs=[[{"secondary_y": True}]])
fig.add_trace(go.Scatter(x=Result_all_f['Time_stamp'], y = Result_all_f['x_SoC_Batt'], name= 'x_SoC_Batt'),secondary_y=False)
fig.add_trace(go.Scatter(x=Result_all_f['Time_stamp'], y = Result_all_f['x_SoC_EV'],name = 'x_SoC_EV'), secondary_y=False)
fig.add_trace(go.Scatter(x=Result_all_f['Time_stamp'], y = Result_all_f['E_EV_pluggedIn'],fill='toself',fillcolor = '#D3D3D3', opacity=0.3,name = 'EV_pluggedIn'),secondary_y=True).update_layout(title='SoC_line_chart', plot_bgcolor='rgb(220,220,220)')
return fig
And the result like this:
Does anyone know this problem or how to fix this?
Thank you in advance!
Johanna
