How to Make a Python Multi Page Application with Plotly Dash

Рет қаралды 25,009

Күн бұрын

Create a multi page app in Python using Plotly Dash. This is an introduction to multi-page Python Apps, focused on getting you started with a basic but solid web app. In future videos, we'll expand and enhance the app, as I teach you to read the Dash documentation and understand more advanced features of a multipage app.
Join the Community:
charming-data.com/
My GitHub Code:
github.com/Coding-with-Adam/D...
Multipage Dash Docs:
dash.plotly.com/urls#dash-pages
Plotly Forum:
community.plotly.com/
Video layout:
00:00 - What you will learn and code
02:01 - App Folder Structure
02:57 - Page 1
06:13 - Page 2 and Page 3
07:33 - App.py to connect all pages
11:35 - Displaying content of each page
13:13 - Future multipage tutorial videos
************************************************************************
👉 Your support keeps Charming Data running, which is proudly a 100% member-supported educational channel:
Patreon: / charmingdata
GitHub: github.com/sponsors/Coding-wi...
KZfaq: / @charmingdata

Пікірлер: 88

@CharmingData 5 ай бұрын

Join the Charming Data Community -- charming-data.com/ -- to learn more data viz, data apps, and AI integrations.

@mikedecherd8666 Жыл бұрын

This is something I have been wanting to do for while. Thanks for sharing this video, I am looking forward to to the rest of the series. I will be following closely.

@MakeDataUseful Жыл бұрын

Fantastic! I’ve been writing spaghetti code with callbacks. Always appreciated Adam, keep the great work!

@CharmingData Жыл бұрын

Thank you Adam . Nice channel you have there 💪

@MakeDataUseful Жыл бұрын

@@CharmingData Thanks Adam! I am loving your channel. I need to get making more videos. I think my next one should be a brief intro to Dash and send folks your way!

@WhiteLemon_Official 9 ай бұрын

Hi your content works like a charm for me, I am starting to love the dash framework because of you. The explanation of each function is very informative and easy to understand. Thank youu. i keep learning ang growing everytime I watch in your channel

@waynep610 Жыл бұрын

Thanks for your work!

@CharmingData Жыл бұрын

My pleasure! Thank you so much for your support Wayne.

@nishantkumar-lw6ce Жыл бұрын

Expecting more in this series:)

@CharmingData Жыл бұрын

Thanks for watching, @nishant. Definitely, more videos coming in the next couple of weeks.

@NoWhiteGullibility Жыл бұрын

Much cleaner than the old way of doing it with callbacks 👍

@johaojav9812 Жыл бұрын

You are amazing ♥

@elisealstad1698 Жыл бұрын

Thanks so much! I have been watching all your videos and have managed to create a dashboard for work. I was wondering how to employ the dashboard? I am using sensitive work data that I am updating at regular intervals from sql using apscheduler. Since the data is sensitive, I was hesitant to use Heroku which I know you have recommended. Is it "safe" to use Heroku? Or would you recommend another method for employment, or maybe I need to ask a developer at my company to assist me? Thanks again for your videos. They are so helpful!!

@sciduck8472 Жыл бұрын

🔥

@kevinshaji3723 9 ай бұрын

when you create an executable, how would we include the pages?

@inspecteurbane5666 Жыл бұрын

Hello, always very interesting looking forward to this series. ✌ Do you know the django-plotly-dash lib? I am discovering it rn. I don't know what it's worth but it looks like it would match with this series quite well Thanks for all your tutorial, i watched a lot of them and i am very proud i managed to do the app I wanted to do thanks to you! 🙌

@infojakarta4342 Жыл бұрын

when i added new page, i got this error: raise PageError("`dash.register_page()` must be called after app instantiation") dash.exceptions.PageError: `dash.register_page()` must be called after app instantiation

@CharmingData Жыл бұрын

Hi, make sure you have the latest version of Pages/Dash installed and that you have the register.page in the right location

@user-zj8ez8ps5x 11 ай бұрын

can you please make a video about off-canvas where i will put the link of the page for creating multi page app. Also want to use dash.register_page() and page_container().i am new in dash .. instead of Location.if you it will be great .

@Dave-fv1tt Жыл бұрын

Great channel to learn dash! Could you make videos about the following topics? 1) use server side caching to boost performance 2) add login, logout and register account functionality to a dash app Thanks!

@Dave-fv1tt Жыл бұрын

@Charming Data

@fampirowski1 Жыл бұрын

Ok i would have a question :-), what about callbacks in the context of subpages? where should I put them ?

@CharmingData Жыл бұрын

hi Marcin, what do you mean by subpages? Are you referring to pages nested within other pages?

@WhiteLemon_Official 9 ай бұрын

