Fanilo Andrianasolo
Fanilo Andrianasolo
  • 62
  • 529 177
EPIC Google Sheets to Interactive Dashboard in Python ft. Streamlit / CSS
Looking for an end to end implementation of a live stocks dashboard from Google Sheets to a Python Web App? In this tutorial, you'll discover my comprehensive workflow to build my Streamlit web dashboard:
- How I build a live Stocks tracker in a Google Sheets workbook
- How I connect to Google Sheets from Python using @AirbyteHQ ( airbyte.com/product/pyairbyte )
- How I build the Streamlit app with horizontal layout columns, Plotly Candlestick and a grid of indicators for easy reading
- How I add custom styling to the Streamlit app with heavy use of HTML inspection, targeting widgets to add colors, box shadows and new Google fonts
By the end of this video, you'll be equipped with the skills to quickly recreate Excel dashboards within Python web apps. No more struggling with complex VBA macros - empower yourself to generate interactive and visually appealing dashboards for financial data analysis.
---
📧 Want a free, slower paced live coding of this tutorial? Sign up to my email list to be alerted first, and keep up to date with the latest news, tutorials and resources about Streamlit & friends ➡ andfanilo-newsletter.streamlit.app/
💰 Buy me a coffee to stay awake while editing www.buymeacoffee.com/andfanilo
đŸ—Łïž Find my socials on andfanilo.com
🔗 Links
- Source code + Sample Data: github.com/andfanilo/social-media-tutorials/tree/master/20240512-cssdashboard
- Or fork this Google Sheets: docs.google.com/spreadsheets/d/1DPzFbZ6Oh-FixU6hP5Eoix0wsgb_C2FHx9KAGEunph4/edit?usp=sharing
🔧 My tools (Affiliate links to support me!)
- 📕 Streamlit Official Book - amzn.to/3QuRPwl
- đŸ“· Main Camera - amzn.to/3QvTosB
- đŸ“· Main Lens - amzn.to/3svYCwq
- đŸŽ™ïž Microphone - amzn.to/47l5ewA
- đŸŽ” Music & Sound Effects - www.epidemicsound.com/referral/a2p22s
00:00 Dashboard Mockup
01:08 Build live stocks tracker in Google Sheets
02:40 Create a service account for Python
05:14 Connect to Google Sheets with Airbyte
09:17 Download Google Sheets data to Python with Airbyte
10:31 Display a Dataframe with inline sparkline
12:14 Track data with an interactive Candlestick plot
14:42 Create a grid of indicators
16:41 CSS Styling Prerequisites: inspect HTML
19:04 Create a grid of company watchcards
20:54 Inject a Google font into the Streamlit title
22:51 CSS Styling of indicators into cards
25:09 CSS Styling of company watch cards
26:59 Enjoy the dashboard!
---
đŸȘ¶ A segment of this video was sponsored by @AirbyteHQ . It was very easy to setup, go build Streamlit apps over new data sources with Airbyte!
⚠ Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. Thank you for supporting my channel so I can continue providing you with free content!
#streamlit #python #datascience #dataapps
zhlédnutí: 10 270

Video

