Hello -
I’m having trouble consistently firing callback from graph click events when I have a tabbed application with a graph on each page. When the below site loads, clicking on the first tabs’ chart will fire an event. However the second tab’s callback won’t fire after switching to the second chart and clicking the graph. Additionally, then returning to the first tab, and re-clicking on the graph, the previously working call back no longer fires as well.
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import numpy as np
app = dash.Dash('test')
server = app.server
app.scripts.config.serve_locally = True
data = pd.DataFrame(np.random.randint(0,10,(100,2)), columns = ['data1','data2'])
def update_chart(*input_data):
figure = {'data':
[{
'x': data.index,
'y': data['data1'], # .values.tolist(),
'customdata': "",#,"[name] * len(to_plot.index),
'type': 'scatter',
'mode': 'lines',
'line': {'width': 1},
'showlegend': True,
'name': 'test_data'
}]
,
'layout': {
'margin': {'b': 30, 'r': 30, 'l': 30, 't': 30},
#'legend': {'x': 0},
'xaxis': {'fixedrange': True},
'yaxis': {'fixedrange': True, 'hoverformat': '.4f'},
'animate': True ,
'hovermode': 'closest',
# 'legend': dict(x=-.4, y=1)
}}
return figure
app.layout = html.Div(
[dcc.Tabs(id="tabs", children=[
dcc.Tab(id ="one", children = [
dcc.Graph(id = 'graphone', figure = update_chart()),
dcc.Input(id = 'inputone')
]),
dcc.Tab(id = "two", children = [
dcc.Graph (id = 'graphtwo', figure=update_chart()),
dcc.Input(id='inputtwo')
])
])])
@app.callback(dash.dependencies.Output('inputone', 'value'),
[dash.dependencies.Input('graphone', 'clickData')])
def clicktab1(*input_data):
print('click tab 1')
print(input_data)
return 0
@app.callback(dash.dependencies.Output('inputtwo', 'value'),
[dash.dependencies.Input('graphtwo', 'clickData')])
def clicktab2(*input_data):
print('click tab 2')
print(input_data)
return 0
if __name__ == '__main__':
app.run_server(port=8049, debug=False)