Hi all,
I have created a navigation page containing two nav bars.
The role of nav bars is to plot scatter chart and bar chart for page 1 and page2 respectively.
But everytime I am switching back and forth , the page displays the chart for initial values (dcc.Dropdown(value)) I set rather than the last chart I have made.
How can I show the last chart that the user made with different features?
import dash
from dash.dependencies import Input, Output, State
from dash import dcc, html, dash_table
import pandas as pd
import seaborn as sns
dd=sns.load_dataset('anscombe')
import dash_bootstrap_components as dbc
import matplotlib.pyplot as plt
import plotly.express as px
from jupyter_dash import JupyterDash
import dash_ag_grid as dag
df=px.data.gapminder()
df.head()
x=list(df.select_dtypes(include='number').columns)
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
"position": "fixed",
"top": 0,
"left": 0,
"bottom": 0,
"width": "16rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
}
# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
"margin-left": "18rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
}
sidebar = html.Div(
[
html.H2("Sidebar", className="display-4"),
html.Hr(),
html.P(
"A simple sidebar layout with navigation links", className="lead"
),
dbc.Nav(
[
dbc.NavLink("Home", href="/", active="exact"),
dbc.NavLink("Page 1", href="/page-1", active="exact"),
dbc.NavLink("Page 2", href="/page-2", active="exact"),
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
content = html.Div(id="page-content", style=CONTENT_STYLE)
app.layout = html.Div([dcc.Location(id="url"), sidebar, content])
#page1 layout
page1= html.Div([
html.H2("Page1", style={"textAlign": "center"}),
dbc.Row([
dbc.Col([dbc.Label("feature1"),dcc.Dropdown(id='d1',options=x,value=x[0])],width=4),
dbc.Col([dbc.Label("feature2"), dcc.Dropdown(id='d2',options=x,value=x[1])], width=4)
]),
html.Div([dcc.Graph(id='out1')])
]),
# page2 layout
page2= html.Div([
html.H2("Page2", style={"textAlign": "center"}),
dbc.Row([
dbc.Col([dbc.Label("feature1"),dcc.Dropdown(id='d3',options=x,value=x[0])],width=4),
dbc.Col([dbc.Label("feature2"), dcc.Dropdown(id='d4',options=x,value=x[1])], width=4)
]),
html.Div([dcc.Graph(id='out2')])
]),
#navigation bar callback
@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
if pathname == "/":
return html.P("Main Page. Select other tabs to see the results")
elif pathname == "/page-1":
return page1
elif pathname == "/page-2":
return page2
# If the user tries to reach a different page, return a 404 message
return html.Div(
[
html.H1("404: Not found", className="text-danger"),
html.Hr(),
html.P(f"The pathname {pathname} was not recognised..."),
],
className="p-3 bg-light rounded-3",
)
#page1 callback
@app.callback(Output('out1','figure'),[Input('d1','value'),Input('d2','value')])
def fun(a,b):
fig=px.scatter(data_frame=df,x=a,y=b)
return fig
#page2 callback
@app.callback(Output('out2','figure'),[Input('d3','value'),Input('d4','value')])
def fun(a,b):
fig=px.bar(data_frame=df,x=a,y=b)
return fig
if __name__=='__main__':
app.run_server(port='8347')