Quite some posts have discussed the matter, but nothing to solve my problem. The problem is the ‘error loading layout’ in the browser when running the multi-page dash app. In the terminal I have no error.
my app is based on the 'towards data science’article: Callbacks, Layouts, & Bootstrap: How to Create Dashboards in Plotly Dash | by Mitchell Krieger | Towards Data Science
I already have re-installed the different modules and have started all over again, all without a satisfying result.
My code is:
app.py
import dash
app = dash.Dash(__name__, suppress_callback_exceptions=True)
server = app.server
index.py
from dash import dcc
from dash import html
from dash import Output, Input
from app import app
from layouts import navbar
from layouts import layout_overview, layout_comparison, layout_analysis
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
navbar(),
html.Div(id='page-content')
])
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/':
return layout_overview
elif pathname == '/overview':
return layout_overview
elif pathname == '/comparison':
return layout_comparison
elif pathname == '/analysis':
return layout_analysis
else:
return '404'
if __name__ == '__main__':
app.run_server(port='5000', host='127.0.0.1', debug=True)
layout.py (under construction)
from dash import dcc
from dash import html
import pandas as pd
########################################
# Add Data
########################################
df = pd.read_csv('C:\\Users\\StefanSijbesmaDAAT\\Documents\\Scripting\\Test\\assets\\Life expectancy.csv')
years = df['Year'].unique()
country=df['Entity'].unique()
########################################
# Create Auxiliary Components Here
########################################
def navbar():
html.Nav([ # navbar on top of the dashboard using html components
dcc.Link(
html.H4('Overview'),
href='/overview',
style={
'display': 'inline-block',
'margin-right': '30px'
}
),
dcc.Link(
html.H4('Comparison'),
href='/comparison',
style={
'display': 'inline-block',
'margin-right': '30px'
}
),
dcc.Link(
html.H4('Analysis'),
href='/analysis',
style={
'display': 'inline-block',
'margin-right': '230px'
}
),
], className='navbar'),
return navbar
########################################
# Create Page Layouts Here
########################################
### Layout Overview
layout_overview = html.Div('overview'
)
### Layout Comparison
layout_comparison = html.Div('comparison'
)
### Layout Analysis
layout_analysis = html.Div('analysis'
)
callbacks.py
still empty
Can anyone please point me in the right direction?
Thanks in advance.