DEV Community

Cover image for From Data to Dashboard: Building Interactive Reports with Streamlit
AHMED HASAN AKHTAR OVIEDO
AHMED HASAN AKHTAR OVIEDO

Posted on

From Data to Dashboard: Building Interactive Reports with Streamlit

Summary: In this article, we will explore three powerful Python-based tools for dashboards and reports — Streamlit, Dash, and Bokeh. We will then focus on Streamlit, showcasing how to build a simple but interactive sales dashboard with Python, and finally deploy it to the cloud.


Why Visualization Tools Matter

Turning data into actionable insights requires more than static plots. Tools like Streamlit, Dash, and Bokeh let you create interactive dashboards that allow stakeholders to filter, explore, and make decisions in real time.

  • Streamlit: Quickest to build, very Pythonic, minimal code.
  • Dash: More flexible for complex multi-page apps, built on Plotly.
  • Bokeh: Strong visualization library, often embedded in web apps.

For this article, we’ll use Streamlit, because it combines speed and simplicity.


Real-World Example: Sales Dashboard

We’ll build a small dashboard that:

  • Shows total sales and average order value.
  • Lets users filter by product category.
  • Displays sales trends over time.

    # sales_dashboard.py
    import streamlit as st
    import pandas as pd
    import numpy as np
    
    st.set_page_config(page_title="Sales Dashboard", layout="wide")
    
    st.title("📊 Sales Dashboard")
    st.markdown("An interactive dashboard to explore sales performance.")
    
    # Generate sample data
    @st.cache_data
    def load_data():
        np.random.seed(42)
        dates = pd.date_range("2023-01-01", periods=100)
        categories = ["Electronics", "Clothing", "Furniture"]
        data = {
            "date": np.random.choice(dates, 500),
            "category": np.random.choice(categories, 500),
            "sales": np.random.randint(50, 500, 500)
        }
        return pd.DataFrame(data)
    
    df = load_data()
    
    # Sidebar filters
    st.sidebar.header("Filters")
    categories = st.sidebar.multiselect("Select Category", options=df["category"].unique(), default=df["category"].unique())
    
    # Filter data
    df_filtered = df[df["category"].isin(categories)]
    
    # KPIs
    total_sales = int(df_filtered["sales"].sum())
    avg_order = round(df_filtered["sales"].mean(), 2)
    
    col1, col2 = st.columns(2)
    col1.metric("Total Sales", f"${total_sales}")
    col2.metric("Avg Order Value", f"${avg_order}")
    
    # Charts
    sales_over_time = df_filtered.groupby("date")["sales"].sum().reset_index()
    st.line_chart(sales_over_time.set_index("date"))
    
    st.subheader("Detailed Data")
    st.dataframe(df_filtered)
    

Requirements

```
streamlit
pandas
numpy
```
Enter fullscreen mode Exit fullscreen mode

Deploying the Dashboard

Option A: Streamlit Community Cloud

  1. Push your code (sales_dashboard.py + requirements.txt) to GitHub.
  2. Go to Streamlit Community Cloud and sign in with GitHub.
  3. Create a new app, point it to your repository, and select sales_dashboard.py as the entry file.
  4. The platform builds and gives you a shareable URL.

Option B: Render

  1. Push your repo to GitHub.
  2. Create a Web Service on Render.
  3. Set the build command:

    pip install -r requirements.txt
    
  4. Set the start command:

    streamlit run sales_dashboard.py --server.port $PORT --server.address 0.0.0.0
    
  5. Deploy and get a public URL.


Why Streamlit Works Best Here

  • Fast prototyping: Build a working dashboard in under 50 lines of code.
  • Python-native: No need to learn JavaScript or HTML.
  • Cloud-friendly: One-click deploy with Community Cloud.

Final Thoughts

Dash and Bokeh are fantastic for specific use cases, but if your goal is speed, clarity, and sharing results quickly, Streamlit is often the best tool. With just a few lines of code, you can turn raw data into an interactive dashboard ready for stakeholders.

Top comments (0)