Plotly-dash - update graphs in tabs

Question

I like to put plotly graph1 in tab1 and graph2 in tab 2, but there is no trace visible.

Why are traces not visible?

The graph in tab2 is also showing no traces.

It would be great to know whats wrong. Simular example code would also be a big help. Many thanks

''' import pandas as pd import numpy as np import plotly.express as px import dash import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output import plotly.graph_objs as go import requests import dash_bootstrap_components as dbc

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

#fig1 = px.line(title='title1')
#fig2 = px.line(title='title2')

app.layout = dbc.Container(fluid=True, children=[
html.H1('Title',id="Titel",className='ml-1',style={'text-align': 'center', 'font-weight': 'bold', 'text-decoration': 'underline'}),
## Body
dbc.Row([
    dbc.Col(md=6,children=[

            html.Br(),html.Br(),

                    dbc.Col(md=9, children=[
                    dbc.Col(html.H4("graphs in tabs"), width={"size":6,"offset":3}),
                        dbc.Tabs(className="nav nav-pills", children=[
                                dbc.Tab(dcc.Graph(id="grafiek1"), label="tab1"),
                                dbc.Tab(dcc.Graph(id="grafiek2"), label="tab2")
                                ])
                    ])

    #html.Div(id="tab-content", className="mx-auto"),  #m=marge    p=padding  0-5 of auto   vb: P-4


                           ]),  # einde kolom 1

    dbc.Col(md=6,children=[


                           ]),  # einde kolom 2


            ]), #einde rij

])
#,style={"background-image": 'url(image)'})


@app.callback(
    Output("grafiek1", "figure"),
    [Input("tabs", "active_tab")])

def tab_content(active_tab):

    if active_tab is not None:
        if active_tab == "tab1":

            fig1 = go.Figure()
           fig.add_trace(go.Scatter(x=df['Date'], y=df['AAPL.Low'], mode='markers', name='data', line={"color":"black"}))
               ## add slider
            fig.update_xaxes(rangeslider_visible=True)
        ## set background color
           fig.update_layout(plot_bgcolor='white', autosize=False, width=1000, height=550)

           return fig1

@app.callback(
    Output("grafiek2", "figure"),
    [Input("tabs", "active_tab")])

 def tab_content(active_tab):

     if active_tab is not None:
       if active_tab == "tab2":
           fig2 = go.Figure()
           fig.add_trace(go.Scatter(x=df['Date'], y=df['AAPL.High'], mode='markers', name='data', line={"color":"black"}))
            ## add slider
           fig.update_xaxes(rangeslider_visible=True)
           ## set background color
           fig.update_layout(plot_bgcolor='white', autosize=False, width=1000, height=550)

           return fig2
if __name__ == '__main__':
app.run_server(debug='True')

'''

5eb · Answer 1 · 2021-05-30T21:28:30.183

The 'tabs' id you reference in your callbacks doesn't exist in your layout. Dash doesn't tell you about this because you do this

app.run_server(debug='True')

instead of

app.run_server(debug=True)

You also check if active_tab equals "tab1" in the first callback and "tab2" in the second, but the active_tab prop of your Tabs component isn't set to either of these values. The default active_tab value for the first tab is actually tab-0.

active_tab (string, optional): The tab_id of the currently active tab. If tab_id has not been specified for the active tab, this will default to tab-i, where i is the index (starting from 0) of the tab.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tabs/

Since this if statement fails nothing is returned from either callback.

Also the callback function have the same function name, this is not allowed.

Lastly in both callbacks you create a figure, but you add the trace to another figure, so the trace also doesn't show up because you're returning an empty figure.

So instead you could do something like this:

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.graph_objects as go

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv"
)

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    fluid=True,
    children=[
        html.H1(
            "Title",
            id="Titel",
            className="ml-1",
            style={
                "text-align": "center",
                "font-weight": "bold",
                "text-decoration": "underline",
            },
        ),
        dbc.Row(
            [
                dbc.Col(
                    md=6,
                    children=[
                        html.Br(),
                        html.Br(),
                        dbc.Col(
                            md=9,
                            children=[
                                dbc.Col(
                                    html.H4("graphs in tabs"),
                                    width={"size": 6, "offset": 3},
                                ),
                                dbc.Tabs(
                                    id="tabs",
                                    className="nav nav-pills",
                                    children=[
                                        dbc.Tab(
                                            label="tab1",
                                            children=[dcc.Graph(id="grafiek1")],
                                        ),
                                        dbc.Tab(
                                            label="tab2",
                                            children=[dcc.Graph(id="grafiek2")],
                                        ),
                                    ],
                                ),
                            ],
                        ),
                    ],
                ),
                dbc.Col(md=6, children=[]),
            ]
        ),
    ],
)


@app.callback(Output("grafiek1", "figure"), [Input("tabs", "active_tab")])
def tab_content1(active_tab):
    if active_tab is not None:
        if active_tab == "tab-0":
            fig1 = go.Figure()
            fig1.add_trace(
                go.Scatter(
                    x=df["Date"],
                    y=df["AAPL.Low"],
                    mode="markers",
                    name="data",
                    line={"color": "black"},
                )
            )

            return fig1
    return go.Figure()


@app.callback(Output("grafiek2", "figure"), [Input("tabs", "active_tab")])
def tab_content2(active_tab):
    if active_tab is not None:
        if active_tab == "tab-1":
            fig2 = go.Figure()
            fig2.add_trace(
                go.Scatter(
                    x=df["Date"],
                    y=df["AAPL.High"],
                    mode="markers",
                    name="data",
                    line={"color": "black"},
                )
            )
            # add slider
            fig2.update_xaxes(rangeslider_visible=True)
            # set background color
            fig2.update_layout(
                plot_bgcolor="white", autosize=False, width=1000, height=550
            )

            return fig2
    return go.Figure()


if __name__ == "__main__":
    app.run_server(debug=True)

Plotly-dash - update graphs in tabs

1 Answers1