Building a Dashboard web app in Python - Full Streamlit Tutorial

In this video, I show you how to build a Dashboard in Python using the Streamlit library. This is version 2, an improved version to the dashboard built in a previous episode or version 1 (see link below).
Don't forget to ⭐ the repo and follow me on GitHub!
🕹️ Demo (version 2) dash-board.streamlitapp.com/
📝 Code (version 2) github.com/dataprofessor/dash...
If you want to play with version 1 of the Dashboard, here it is:
📺 Watch video (version 1) • How to Build a Dashboa...
🕹️ Demo (version 1) share.streamlit.io/dataprofes...
📝 Code (version 1) github.com/dataprofessor/dash...
📦 App starter kit blog.streamlit.io/streamlit-a...
0:00 Introduction
0:22 Version 1 vs 2
1:05 Overview of the dashboard app
2:59 Code repo walkthrough
5:08 Code walkthrough
12:32 Customizing the dashboard app
13:12 Conclusion
Support my work:
👪 Join as Channel Member:
/ @dataprofessor
✉️ Newsletter newsletter.dataprofessor.org
📖 Join Medium to Read my Blogs / membership
☕ Buy me a coffee www.buymeacoffee.com/dataprof...
Recommended Resources
📚 Books kit.co/dataprofessor
😎 Taro (Tech Career Mentorship) www.jointaro.com/r/dataprofes...
📜 Google Data Analytics Professional Certificate click.linksynergy.com/deeplin...
🤔 Interview Query www.interviewquery.com/?ref=d...
🖥️ Stock photos, graphics and videos used on this channel 1.envato.market/c/2346717/628...
Subscribe:
🌟 Coding Professor / @codingprofessor
🌟 Data Professor kzbin.info...
Disclaimer:
Recommended books and tools are affiliate links that gives me a portion of sales at no cost to you, which will contribute to the improvement of this channel's contents.
#datascience #machinelearning #dataprofessor

[@christianlaurio5912]

Thank you so much. I will definitely try this one and watch how to deploy the first version.

[@techsmarthouse]

Thanks teacher, excelent development. Keep going !!

[@DataProfessor]

Thank you! 😃

[@mfandrade]

Very good! Thanks for sharing it!

[@toshailendra]

Great ! Thanks for sharing this.

[@victorolatope5148]

Great presentation. Thank you.

[@LIDORAVITAN]

🔥 Really cool!

[@tonza404]

That’s what I am looking for. Thank you so much krub ❤

[@DataProfessor]

You're welcome 😊

[@radouane5591]

Thank you again for this nice video

[@tgny457]

Good work. 🔥

[@imadsaddik]

Thanks for sharing this

[@serychristianrenaud]

Thanks 👍

[@sumitchaudhary1728]

The video is great. I was just looking for something like this to implement. However, add the style.css and with open('style.css') as f: st.markdown(f'{f.read()}', unsafe_allow_html=True), the metric are still white. Any possible reasons why? I am working on linux system.

[@abdulmeral4811]

Is it possible a responsive pages? Adjust automaticly the page for mobile phones etc..

[@maungmaungtar9651]

🔥 Thanks 👍

[@user-ns9qc4eg7y]

🔥Thank you

[@user-dn4qs3cc4u]

Great tutorial! One question, how do I use the config.toml? I put the file in the folder with the other files and nothing happend, no teal color theme neither shadowing over scorecards.

[@DataProfessor]

Hi, the scorecard coloring was implemented via CSS syling while the config.toml should be placed in the .streamlit folder.

[@AchouakNouioua]

any help please , AttributeError: module 'streamlit' has no attribute 'columns'

[@bubblebass9182]

thank you

[@seraphinaaki1661]

Hi, I have a question. Is it possible to build a real-time dashboard in streamlit? The data that will be used is from the MQTT broker

[@stickyvicky16]

wondering the same thing

[@seraphinaaki1661]

@@stickyvicky16 Hi there, It's actually possible. I've done it before after I left my reply here. You can use a placeholder container so every time the data updates, it won't create a new graph.

[@kisho2679]

how could MathJax be integrated into Python by using streamlit to display LaTex as mathematical expressions in a web application?

[@IsaacBG84]

Great video. Is it posible to create a dashboard and have a button to export data(googlesheets)+charts to a PDF document?

[@DataProfessor]

Yes that can be done by passing the file contents to st.download_button method

[@suthanchandru5412]

How to reduce the column width? Please

[@williamsilva1312]

AttributeError: module 'streamlit' has no attribute '_is_running_with_streamlit'.This error happens every time I try to plot the Hiplot view. Do you have any tips to resolve?

[@austinjameswolff2638]

I had the same issue, I just googled it and there was an answer on the streamlit website

[@by_westy]

how to color each card border with different colors?

[@bc4198]

🔥

[@dadoll1660]

❤‍🔥

[@AJAY-xh9zc]

❤️‍🔥❤️‍🔥❤️‍🔥

[@LGseeker]

Nic 🎉

[@dexnug]

hi prof, great tutorial..do you know how to show real data from arduino to streamlit web apps?

[@DataProfessor]

Hi, this blog seems to cover the topic towardsdatascience.com/build-a-diy-mini-radar-using-arduino-python-and-streamlit-c333006681d7

[@CraigRussill-Roy]

❤

[@neoviper533]

Great dashboard. I want to modify it because it doesn't fit my purpose. I have 2 questions. How to change the theme colors in heatmap and how to add filtering by year to it? Update: I figured out the year but still i can't find how to change color theme in charts.

[@gohoudanon6909]

I Chanin, I am following you on Medium. Can we talk. I am reproducing you code but I get stucked.

[@imp1107]

why use this when Power BI and Tableau can do it by click, drag and drop?

[@mike8delta]

Can you run Power BI and Tableau on your own server for free?

[@OFWCREATOR]

Of course they can, but this one is free.

[@retrocoin1001]

As @OFW CREATOR said it is free and easy to reach and use

[@paulnanta9794]

oh in c oh xrv by

[@szx1693]

For now , no one can make Streamlit dashboard draggable and resizable like PowerBI or superset

[@MatheusPavanetti]

If you are strugling wondering "why" the cards border are not showing up with the rounded light-grey background and light blue indicators on the left it might be because with newest version of streamlit the html div classes has changed. With that if you want to make that to work open the style.css and replace at the card section: from: div.css-1r6slb0.e1tzin5v2 to: .st-emotion-cache-1r6slb0 I tested on Streamlit, version 1.27.2 Again, I am not sure if those tags are randomly generated at runtime and/or specific to my streamlit section.

[@tiffanyadora2998]

Hey! thank you for this. I'm wondering have you also figured out how to change the color tag for the label part?

[@caseybackes]

🔥