Teasing Streamlit’s Next Biggest Changes
zhlĂ©dnutĂ­ 3,3KPƙed 2 měsĂ­ci
The 5 latest releases seem to prepare the bigger Streamlit milestones. In this video you will see how the new features are smaller steps to big changes like multipage v2, dialog window and partial rerun/experimental fragment ☕ Want to support me? www.buymeacoffee.com/andfanilo 🐩Follow my daily updates on Twitter: andfanilo đŸ—Łïž Find me on: andfanilo.com 🔗 Links - Popover Demo: popover...
Got Google Cloud Certified, bye Streamlit Cloud Deployment !
zhlĂ©dnutĂ­ 1,8KPƙed 2 měsĂ­ci
Is it worth passing the Google Cloud Platform "Professional Cloud Architect" certificate to learn about GCP, and think about migrating apps from Streamlit Cloud to GCP? ☕ Want to support me? www.buymeacoffee.com/andfanilo 🐩Follow my daily updates on Twitter: andfanilo đŸ—Łïž Find me on: andfanilo.com 🔗 Links - GCP Cheatsheet: googlecloudcheatsheet.withgoogle.com/ - Google Cloud Skills B...
5 Things I Wish I Knew Before Learning Streamlit
zhlĂ©dnutĂ­ 18KPƙed 3 měsĂ­ci
Would you like to understand the main limitations of the Streamlit Python library for building data web apps, before picking it up for a project? In this video, I'll cruise through 5 obstacles that regularly come back within the community and multiple ways/hacks/techniques to work around those limits. You'll find out: - how to hack markdown and iframe to style your app - if it's possible to alt...
GenAI could change Python Web Apps YouTube
zhlĂ©dnutĂ­ 1,5KPƙed 4 měsĂ­ci
I took a 3 month break to think about the future of my channel...but then I started overthinking about how digital twins could help me upload way more tutorials, how LLMs could make it easy to write Javascript web prototypes in place of Streamlit, and how it will affect my overall CZcams education strategy for 2024 GenAI is tearing through all parts of the job market, and developer educators ma...
How I Use OpenAI Assistants API To Control My Streamlit App
zhlĂ©dnutĂ­ 9KPƙed 6 měsĂ­ci
Seen the OpenAI Dev Day Wanderlust Assistants API demo and wondering how to implement a similar web app in full Python? It's all thanks to the new Assistants API feature and its integrated Function Calling. In this video, I prototype a Streamlit version of the app. Through this quick overview, you'll learn to: - leverage Streamlit's Session State for a clean reactive app using an MVC-like patte...
If I was a Streamlit Beginner, I’d read this! - Epic Book Trailer
zhlĂ©dnutĂ­ 2,6KPƙed 7 měsĂ­ci
The “Streamlit for Data Science” book by Tyler Richards just released an updated version 2. It provides the perfect project-based hands-down approach book to learn Streamlit. This trailer is proof of it. Giveaway Rules 1. Must be subscribed to my CZcams channel 2. Comment on this video, like what app you would build first 3. Must be 18 years or older to enter (or have your parent’s permission) ...
EVERY Streamlit News You Might Have Missed in Spring/Summer
zhlĂ©dnutĂ­ 2,5KPƙed 7 měsĂ­ci
Catch up with all the Streamlit news you might have missed this last semester! In this video, I'm going through: - all the releases for new features like editable dataframe, chatbot elements and st.connection, - community components like Mito or streamlit paywall for app monetization, - and integrations with other libraries like Langchain, AssemblyAI or Clarifai Eveything Streamlit-related for ...
I Built a Youtube Chatbot ft. AssemblyAI / Llamaindex / Weaviate
zhlĂ©dnutĂ­ 1,4KPƙed 8 měsĂ­ci
I wanted to use the opportunity of a Streamlit LLM Hackaton to build an app that integrates AssemblyAI for transcription, LlamaIndex for chatting with transcripts and Weaviate to store transcript embeddings in the Cloud. In this video, you'll see me speedrun through my whole process, from - downloading and extracting audio from my CZcams videos - transcribing 2 years of CZcams content with Asse...
Streamlit Reveals NEW CSS Styling Trick! (Here’s How to Use)
zhlĂ©dnutĂ­ 8KPƙed 8 měsĂ­ci
Want to change the style of a Streamlit button or Slider? In this tutorial, you'll discover the workflow I use to style some widgets using a new alpha release hidden in an external package by the Streamlit Developers. You will learn: - How to use the devtools to target a specific HTML element in your app - How to edit a widget styles through the Styleable Container component By the end of this ...
My Workflow for Building any Streamlit Dashboard Project
zhlĂ©dnutĂ­ 64KPƙed 9 měsĂ­ci
Tired of manipulating Excel dashboards with complex VBA macros? In this tutorial, you'll discover a comprehensive workflow I use to build most of my Streamlit web dashboards with SQL. It involves three key steps: - How I load an Excel workbook into a Pandas DataFrame through a file upload widget, and display it into a Streamlit app with live-reloading - How I format the dataframe with SQL throu...
Snowflake Has A New Strategy For Streamlit
zhlĂ©dnutĂ­ 1,9KPƙed 10 měsĂ­ci
Snowflake Summit shone new light on where it is taking Enterprise Streamlit to. In this video, we react to the Snowflake Summit 2023 keynote and get a deeper look into the collaboration between Snowflake and Streamlit as they set out to redefine how to curate, build and showcase Generative AI applications for enterprise. đŸ’” Want to support me? www.buymeacoffee.com/andfanilo 🐩Follow my daily upda...
I Prepared a Talk About Being a YouTuber For a Dev Event
zhlĂ©dnutĂ­ 398Pƙed 10 měsĂ­ci
How is my first talk since COVID going to fare? In this vlog, I will be sharing some BTS for building and giving my first talk in a while. There's a bit on how I structure, script and rehearse my talks, so you have an idea of a process if you plan to give your first talk too. ☕ Want to support me? www.buymeacoffee.com/andfanilo 🐩Follow my daily updates on Twitter: andfanilo đŸ—Łïž Find ...
Reacting to the Most Popular Streamlit LLM Apps
zhlĂ©dnutĂ­ 3,2KPƙed 11 měsĂ­ci
Looking for inspiration and apps to show your managers/stakeholders to convince them of the value of Generative AI? In this video, I react to a lot of LLM-powered Streamlit apps, there's a lot of OpenAI, GPT-3.5, text-davinci and Langchain, to get you inspired to build more. ☕ Want to support me? www.buymeacoffee.com/andfanilo 🐩Follow my daily updates on Twitter: andfanilo đŸ—Łïž Find m...
Kickstart your Custom Streamlit Chatbot (ft. CSS & Langchain)
zhlĂ©dnutĂ­ 15KPƙed 11 měsĂ­ci
Kickstart your Custom Streamlit Chatbot (ft. CSS & Langchain)
An Unfiltered Deep Dive into Streamlit's Limitations
zhlĂ©dnutĂ­ 10KPƙed rokem
An Unfiltered Deep Dive into Streamlit's Limitations
ChatGPT builds a Python Dash App for Me
zhlĂ©dnutĂ­ 2KPƙed rokem
ChatGPT builds a Python Dash App for Me
This Streamlit Chatbot works over your Notion documents
zhlĂ©dnutĂ­ 3,9KPƙed rokem
This Streamlit Chatbot works over your Notion documents
HTTPS, Global Secrets, App Embed | Streamlit v1.20-21
zhlĂ©dnutĂ­ 4,3KPƙed rokem
HTTPS, Global Secrets, App Embed | Streamlit v1.20-21
The Epic đŸ€— Hugging Face Tasks Overview
zhlĂ©dnutĂ­ 4KPƙed rokem
The Epic đŸ€— Hugging Face Tasks Overview
Streamlit App Showcase | Tips for making your app stand out!
zhlĂ©dnutĂ­ 11KPƙed rokem
Streamlit App Showcase | Tips for making your app stand out!
What's new in Streamlit 1.18-19? | Sharing Some Thoughts..
zhlĂ©dnutĂ­ 2,4KPƙed rokem
What's new in Streamlit 1.18-19? | Sharing Some Thoughts..
GPT is Taking Over the Streamlit Community
zhlĂ©dnutĂ­ 2,7KPƙed rokem
GPT is Taking Over the Streamlit Community
How to Convert a Streamlit App to an .EXE Executable
zhlĂ©dnutĂ­ 36KPƙed rokem
How to Convert a Streamlit App to an .EXE Executable
What's New in Streamlit? ‱ Improved Caching, Chart Colors & more
zhlĂ©dnutĂ­ 3,1KPƙed rokem
What's New in Streamlit? ‱ Improved Caching, Chart Colors & more
Surviving Your 1st Year of Youtube Side-Hustling
zhlĂ©dnutĂ­ 769Pƙed rokem
Surviving Your 1st Year of CZcams Side-Hustling
10 extra Streamlit widgets you didn't know existed
zhlĂ©dnutĂ­ 16KPƙed rokem
10 extra Streamlit widgets you didn't know existed
I Keep Breaking My Python Setup
zhlĂ©dnutĂ­ 1,9KPƙed rokem
I Keep Breaking My Python Setup
You Don’t Want To Miss Out On Streamlit's 2023 Features
zhlĂ©dnutĂ­ 6KPƙed rokem
You Don’t Want To Miss Out On Streamlit's 2023 Features
Thinking About Streamlit's Real Competition ‱ Big Data & AI Vlog
zhlĂ©dnutĂ­ 2,5KPƙed rokem
Thinking About Streamlit's Real Competition ‱ Big Data & AI Vlog