May I ask if we can pass a variable in multipage? lets say I have a login page, then I will move the username into page 2. something like that.

@CharmingData 9 ай бұрын

hi there, you can use dcc.Store. Just make sure to declare it in the main app.py page

@pykinggoogle6383 Жыл бұрын

Can you comment regarding your choice of dcc.Link instead of dbc.Nav? They seem to perform very similar functions.

@CharmingData Жыл бұрын

hi @pyking. There is actually no special reason. I used dcc.Link for simplicity reason and because it's a Dash Core Component, so no need to import Dash Bootstrap Components. But dbc.Nav is really good. I would recommend using this dbc.Nav

@justenyirimana528 Жыл бұрын

Great content Adam. In this series, is it possible to show how this app can be created with a sidebar. I'm having issues connecting the dots on how I would structure my pages if I added a sidebar. Thanks.

@CharmingData Жыл бұрын

Yes. The next video in this series, I'll convert this app to a sidebar that is hidable, like an offcanvas

@shobhangiverma7090 4 ай бұрын

How can we call multiple python file and their function and after clicking button multiple output I can give ?

@CharmingData 4 ай бұрын

I'm sorry I don't understand the question.

@dharmini9103 Жыл бұрын

Hi! I love your videos and they have helped me so much with my job as a data analyst. I was wondering if you could make a video about inserting a dropdown (using dash) with a scatter plot? I have gone through the two separate videos which you have made on the topic (scatter plot and dashboard) but can't figure out how to merge the two

@CharmingData Жыл бұрын

You mean have a drop-down that updates s scatter plot?

@dharmini9103 Жыл бұрын

@@CharmingData Yes! So that the x and y coordinates remain constant...but the third variable that determines the plot changes through drop down

@CharmingData Жыл бұрын

@@dharmini9103 What is that third variable? are you referring to color?

@dharmini9103 Жыл бұрын

@@CharmingData Yes...I just want the color variable (which represents a particular trait like Gender/Bloodtype/Ethnicity) to get updated by the drop down

@CharmingData Жыл бұрын

@@dharmini9103 have the dropdown options be a representation of those traits: gender, blood type, etc. Then, in the callback use the option selected by user to assign it to the colour property of the scatter graph

@quimicamaxima 8 ай бұрын

Thanks. How to share data between pages? Upload on one page and graphs and analysis on another page.

@CharmingData 8 ай бұрын

Hey there, use the dcc.store() by putting it on the main app.py page

@Genologic 9 ай бұрын

How come PyPi only has dash v2.13.0? I don’t have the multi page feature in this version and I really need it for my project.

@CharmingData 9 ай бұрын

Dash 2.13 does include the multi page feature.

@ghitadahhou8972 Жыл бұрын

Hi Adam, I'm building a large dashboard with multiple pages and i followed all your instructions but when i ran it the're is an error in the dash app like : they can't find the id component in callback , in layout. I don't understand because i'm sure i define it

@CharmingData Жыл бұрын

Hi @Ghita, you probably just misspelled the ID or forgot to add it to the layout.

@ayomideakinwande792 Жыл бұрын

Nice content, how do you add other .py files that contains custom functions for the app?

@CharmingData Жыл бұрын

That's a great question. I wonder if you can add them to the same pages folder but don't call them into the links generated on the app.py file

@ayomideakinwande792 Жыл бұрын

@@CharmingData alright, I will try that.

@harshagrawal9346 Жыл бұрын

Hi Adam, I had a question if you could please help me with. My dash app has around 6 pages, each page is getting its data via rest API calls which makes it a bit slower as it all loads at start before the app start running. Could you please tell me how is it possible to load the data of a particular page only when the user selects that particular page, kind of load on demand type of thing.

@CharmingData Жыл бұрын

hi, I can ask a friend of mine tomorrow because I think she would know better.

@harshagrawal9346 Жыл бұрын

@@CharmingData thanks for your reply, it would be great if you could help. Thanks a lot Adam

@CharmingData Жыл бұрын

@@harshagrawal9346 my friend said: be sure to set supress_callback_exceptions=True and use the latest Dash version. app = Dash(__name__, use_pages=True, suppress_callback_exceptions=True)

@mengtingke3673 Жыл бұрын

Just wondering is this function possible to combine with sidebar-NavLink from dash_bootstrap_components?

@CharmingData Жыл бұрын

hi @MENG TING KE. Yes, I think this should work. Instead of my current connection to navbar: html.Div([ dcc.Link(page['name']+" | ", href=page['path']) for page in dash.page_registry.values() ]), you would do: dbc.Nav( [ dbc.NavLink(page['name'], href=page['path'], active="exact") for page in dash.page_registry.values() ], vertical=True, pills=True, )

@mengtingke3673 Жыл бұрын

