I am trying to create multi-tab app with multiple figures. In which if you clicked in figure of one tab it will update the figure in another tab. I am able to create the figure by rendering through different tabs but when I am clicking on the figure of one-tab then the figure of another tab is not getting updated. I am using below code any help is very much appreciated
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go
import os
dt1 = pd.read_excel('dt1.xlsx')
dt2 = pd.read_excel('dt2.xlsx')
dt3 = dt2.groupby('Cat')['Val'].mean().reset_index()
app = dash.Dash()
app.layout = html.Div([
dcc.Tabs(id="tabs", value='tab-1', children=[
dcc.Tab(id = 'tab_1',label='Tab one', value='tab-1'),
dcc.Tab(id = 'tab_2',label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-content')
])
@app.callback(Output('tabs-content', 'children'),
[Input('tabs', 'value')])
def render_content(tab):
if tab == 'tab-1':
return html.Div([
dcc.Graph(
id='dt1-plot',
figure={
'data': [
go.Pie(labels=list(dt1['Year']), values=list(dt1['Val']))],
'layout': go.Layout(
title = 'Yearwise Chart',
hovermode='closest'
)
}
)], style={'width':'100%','display':'inline-block'})
elif tab == 'tab-2':
return html.Div([
dcc.Graph(id='dt2-plot',
figure={
'data': [
go.Bar(
x = dt3['Cat'],
y = dt3['Val']
)
],
'layout': go.Layout(
title='Count of Category',
xaxis = {'title': 'Category'},
yaxis = {'title': 'Frequency'},
hovermode='closest'
)
}
)], style={'width':'100%','display':'inline-block'})
@app.callback(Output('tabs-content', 'children'), [Input('tab', 'value')])
def display_content(selected_tab):
return html.Div([
html.H1(selected_tab),
dcc.Graph(id='dt2-plot', figure=update_bar(selected_tab))
])
def update_bar(clickData):
year = clickData['points'][0]['label']
dt = dt2[dt2['Year'] == int(year)]
figure={
'data': [
go.Bar(
x = dt['Cat'],
y = dt['Val']
)
],
'layout': go.Layout(
title='Count of Category',
xaxis = {'title': 'Category'},
yaxis = {'title': 'Frequency'},
hovermode='closest'
)
}
return figure
@app.callback(
Output('dt2-plot', 'figure'),
[State('tab', 'value')]
)(update_bar)
if __name__ == '__main__':
app.run_server()