Complete Guide to Bootstrap Dashboard Apps - Dash Plotly
Learn to use Dash Bootstrap to fully design and style a dashboard app in python that follows stock prices. We will cover the grid of the page, fonts, colors, rows, and columns so you can feel comfortable designing your future app in any way you want. Download code below.
View my book - The Book of Dash:
www.amazon.com/Python-Dash-An...
github.com/DashBookProject/Pl...
Code:
github.com/Coding-with-Adam/D...
Bootstrap themes and Cheatsheet:
www.bootstrapcdn.com/bootswatch/
hackerthemes.com/bootstrap-ch...
Dash Bootstrap documentation:
dash-bootstrap-components.ope...
Video Layout:
00:00 - What you will learn and Python code file
01:45 - data and libraries
10:13 - Bootstrap Themes
13:15 - Layout Grid and Styling
45:45 - Adding the Callback
48:08 - Bootstrap Card, Image
50:56 - Adjusting Layout to different screen sizes and mobile
58:48 - Support (learn to add table & draw on graphs)
************************************************************************
👉 Your support keeps Charming Data running, which is proudly a 100% member-supported educational channel:
Patreon: / charmingdata
GitHub: github.com/sponsors/Coding-wi...
KZread: / @charmingdata
Пікірлер: 102
Hi All, Join the Charming Data Community -- charming-data.com/ -- to learn more data viz, data apps, and AI integrations.
@ottomaximus19
2 жыл бұрын
Instablaster
@florianboudon4624
2 жыл бұрын
Hi, I've used dash with spider, my web navigator is chrome. And when I tried to launch a simply prog my local host is bloqued, I need help. thank you
@CharmingData
2 жыл бұрын
@@florianboudon4624 try debug=False at the very end. Also, it could be that you have a string firewall on your computer, blogging the execution of these kind of programs
@florianboudon4624
2 жыл бұрын
@@CharmingData Thank you for your answer, you're right, I've just written False and it's working :)
Thank you very much Adam! Your knowledge and teaching skills are top-notch.
I don't know how many times I have watched your videos over and over, 1M? Thank you for posting every single one of them!
@CharmingData
2 жыл бұрын
Thank you Viktor.
Thank you very much Adam, I really needed this tutorial.
Thank you very much for your video. I have really enjoyed and learned a lot of things during your presentation.
Thanks a lot for this!! Super helpful!
I always learn a lot from your videos. Thank you very much!!
Well done! Very helpful.
Thank you for this video guide! It showed me how to control layout of components, something I was facing difficulties with. Btw, I also read your book The Book of Dash, it's a great book! 🙂
@CharmingData
Жыл бұрын
Thank you 🙏
Great! Thanks for sharing. Greetings from Brazil 🇧🇷
Thank you very much...I learned a lot
Fantastic!!! thanks
Thank you!
Hello, great tutorial Séverine, thanks! I have one question: I have a header row with nav bar and a footer row and I want the graph (or any other component) to be centered vertically (even when changing window size) in my content row, how should I do this? Really struggling to find the information… thanks!
Thanks a lot!
Thank you for the great effort could you please give a hint or tutorial on how to deploy this app on MS-IIS or Apache
amen for this
Thanks! Exactly what is needed Can you do a tutorial on dash leaflet?
@CharmingData
3 жыл бұрын
I can't promise. But I'll try. I have many requests for tutorials. Thanks for the suggestion.
please do more such live streams rather recording videos explaining the code doing live stream with code writing is lot of learn together thanks
tfw when you fail at copying a phrase so small you could have just typed it out 5 times by the time you actually get it pasted correctly from your clipboard! XD Thanks a lot for the video, learned a lot. I kind of hate dealing with all these whistles and bells on the frontend, but at least bootstrap makes it somewhat tolerable.
Great Video! Could you also make one for dropdown update menu types - restyle etc Thank you
Great video ! Could you explain how to use Dash Sidebars to implement a multipage app? Would be very useful. Keep it up!
@CharmingData
3 жыл бұрын
Hi @xX... where have you seen the Dash Sidebars?
Hey, just two questions. 1. For popover body, how to connect the hover one with button? 2. Is there any circular 'i' icon available to pop information in dbc/dcc/html components instead of a hefty button?
Omg best tutorial ever
@CharmingData
Жыл бұрын
Thank you Felipe.
Thanks
This awesome! I have a question about a specific feature of multiplots. In case I wanna create a figure with 2 subplots (row=1, col=2) and want have the share x axis option so that when I zoom in one of the graphs the second one is also zoomed, how can it be done? I know that if the subplots are of (row=2, col=1) it works fine. But I cannot find a way to have it working for (row=1, col=2). Thank you very much!
@CharmingData
3 жыл бұрын
Hi Rodrigo, Probably the best solution is to use Plotly Express high level interface parameters: facet_col and/or facet_row. Here's the documentation for the line graph.
Bro! Good job, but to be honest I dont know that should I learn React or learn this xd
Hey Adam, Thanks for your tutorial, however when i m trying the dcc.checklist the options are loading in vertical fashion how can i make them in horizontal manner?
Hi Adam, thank you for this comprehensive tutorial! Regarding this bootstrap layout using rows and columns, how one can control the space between two rows? Is there any class or parameter we can use to control it? Thank you very much!
@CharmingData
3 жыл бұрын
Look at the bootstrap class i use for the title of the page. I think it's mp-3 or something similar. That creates a padding under the elements inside the rows.
@langstrumpf156
3 жыл бұрын
You can also insert a custom style parameter: style={'padding': 50}
@CharmingData
3 жыл бұрын
@@langstrumpf156 Good point.
@vikranttyagi5232
2 жыл бұрын
You can also add an html.Br() between the two rows to provide the spacing.
this video is an early Christmas present.
@CharmingData
2 жыл бұрын
Thank you irm
could you do the same using external css in assets folder?
can you do streamlit, I had issues managing state/cache in it so reverted back to plotly- now looking at your “advanced shit” section to get a hang of dash callbacks
@CharmingData
3 жыл бұрын
Hi @CS Sensei. Thanks for watching my channel
Hey Adam, not related to dbc but I've a question. Do you know if it's possible configure "number digits to display" globally for the dashboard? We shouldn't have to be round every float via python.
@CharmingData
3 жыл бұрын
I'm sorry, Mert. I'm not sure how to do that globally.
@moblear7822
3 жыл бұрын
Create a separate .py file. Use it to define global variables. import that file in each .py file. Define a variable that it the numeber of decimal points and use that variable each time you make a table in a dashboard. If you need to change the digits just change that variables value
Hi Adam, other than bootstrap, is there any other UI libraries easily installable (like bootstrap)? Material UI or any others?
@CharmingData
Жыл бұрын
hi there, I would recommend you check out Dash Mantine Components. People really like that one as well.
Valeu!
It's 3 am and I'm on still on this tutorial 😂
@CharmingData
3 жыл бұрын
Get some sleep, Chris or you'll regret it the next day 😊
@huzefadatasci8411
Жыл бұрын
@@CharmingData you shared your experience 😀
thx a lot,but i got a question about layout. i do exactly the same as you, but in first row and first colomn, the graph and the dropdown are stick together, there is no blank between them. plz help!!!
@CharmingData
3 жыл бұрын
Hi, i'm not sure why that's happennig
Which video is it on your patreon that shows how to draw on plotly graphs?
@CharmingData
2 жыл бұрын
Hi Philip, I can't remember if I have a video on that in patreon, but I basically talk about this: dash.plotly.com/annotations They have good examples of how to draw on graphs in that link. Let me know if you have any questions
@philipniedzwiadek8736
2 жыл бұрын
@@CharmingData Amazing! You’re the bomb Adam!
at 45:40 inside checlkist you used 'mr-3' in labelClassName attribute I tried using it but it didnt work do you have any suggestions how I can put space between checklist items properly. And thank you for this video. I'm new to these kind of things and it helps a lot!!
@kazakturku5885
Жыл бұрын
I found a solution. I replaced labelClassName area with labelStyle={'margin-left': '10px'}. This method solved my problem.
@CharmingData
Жыл бұрын
@@kazakturku5885 Thank you for sharing the solution, Kezak.
A video on global updates?
Hi, I'm using Spyder to run the script, but the bootstrap design like the text color is not working in the webpage. May I know is it additional package needed to download?
@CharmingData
2 жыл бұрын
Hi Boo Shu. I haven't tried Spyder but did you remember to add bootstrap theme as an external stylesheet where you instantiate dash
Hi Adam, How can we fit the whole contents into a single webpage, and secondly how can give different background colors to different parts of the layout. let's say I have two rows and two columns and I want to give background colors for row one col1, row1 col2, and so on. so it will look like green tiles with spaces between them on a blue ground (web page background). Thank you
@CharmingData
3 жыл бұрын
one easy way to do put your content and graphs on dbc.cards and manage the background colors of each card. You can also mange the color of your figures like this: fig.update_layout( plot_bgcolor='black', paper_bgcolor='black', )
@huseyinyilmaz1155
3 жыл бұрын
@@CharmingData Thank you, I will try
@huseyinyilmaz1155
3 жыл бұрын
@@CharmingData Hi Adam, I used Cards as you suggested. in Cards, is it possible two use two different components next to each other, horizontally? For example, a text at left and a "dropdown" list just next to this text, and maybe another component next to those. So, I have three different components on the same card, so same background color, without any border between them. Whenever I tried, components comes one under the other one.
@CharmingData
3 жыл бұрын
@@huseyinyilmaz1155 I've never tried this. But try to put dbc.Row and dbc.Col inside the body of dbc.Card, like in the example below: stackoverflow.com/questions/63592900/plotly-dash-how-to-design-the-layout-using-dash-bootstrap-components
I get error 'PosixPath' object has no attribute 'expanduser' when I run the server
dbc.col() and dbc.row() what is the difference between them? given their similarity seems like interchangeable!.. what is the unique differences between them. more specifically when to use either of them while coding?
@CharmingData
Жыл бұрын
hi Mahadi, first you declare the dbc.Row() and then, inside the Row, you have to declare the dbc.Col(). Then inside the Col is where you put your Dash components. I hope that helps.
anyone know where the link to the git repo is?
When I run your code, I get the following error: IncorrectTypeException: The input argument `my-dpdn.value` must be a list or tuple of `dash.dependencies.Input`s. Please help.
@CharmingData
3 жыл бұрын
Can you please check your dash version. Is it over 1.14.0?
@Me-ur2zt
3 жыл бұрын
@@CharmingData It is: 1.14.0 Looks like I have to put brackets around the Input: @app.callback( Output('line-fig2', 'figure'), [Input('my-dpdn2', 'value')] )
@CharmingData
3 жыл бұрын
@@Me-ur2zt yes, for the early versions of Dash, multiple Inputs and Outputs needed to be inside lists, but for the later version you don't need a list.
Sir, can you tell me how can i make reset button work to reset dropdown values to default states
@CharmingData
2 жыл бұрын
hi @justpjn you need to put the button n_clicks as an INput in the callback, and put the dropdown value as an Output in the callback. In the callback function write the code so the value returned is the original default state.
The checkboxes with symbols appear vertically on my computer. Does this mean that the Dash is unstable? Or any solution to work aruond?
@CharmingData
4 ай бұрын
Not at all. Check the dash bootstrap version. Also, can you please share the checkbox code with me?
Hey mate, how do I add client side callback on multiple graphs here. Looking for real support here ty
@chriskeo392
2 жыл бұрын
Join his subscription. $10 per month at least
no_gutter is not working it is not present in the new version of bootstrap. What should I do in place of it?
@CharmingData
2 жыл бұрын
Hi Mohammad. Try to assign fluid=True or fluid=False to the dbc.Container()
i get this error how would you assist me? TypeError: The `dash_bootstrap_components.Row` component (version 1.0.3) received an unexpected keyword argument: `width` Allowed arguments: align, children, className, class_name, id, justify, key, loading_state, style
@CharmingData
2 жыл бұрын
Hi @ketter. Width can only be used with DBC.col()
I've done exact same thing but getting the two dropdowns are not coming in two different col's thery are coming in same row
@CharmingData
Жыл бұрын
Hi @shilpi. Can you please share your code/question on community.plotly.com Forum? That will allow us to see your code and try to help you out. Thank you,
Hi Pal, I want boiler code for Dash Plotly + React Component. Have tried installing pip install cookiecutter all the way possible. Kindly help
@CharmingData
2 жыл бұрын
Hi. I don't have that unfortunately
thanks for the video, but the second callback give me an error "Callback error updating line_fig2.figure". i hope you can help me. thanks
Hi, I use the Card-Visual in my App. The Card shows a Value (e.g. 140). It's possible to change this Value with an @app.callback? Thank's...