@@CharmingData Thank you Adam, it works! Also saw your latest video talks about the same topic :)

@StevMetalero Жыл бұрын

there is a way to do this and each page have their own callbacks? this work on dash 2.5.1?

@CharmingData Жыл бұрын

hi Ztev, yes. Each page can have its own callback..

@ayodejienoch1110 Жыл бұрын

Hello @Charming data , I deployed my multi page app with dashtools but it keep showing application error whenever I open the app, any help please 🙏

@CharmingData Жыл бұрын

Hi, can you please share your code and file structure with me at adam@charming-data.com

@eolpraise Жыл бұрын

Hi! I tried running the app.py but I have an error from Dash " Dash() got an unexpected keyword argument 'use_pages' " Did anyone else face the same error?

@eolpraise Жыл бұрын

solved, I had to upgrade to dash 2.6.1

@alex92620 Жыл бұрын

Great intro. Thanks. I tried your app_a scripts but it seems that only pg3.py is registered. When I iterate over dash.page_registry.values(), I can only see values related to pg3. Any suggestions? Thank you.

@CharmingData Жыл бұрын

Hi @Jan, I answered your email.

@olahalfman-halfamazing2895 Жыл бұрын

@@CharmingData I have the same issue, could you please share how to fix this - Many Thanks in Advance!!

@CharmingData Жыл бұрын

@@olahalfman-halfamazing2895 Hi, What operating system are you using, and what version of Dash do you have? is it dash 2.6.1?

@olahalfman-halfamazing2895 Жыл бұрын

@@CharmingData Thanks for getting back, I'm currently using Windows 10 operating system, and Dash version 2.6.1

@CharmingData Жыл бұрын

@@olahalfman-halfamazing2895 are you using the exact same code and folder structure or did you modify anything?

@datascience1095 Жыл бұрын

Thanks for wonderful content. I have one query How to make live dashboard. What I mean I want to connect to live database so that whenever there is new data added I can show it in dashboard by refreshing it.

@CharmingData Жыл бұрын

Hi @ritesh. I made a video on that with mongoDB. But I'll try to connect this dashboard to a database and show how to read and write data to the database in future videos

@datascience1095 Жыл бұрын

Thanks you so much

@thanutnunl9442 Жыл бұрын

how can i upgrade to dash 2.6.1?

@CharmingData Жыл бұрын

pip install dash==2.6.1

@andrewchoi8548 11 ай бұрын

I'm not hundred percent sure if it's a problem with this vid, but I think I might have heard an extremely high pitched noise in the beginning of this vid.

@qwertyytrewq1280 Жыл бұрын

Can we redirect this url using button click?

@CharmingData Жыл бұрын

Good question. I've never tried that. If I am successful, I'll let you know.

@qwertyytrewq1280 Жыл бұрын

@@CharmingData Okkay...thanks..

@starorange8449 Жыл бұрын

Do you see a project like pyscript replacing Plotly Dash?

@CharmingData Жыл бұрын

I don't think that would happen any time soon. Pyscript is great for running apps on the browser, but it's very hard to handle medium-large amounts of data without using the server. There are still many challenges that need to be solved.

@findthetruth3021 Жыл бұрын

Could you please create easy interactive dashboard with Jupiter notebook. I haven't seen any video like this on KZfaq so far. Thanks in advance for your amazing videos.

@CharmingData Жыл бұрын

Hi @halkawt. I've used Jupyter in some of my videos. There is very little difference, actually. You just have to use the code in a Jupyter file, change 2 lines of code, and it should work.

@findthetruth3021 Жыл бұрын

@@CharmingData it is really easy for you lol, but for us these two lines are huge challenges. 😁 We do appreciate to cover some videos for Jupiter notebook as well. Thanks again

@robbass7070 Жыл бұрын

@@CharmingData Adam, I utilize Jupyter through Anaconda. I have been searching the internet the past two days trying to find the changed line of code in order for this program to work in jupyter and can't find anything......been really frustrating. Your tutorials are excellent. Thank you.

@CharmingData Жыл бұрын

@@robbass7070 actually I'm not sure you could use jupyter notebooks for a Dash multipage app. It would be best to use a .py file.

@JuanCruz-ls8us Жыл бұрын

Hi, great to know Dash incorporated multipages in the main package. I'm having trouble going from a multipage app using dash-labs to this new implementation. When running the app I get "werkzeug.exceptions.NotFound" in the browser. Do you know what could be wrong? Thanks in advance!

@CharmingData Жыл бұрын

Hi Juan, it's probably because of version number. What version of dash are you using? Also go to dash-labs GitHub repo and see some instructions that Ann put there for transitioning from dash-labs to pages.

@JuanCruz-ls8us Жыл бұрын

@@CharmingData thanks a lot for the quick response! I'll check it out!