Graph in tabs problem

Dash Python
1

I have two tabs and want to show a different graph in both tabs, but there is no graph showing at all. I was wondering what i did wrong?

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

app.layout = dbc.Container(fluid=True, children=[

#html.Img(id='image', src='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.Tabs(
                    [
                        dbc.Tab(label="figure1", tab_id="fig1"),
                        dbc.Tab(label="figure2", tab_id="fig2"),
                    ],
                    id="tabs",
    ),
    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(“tab-content”, “children”),
[Input(“tabs”, “active_tab”)])

def tab_content(active_tab):

if active_tab and data is not None:
    if active_tab == "fig1":
        fig = dcc.graph(px.line(
                        df,
                        x='Date',
                        y='AAPL.Low'
                        ))

    elif active_tab == "fig2":
        fig = dcc.graph(px.line(
                        df,
                        x='Date',
                        y='AAPL.High'
                        ))

    return fig

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

2

Graph data is not retrieved; i also tried…

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.Img(id='image', src='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 = px.line(
                        df,
                        x='Date',
                        y='AAPL.Low',
                        title='title1'
                        )

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 = px.line(
                        df,
                        x='Date',
                        y='AAPL.High',
                        title='title2'
                        )
return fig2

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

3

Also tried this ; i wonder why graphs are not visible?

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.Img(id='image', src='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’)