I have two graphs that are first created by a filter dropdown.
I want the ability of clicking on one of the two graph’s observations to update the other graph:
app.layout = html.Div([
html.Div([
html.Label('Select a simulation:'),
dcc.Dropdown(
id = 'sim-filter',
options = simulations,
value = df_ts['SimId'].max(),
clearable = False,
multi= False
)
], style={'width': '15%', 'padding':'5px 5px'}
),
html.Div([
dcc.Graph(id = 'overview', figure = {})
], style={'width': '49%', 'display': 'inline-block', 'padding': '0 5'}),
html.Div([
dcc.Graph(id = 'events', figure = {}, clickData=None)
], style={'width': '49%', 'display': 'inline-block'})
])
My call backs are :
@app.callback(
Output('overview', 'figure'),
Output('events','figure'),
Input('sim-filter', 'value')
)
def update_graph(selected_sim):
dff_ts = df_ts[(df_ts.SimId==selected_sim) & df_ts.Attribute.isin(vitals)].copy()
fig_line = px.line(
dff_ts,
x = 'SimulationTime',
y = 'Value',
color = 'Attribute',
)
dff_sessions = df_sessions[df_sessions.SimId == selected_sim].copy()
fig_session = px.scatter(
dff_sessions,
x = 'SimulationTime',
y = 'EventRank',
color = 'Source',
)
return fig_line, fig_session
@app.callback(
Output('overview', 'figure'),
Input('events', 'clickData'),
Input('sim-filter', 'value')
)
def update_line_graph(clk_data, selected_sim):
if clk_data is None:
dff2_ts = df_ts[(df_ts.SimId==selected_sim) & df_ts.Attribute.isin(vitals)].copy()
print(dff2_ts)
fig_clk = px.line(
dff2_ts,
x = 'SimulationTime',
y = 'Value',
color = 'Attribute',
)
return fig_clk
else:
print(clk_data['points'][0]['customdata'][0])
print(f'click data: {clk_data}')
dff2_ts = df_ts[(df_ts.SimId==selected_sim) & df_ts.Attribute.isin(vitals)].copy()
clk_sim = clk_data['points'][0]['x']
dff2_ts = dff2_ts[dff2_ts['SimulationTime'] >= clk_sim]
fig_clk = px.line(
dff2_ts,
x = 'SimulationTime',
y = 'Value',
color = 'Attribute'
)
return fig_clk
This renders my two graphs blank. When I comment in the second callback, my graphs are shown as intended. Something in the second callback is hindering the display somehow
EDIT:
Debug error:
In the callback for output(s):
overview.figure
Output 0 (overview.figure) is already in use.
Any given output can only have one callback that sets it.
To resolve this situation, try combining these into
one callback function, distinguishing the trigger
by usingdash.callback_context
if necessary.