Multipage Dashboard Using Dash and Plotly

Dash Python
1

Hello! I am developing a Multipage Dashboard related to cricket using Plotly and Dash in Python. I have made three separated dashboard for the followings: Teams, Venues and Players(Batsman & Bowlers). These pages contain several graphs and maps. Now, I want to connect these scripts together like what we do in HTML(using href tag linking of multiple pages). But I can’t find any solution regarding this. If anybody knows how to do this it will be really helpful.

2

Hi @Sawon and welcome to the Dash forum!

That sounds like a cool dashboard. Check out https://dash.plotly.com/urls to learn more about making multi-page apps

3

Thanks, @AnnMarieW I have checked that part but didn’t get any clear solution. The description is not that clear.

4

Hi @Sawon…here are more detailed instructions:

On the link I suggested, start at the section that says “Structuring a Multi-Page App” and follow each step.

  1. Set up new folders with the file structure as shown. For now even keep the same names.

  2. Copy and paste the code for app.py and index.py and place these in the main folder as shown.

  • In index.py, change the last line in the callback to be the layout of the app you want to start with, rather than returning ‘404’ as in the example. When it runs locally it always seems to start there. So if you want to start at app1, then your callback will look like this:
@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    
    if pathname == '/apps/app1':
        return app1.layout
    elif pathname == '/apps/app2':
        return app2.layout
    else:
        return app1.layout
  1. Next make a copy of your 2 favorite apps and put them in the apps folder. Rename them app1 and app2.

  • Delete the import dash from app1 and app2 because dash is now imported in app.py . Include in both apps : from app import app

  • Change the layout in app1 and app2 so that instead of it being app.layout = ..... it’s just layout=....
    (This is because app.layout=.... is now located in index.py)`

  • In app1 include this in the layout: dcc.Link('Go to App 2', href='/apps/app2')

  • In app2 include this in the layout: dcc.Link(‘Go to App 1’, href=’/apps/app1’)

  • Make sure that the ids for any component in a callback are unique across all pages. For example, if you have a dropdown in both app1 and app2, they can’t both have id=‘my-dropdown’

  • Include in the apps folder an empty file called __init__.py

  1. Run index.py. Like magic, you will have a multi-page app
5

@AnnMarieW thank you very much I finally figured out how to build the multipage app. Thanks a lot.

1 Like