Komentáƙe

  • @jeromeprades9540
    @jeromeprades9540 Pƙed 3 hodinami

    More basic please

  • @sitrakaforler8696
    @sitrakaforler8696 Pƙed 13 hodinami

    hahaha bon aprĂšs ils sont hnnĂȘtes dessus mais en tout cas oui tu as raison Fanilo x)

  • @hiddenni
    @hiddenni Pƙed 2 dny

    can we use libraries like daisyui to change the css using the invisible span element? it would be amazing

  • @bakaloudis
    @bakaloudis Pƙed 4 dny

    Thank you much for this video, you solved a team problem that we had for so long. Cheers mate !!!

    • @andfanilo
      @andfanilo Pƙed 4 dny

      Glad it helped! Hmm I should make a new, more modern version of this video 🙃

  • @SaifUlislam-zq2qn
    @SaifUlislam-zq2qn Pƙed 6 dny

    Don't learn streamlit, instead learn htmx

    • @andfanilo
      @andfanilo Pƙed 4 dny

      I’d say learn both 🙃

    • @SaifUlislam-zq2qn
      @SaifUlislam-zq2qn Pƙed 4 dny

      @@andfanilo Have you heard the term's "Choose a language and you are married to it rest of your life. So choose wisely". I have wasted my life so many hours and days just looking for some shortcut and learning any new frameworks or library but at the end of everything I came back to Django and JavaScript.

  • @WhylerGame
    @WhylerGame Pƙed 6 dny

    Great content, thank you. Is it possible to create a bidirectional component with st.html ? I'm trying to make an image button and get the onclick value in python.

    • @andfanilo
      @andfanilo Pƙed 3 dny

      Thanks for the support! At this time it's not possible to get a callback from HTML to Python with st.html, you have to build a bidirectional component BUT you don't have to use the usual react template or react-less template from github.com/streamlit/component-template You can use discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064 instead Also I think there's this st-clickable-image discuss.streamlit.io/t/custom-component-to-display-clickable-images/21604 you can maybe get inspired from its code

  • @saisaigraph1631
    @saisaigraph1631 Pƙed 7 dny

    not only educative but also entertaining + fun... Thank you very much Fanilo

    • @andfanilo
      @andfanilo Pƙed 6 dny

      Thank you for the kind words 🙂 hope to see you on the next video!

  • @maloukemallouke9735
    @maloukemallouke9735 Pƙed 7 dny

    Excellent i love it.

    • @andfanilo
      @andfanilo Pƙed 7 dny

      Thanks for watching! If didn’t yet, check out my latest video too, it is another way of doing Google sheets Streamlit dashboard but in the same video style 😁

  • @DavidOden-kk8nm
    @DavidOden-kk8nm Pƙed 8 dny

    Thank you @Fanilo❀

    • @andfanilo
      @andfanilo Pƙed 7 dny

      Thanks for watching, see you on the next one :)

  • @emanueljordan
    @emanueljordan Pƙed 9 dny

    Hi, friend! If you just want to read data from Google Sheets, there’s an easy way to do it: - Open your spreadsheet in Sheets - Click on File - Click on Share, then ‘Publish to web’ - You can choose the entire document or just one sheet - It defaults to 'Web page', but you can easily change it to CSV - Click on "Publish" This will generate a link directly to the spreadsheet data. Just read it in Pandas[pd.read_csv('link')] and you’re good to go. This is just a tip from a 'Data From Beginner' who spent a lot of time figuring out how to connect with GSheets. Your tutorial was amazing, by the way! It gave me some great ideas! I’ll definitely try them out! Thanks!

    • @andfanilo
      @andfanilo Pƙed 6 dny

      Thanks for sharing! Yeah I saw this trick while browsing through the Google Workspace for Developers and thought there were so many ways to interact with Google APIs eheh. Do you know if it's possible to bake authentication into this webpage, just so not everyone who discovers the link has access to it?

  • @by_westy
    @by_westy Pƙed 9 dny

    how did you open streamlit preview in VS code

    • @andfanilo
      @andfanilo Pƙed 6 dny

      Actually it's just VSCode and a web browser side-by-side, but I configured VSCode margins so the topbar for both windows match for the screen recording ( gist.github.com/andfanilo/ae99aed9c454a46c1dbfe6a0b9fa0012 to check my config)

  • @thebudaxcorporate9763
    @thebudaxcorporate9763 Pƙed 9 dny

    awesome

    • @andfanilo
      @andfanilo Pƙed 9 dny

      Thanks for watching, see you on the next one :)

  • @kareemrasheedbabatunde9026

    You finally did it

    • @andfanilo
      @andfanilo Pƙed 7 dny

      It was a long ride! Hope you enjoyed it :) see you on the next one!

  • @gabrr
    @gabrr Pƙed 10 dny

    Amazing, stuff man!

    • @andfanilo
      @andfanilo Pƙed 10 dny

      Thanks for watching, see you on the next one :)

  • @ici6308
    @ici6308 Pƙed 10 dny

    This is the game changer.

    • @andfanilo
      @andfanilo Pƙed 10 dny

      Thanks for watching, see you on the next one :)

  • @maivish100
    @maivish100 Pƙed 11 dny

    Hi Fanilo, Thanks for sharing insight informations. Can we can change column header background color in ST. Kindly reply and how to do.(st.dataframe)

  • @theexposer9483
    @theexposer9483 Pƙed 11 dny

    Streamlit is data hobbyist platform nothing more, it lacks basic framework for an application which is designed to do serious stuff. It can never become a platform to produce enterprise grade application. It’s very heavy while running, practically struggling when you are trying to do some serious work, very often st.write which one of the basic component of platform starts throwing error. I thank you for sharing the truth to the developer community so that they know the Streamlit platform limitation.

  • @zkiyyeller3525
    @zkiyyeller3525 Pƙed 11 dny

    Awesome Video which tts did you use for this? for the tldr? 1176 seconds

    • @andfanilo
      @andfanilo Pƙed 11 dny

      Hello, thanks for watching! It was probably ElevenLabs for this video đŸ€” ( elevenlabs.io/ )

  • @JuanSuarez-ei7hv
    @JuanSuarez-ei7hv Pƙed 12 dny

    Great!!!

    • @andfanilo
      @andfanilo Pƙed 11 dny

      Thanks for watching! See you on the next one :)

  • @tylerjrichards_ds
    @tylerjrichards_ds Pƙed 12 dny

    I really love the sparklines, one of my favorite features. And I HATE how hard it is still to read / write with google sheets, st.connection makes it much easier but on the google side it still is not super easy

    • @andfanilo
      @andfanilo Pƙed 11 dny

      Yeah, I find this service account creation demanding for new users 😅 that could be automated maybe, like with Terraform or a command to paste into Google Shell Sparklines ftw, I initially wanted to use the st-aggrid ones but they require an enterprise license so yay for Streamlit Sparklines! Thanks for watching :)

  •  Pƙed 12 dny

    Awesome tutorial as always... I've used CSS too but that :has selector is a really great trick... Thanks for sharing and thanks a lot for the mention of my dashboard about Poverty ❀

    • @andfanilo
      @andfanilo Pƙed 11 dny

      Credits to arnaudmiribel.github.io/streamlit-extras/extras/stylable_container/ for the initial idea, plus st.html makes it a little easier! And I did already tell you your dashboard was the initial trigger to this video? So thanks for building/sharing it 😊 looking for your next dashboard!

    •  Pƙed 11 dny

      @@andfanilo I couldn't feel more proud, thank you for your support, I have learned a lot from your videos, I'm really glad to be useful for you and to give something back.

  • @iNEEL
    @iNEEL Pƙed 12 dny

    Great work, Fanilo. This video is going to be a goldmine for all streamlit users!

    • @andfanilo
      @andfanilo Pƙed 12 dny

      đŸ’Ș let's hope so! thanks for the support :)

  • @smiley3239
    @smiley3239 Pƙed 12 dny

    can i say i love you??? cause damn dude, your explanation is perfect!!!!

    • @andfanilo
      @andfanilo Pƙed 12 dny

      Well thank you for the support I'm very grateful :) I hope you watch more then, I even just released a new video!

  • @ruidinis75
    @ruidinis75 Pƙed 12 dny

    that is great

    • @andfanilo
      @andfanilo Pƙed 12 dny

      Thanks for watching, see you on the next one!

  • @trungphamquang5701
    @trungphamquang5701 Pƙed 12 dny

    I love new trick with CSS :D

    • @andfanilo
      @andfanilo Pƙed 12 dny

      Eheh, this is actually a customized version of arnaudmiribel.github.io/streamlit-extras/extras/stylable_container/ made simpler with st.html. I figured it would be better to explain it so people get to learn CSS (sometimes I think my channel will be rebranded "CSS for data scientists"!) Until one day we get custom classes on widgets maybe one day 🙃

  • @abdielgoni5690
    @abdielgoni5690 Pƙed 12 dny

    What is the difference beetwen pyairbyte and st gsheet connection?

    • @andfanilo
      @andfanilo Pƙed 12 dny

      gsheets-connection is an official st.connection ( docs.streamlit.io/develop/api-reference/connections/st.connection ) wrapper around GSpread to connect to GSheets. The library puts the connection and data in Streamlit cache for you so you only have to query it. It's a Streamlit-specific solution. Pyairbyte is a Python library for Airbyte ( airbyte.com/ ) that manages the connection and data download to a lot of different databases like MySQL, GSheets (which I use in the video) or BigQuery. It comes with more features than gsheets-connection like caching data in DuckDB, or fetching datasets already managed in a Cloud instance of Airbyte. If you work in a company that uses Airbyte to connect and manage multiple data sources, chances are you can directly download or refresh data from their self-hosted Airbyte platform. It's a popular solution amongst data engineers, not just specifically Streamlit. What I did in this tutorial is basically recreate a st.connection gsheet pyairbyte, without explicitly calling it st pyairbyte gsheet connection...

    • @abdielgoni5690
      @abdielgoni5690 Pƙed 12 dny

      Ahh i see. Thank you for the comprehensive explanation

  • @aleman12345
    @aleman12345 Pƙed 12 dny

    3 minutes after release, new record!

    • @andfanilo
      @andfanilo Pƙed 12 dny

      Ahah you're the first :D congrats!

  • @rodrigobogado653
    @rodrigobogado653 Pƙed 13 dny

    It's 3 in the morning here and every time I put on streamlit I get fanilo hahahaha. Thanks for the videos bro!

    • @andfanilo
      @andfanilo Pƙed 13 dny

      😆 Aren't my videos too "exciting" to get you to sleep?! Thanks for the support as always, very appreciated :) also there's a new one coming tomorrow eheh

    • @rodrigobogado653
      @rodrigobogado653 Pƙed 11 dny

      @@andfanilo Very good videos, I was just looking at the backgrounds and how to make something more personalized, thanks man

  • @pedrotiagobh
    @pedrotiagobh Pƙed 14 dny

    Hi, I had this error below while I was trying to create the .exe file from my streamlit code: Error: The entrypoint file "app.py" is not included in the bundled files. Can someone help me?

    • @andfanilo
      @andfanilo Pƙed 13 dny

      I haven't tried stlite in a while but from github.com/whitphx/stlite/tree/main/packages/desktop there are some new configurations options to add to point to the entrypoiny.. But the honest best way would be to head to github.com/whitphx/stlite/issues if it still doesn't work, the author is very helpful there!