Black Lives Matter. Please consider donating to Black Girls Code today.

How to change outputs in two tabs using one input button in dash?

Hi I am new to Dash. I am building a dashboard. In the dasboard, I have data in excel file. The dash has two tabs. I have set an input button in 1st tab. Now I want that when an input is done in the button and Submit is pressed, the outputs on both the tabs must change. Right now only Tab1 is getting impacted. The first tab has a few graphs and second has a few tables. is it possible to do this ?

Kindly help.

Try creating the store value in the tab you want to be impacted. Then,try to use callback to impact the value.Hope it helps!

Hey sam. Thanks for your response. Though I am not able to understand it. Please help me with the same.
Here is my code. What are the changes that I must do ?

df1=pd.read_excel("...")

app.layout = html.Div([dashboard,
                            html.Div(
                                dcc.Input(id='AgentID', type='text')),
                                html.Button('Submit', id='button'),
                       dcc.Tabs(id="tabs-example", value='tab-1-example',
                                children=[
                                    dcc.Tab(label='Tab1', value='tab-1'),
                                    dcc.Tab(label='Tab2', value='tab-2')
                                    ],
                   ],html.Div(id='output-tab'))

   @app.callback(
       dash.dependencies.Output('output-tab', 'children'), 
       [dash.dependencies.Input('button', 'n_clicks')], 
       [dash.dependencies.State('AgentID', 'value')])

   @app.callback(Output('tabs-content-example', 'children'),
        [Input('tabs-example', 'value')])

   def update(n_clicks, value):
        if n_clicks == None:
           df = df1.copy()
        else:
           df = df1[df1['ID'] == value]

   #. . .  plots...#

     def render_content(tab):
         if tab == 'tab-1':
             return html.Div(
                             className="row",
                             children= [
                                        html.Div(
    # ...................plotting the graphs.................#

     elif tab == 'tab-2':
        return html.Div

     if __name__ == '__main__':
         app.run_server()

just use children attribute of Tabs and create dcc.Graph(id=‘graph1’) and dcc.Store(…).Under the layout mention the output as graph1.

Dear Sam,
In the code, the graphs in Tab 1 are being created by using variables and not dataframe. Also the second tab has a few tables that must get changed as per the filtered dataframe.

So as you said, create dcc.Graph(id=‘graph1’) is not working.
Request you to please suggest a solution for the same.

@ajeeteshmishra
Your code has several small mistakes: the spacing indent of the function is off, each defined function should come right after a callback, the “tabs-content-example” component id appears for the first time inside the callback decorator, the values in the dcc.Tabs and dcc.Tab are misaligned, and a few more.

And it’s not completely clear to me what you need. I suggest start with a simpler version. Just build a simple app with two tabs; then, try to add a drop-down and a table to one tab; then add the same table to the second tab; then, try to connect both.

I’ll try to help along the way, but my recommendation is to review the basics first.

Dear Adam,

As per your advice, I have this code now. An excel file is there which has 3 columns and now on basis of dropdown it is filtering Agent ID columna and generating table-

Now I want to add 2 tabs, where the 1st tab has two columns and 2nd tab has two columns. On the basis of dropdown, I want the data to get filtered and then the outputs on tab. How to go about the same ?

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

df = pd.read_csv(“C:\Users\jkj58426\Desktop\Dashlibraries\sample_data.csv”)

agents= df[“Agent_ID”].unique()

def generate_table(dataframe, max_rows=10):
return html.Table(
# Header
[html.Tr([html.Th(col) for col in dataframe.columns])] +

    # Body
    [html.Tr([
        html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
    ]) for i in range(min(len(dataframe), max_rows))]
)

app = dash.Dash()

app.layout = html.Div (children=[
html.H4(children=‘Dash testing’),
dcc.Dropdown(id=‘dropdown’, options=[
{‘label’: i, ‘value’: i} for i in agents
]),
html.Div(id=‘table-container’)
])

@app.callback(
dash.dependencies.Output(‘table-container’, ‘children’),
[dash.dependencies.Input(‘dropdown’, ‘value’)])
def display_table(dropdown_value):
if dropdown_value is None:
return generate_table(df)

dff = df[df['Agent_ID']==dropdown_value]
return generate_table(dff)

if name == ‘main’:
app.run_server(…)

@ajeeteshmishra
Can you please put all your code in one block of preformatted text so it’s easier to read.

What is the error message you’re getting when trying to execute the code?

Dear Sam,
Due to workplace policies, I cannot share the code on public platform.
I will try to state the objective- I have an excel file. Now this file is being used to create dash.
There are two tabs- Tab 1 has few graphs and Tab 2 has few tables.
Now I want to insert an input button, where this button filters data from original dataframe. So that this dataframe can be used in both the tabs.
I have been successful in filtering data where on entering in Input button, the graphs of Tab 1 are getting updated. But the issue arises when I am trying to connect tabs. As the tabs are getting inserted, the graphs on 1st tab as well stop getting shown.

So if you can help me with a code that addresses the above issue.
Also if we can connect on email or something, then I can share the code.

Hoping for a favourable response from your end.

Try this link. It appears to be trying the same thing you are:

Sharing data btw tabs

Dear Sam,

I am trying to build the dash in a different way. On one page I want to put the dropdown and on other I want to display the tabs.
For this purpose, I came across an example, where there are two pages.

import dash
import dash_core_components as dcc
import dash_html_components as html

print(dcc.__version__) # 0.6.0 or above is required

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])


index_page = html.Div([
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
])

page_1_layout = html.Div([
    html.H1('Page 1'),
    dcc.Dropdown(
        id='page-1-dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='page-1-content'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
    html.Br(),
    dcc.Link('Go back to home', href='/'),
])

@app.callback(dash.dependencies.Output('page-1-content', 'children'),
              [dash.dependencies.Input('page-1-dropdown', 'value')])
def page_1_dropdown(value):
    return 'You have selected "{}"'.format(value)


page_2_layout = html.Div([
    html.H1('Page 2'),
    dcc.RadioItems(
        id='page-2-radios',
        options=[{'label': i, 'value': i} for i in ['Orange', 'Blue', 'Red']],
        value='Orange'
    ),
    html.Div(id='page-2-content'),
    html.Br(),
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go back to home', href='/')
])

@app.callback(dash.dependencies.Output('page-2-content', 'children'),
              [dash.dependencies.Input('page-2-radios', 'value')])
def page_2_radios(value):
    return 'You have selected "{}"'.format(value)


# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    elif pathname == '/page-2':
        return page_2_layout
    else:
        return index_page


if __name__ == '__main__':
    app.run_server(debug=False,port=1244,host = '0.0.0.0')

In this code, on page 2, there are Radio buttons. What I want is that Page 1 remains as it is to display on Page 2 'You selected Value". That is the value selected on page 1. That is to remove the radio buttons and bring the value selected on Page 1 to Page 2.
Please help me with this.