Creating Multi-tab app with clickData functionality

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()

Hi! I have similar issues, once I click the tabs it looks that it does not recognize when you click the dcc.Graph. Did you solved it?

Hi Miguel,

We are not able to resolve issue.

Regards,

Abhinav Mishra

Hi Abhinav, do you think that we can do the same with Radio items?

Hey Miguel,

You can try that or you can create multiple pages. Interaction within a page will work but not b/w pages.

Regards,

Abhinav

1 Like

Thanks! I’ll try!
Best regards

Hi! I can’t get the example code to run - from the looks of things you’ve got 2 callbacks with tabs-content.children as output - and one has tab.value as an input - however, I don’t see any components with a tab id. Could you perhaps give a smaller reproducable example? Thanks in advance!

Could it be that changing tab to tabs on line 63 in the Input call solves the issue?