Building a Dashboard web app in Python - Full Streamlit Tutorial

Sdílet
Vložit
  • čas přidán 3. 08. 2024
  • 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 czcams.com/users/dataprofessor...
    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
  • Věda a technologie

Komentáře • 56

  • @christianlaurio5912
    @christianlaurio5912 Před rokem +2

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

  • @techsmarthouse
    @techsmarthouse Před rokem +2

    Thanks teacher, excelent development. Keep going !!

  • @toshailendra
    @toshailendra Před rokem +1

    Great ! Thanks for sharing this.

  • @mfandrade
    @mfandrade Před 8 měsíci

    Very good! Thanks for sharing it!

  • @victorolatope5148
    @victorolatope5148 Před 3 měsíci

    Great presentation. Thank you.

  • @tonza404
    @tonza404 Před rokem +4

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

  • @radouane5591
    @radouane5591 Před rokem

    Thank you again for this nice video

  • @tgny457
    @tgny457 Před rokem +1

    Good work. 🔥

  • @imadsaddik
    @imadsaddik Před rokem +1

    Thanks for sharing this

  • @LIDORAVITAN
    @LIDORAVITAN Před 9 měsíci

    🔥 Really cool!

  • @serychristianrenaud
    @serychristianrenaud Před rokem +1

    Thanks 👍

  • @sumitchaudhary1728
    @sumitchaudhary1728 Před rokem

    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.

  • @maungmaungtar9651
    @maungmaungtar9651 Před 5 měsíci

    🔥 Thanks 👍

  • @abdulmeral4811
    @abdulmeral4811 Před rokem +1

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

  • @user-ns9qc4eg7y
    @user-ns9qc4eg7y Před rokem

    🔥Thank you

  • @user-dn4qs3cc4u
    @user-dn4qs3cc4u Před rokem +1

    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
      @DataProfessor  Před rokem

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

  • @bubblebass9182
    @bubblebass9182 Před 8 měsíci

    thank you

  • @danishajaib1516
    @danishajaib1516 Před 15 dny

    🔥

  • @seraphinaaki1661
    @seraphinaaki1661 Před rokem +1

    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
      @stickyvicky16 Před rokem

      wondering the same thing

    • @seraphinaaki1661
      @seraphinaaki1661 Před rokem

      @@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.

  • @AchouakNouioua
    @AchouakNouioua Před rokem

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

  • @williamsilva1312
    @williamsilva1312 Před rokem +1

    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
      @austinjameswolff2638 Před 2 měsíci

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

  • @IsaacBG84
    @IsaacBG84 Před rokem

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

    • @DataProfessor
      @DataProfessor  Před rokem +1

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

  • @suthanchandru5412
    @suthanchandru5412 Před rokem

    How to reduce the column width? Please

  • @MatheusPavanetti
    @MatheusPavanetti Před 9 měsíci +2

    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
      @tiffanyadora2998 Před 3 měsíci +1

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

    • @PenguinoUno
      @PenguinoUno Před měsícem

      Where did you find this information? I tried your fix but that didn't work so I'm wondering if there is another source out there with more info

  • @dexnug
    @dexnug Před rokem +1

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

    • @DataProfessor
      @DataProfessor  Před rokem

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

  • @CraigRussill-Roy
    @CraigRussill-Roy Před rokem +1

  • @kisho2679
    @kisho2679 Před 7 měsíci

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

  • @dadoll1660
    @dadoll1660 Před rokem +1

    ❤‍🔥

  • @AJAY-xh9zc
    @AJAY-xh9zc Před rokem +1

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

  • @neoviper533
    @neoviper533 Před rokem

    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.

  • @coopernik
    @coopernik Před 13 dny

    🔥😊

  • @LGseeker
    @LGseeker Před rokem +1

    Nic 🎉

  • @by_westy
    @by_westy Před měsícem

    how to color each card border with different colors?

    • @DataProfessor
      @DataProfessor  Před měsícem

      That can be done by finding the CSS selector, then defining the border color to the desired color.

  • @gohoudanon6909
    @gohoudanon6909 Před rokem

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

  • @imp1107
    @imp1107 Před rokem +13

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

    • @mike8delta
      @mike8delta Před rokem +15

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

    • @OFWCREATOR
      @OFWCREATOR Před rokem +1

      Of course they can, but this one is free.

    • @retrocoin1001
      @retrocoin1001 Před rokem

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

    • @paulnanta9794
      @paulnanta9794 Před rokem

      oh in c oh xrv by

    • @szx1693
      @szx1693 Před rokem +1

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

  • @bc4198
    @bc4198 Před rokem

    🔥

  • @caseybackes
    @caseybackes Před rokem

    🔥