Dashboard Basics

Build interactive dashboards using Chart.js to display business KPIs, track performance metrics, and present data insights that drive decision-making.

What Makes a Dashboard Work?

Think about the dashboard in your car. Three critical gauges — speed, fuel, engine temperature. You glance for 2 seconds and know exactly what's happening. Business dashboards work the same way.

The best dashboards answer three questions in under 30 seconds: What happened? Why did it happen? What should we do? Everything else is noise.

Chart.js handles the heavy lifting — rendering, responsiveness, interactions. But you still need to pick the right chart type. This is where 80% of dashboards fail. Wrong chart = confused stakeholders = bad decisions.

Chart Selection Strategy

Revenue Analysis Dashboard

The scenario: Flipkart's category manager needs to present Q3 performance to the board. Revenue by category, monthly trends, and customer satisfaction — all in one view.

# Import essential libraries for data analysis
import pandas as pd
import numpy as np

# Load the ecommerce dataset
df = pd.read_csv('dataplexa_ecommerce.csv')

# Quick peek at our data structure
print(df.head())

   order_id        date  customer_age gender         city product_category    quantity  unit_price    revenue  rating  returned
0      1001  2023-01-05            24      M       Mumbai      Electronics            2     15450.0   30900.0     4.2     False
1      1002  2023-01-05            31      F        Delhi         Clothing            1      2340.0    2340.0     4.8     False
2      1003  2023-01-06            28      M    Bangalore            Food            3       890.0    2670.0     3.9     False
3      1004  2023-01-07            45      F      Chennai           Books            1       650.0     650.0     4.5     False
4      1005  2023-01-08            22      F         Pune             Home            2      4200.0    8400.0     4.1     False

# Calculate revenue by product category for bar chart
category_revenue = df.groupby('product_category')['revenue'].sum()

# Convert to lakhs for easier reading
category_revenue_lakhs = category_revenue / 100000

# Sort from highest to lowest revenue
category_revenue_lakhs = category_revenue_lakhs.sort_values(ascending=False)
print(category_revenue_lakhs)

product_category
Electronics    28.4
Clothing       19.2
Home           11.5
Food            8.7
Books           4.3
Name: revenue, dtype: float64

Electronics and Clothing drive 66% of total platform revenue

The bar chart reveals a clear power law distribution — Electronics generates 40% of revenue, while the bottom two categories contribute just 18% combined. This isn't unusual for marketplace businesses.

For board presentation, this single chart justifies resource allocation. Why spend equal marketing budget on Books when Electronics brings 6x the revenue? The visual makes the decision obvious.

Monthly Revenue Trends

# Convert date column to datetime for time series analysis
df['date'] = pd.to_datetime(df['date'])

# Extract month from date for monthly grouping
df['month'] = df['date'].dt.strftime('%b')

# Calculate monthly revenue totals
monthly_revenue = df.groupby('month')['revenue'].sum() / 100000
print(monthly_revenue)

month
Apr    5.8
Aug    6.2
Dec    7.1
Feb    5.9
Jan    6.3
Jul    5.7
Jun    6.0
Mar    6.1
May    5.9
Nov    6.8
Oct    6.4
Sep    5.9
Name: revenue, dtype: float64

Steady growth momentum with 24% festive season boost in Q4

The line chart with fill:true creates an area effect, perfect for showing cumulative impact. Notice the gentle upward trend from July onwards — exactly what you want investors to see.

The 24% Q4 spike (Nov-Dec) validates seasonal marketing spend. But more importantly, the baseline never drops below ₹5.7L — indicating solid underlying business health beyond promotions.

Customer Satisfaction by Category

# Calculate average rating by category
category_ratings = df.groupby('product_category')['rating'].mean()

# Round to 1 decimal place for cleaner display
category_ratings = category_ratings.round(1)

# Sort by rating to see top performers
category_ratings_sorted = category_ratings.sort_values(ascending=False)
print(category_ratings_sorted)

product_category
Books          4.5
Electronics    4.3
Clothing       4.2
Home           4.1
Food           3.9
Name: rating, dtype: float64

Books achieve highest satisfaction despite being smallest revenue category

The doughnut chart immediately reveals the satisfaction paradox — highest revenue (Electronics) doesn't equal highest ratings. Books dominate the green section despite being the smallest revenue slice.

This insight drives strategic decisions. Food's red section (3.9 rating) needs immediate attention — it's dragging overall platform perception. Meanwhile, Books proves small categories can punch above their weight in customer loyalty.

Advanced Chart Configurations

Real dashboards need more than basic charts. Stacked bars for comparative analysis, scatter plots for correlations, radar charts for multi-dimensional performance — each serves specific business questions.

# Create stacked bar data: returned vs successful orders
category_returns = df.groupby(['product_category', 'returned']).size().unstack(fill_value=0)

# Calculate percentages for better comparison
category_return_pct = category_returns.div(category_returns.sum(axis=1), axis=0) * 100
print(category_return_pct.round(1))

returned        False  True
product_category           
Books            94.2   5.8
Clothing         91.3   8.7
Electronics      92.8   7.2
Food             89.6  10.4
Home             93.1   6.9

# Scatter plot data: price vs rating correlation
scatter_data = df[['unit_price', 'rating', 'product_category']].copy()

# Sample 200 points for cleaner visualization
scatter_sample = scatter_data.sample(200, random_state=42)

# Check correlation strength
correlation = scatter_sample['unit_price'].corr(scatter_sample['rating'])
print(f"Price-Rating Correlation: {correlation:.3f}")

Price-Rating Correlation: 0.089

Dashboard Performance Tips

Chart.js dashboards can slow down with large datasets. Rule of thumb: 500+ points needs sampling. 10,000+ points crashes mobile browsers entirely.

Never create two Chart instances on the same canvas ID — Chart.js throws errors silently. Always destroy existing charts before creating new ones: chart.destroy().

Color consistency matters more than you think. Electronics should always be teal across all charts — users build mental associations. Random colors every time breaks cognitive flow.

Interactive Features

Static charts tell stories. Interactive charts let users explore their own questions. Chart.js handles tooltips, zoom, and click events automatically — but you control what information appears.

# Custom tooltip configuration for business context
tooltip_config = {
  'callbacks': {
    # Add currency symbol and formatting
    'label': 'function(context) { return "₹" + context.parsed.y + "L revenue"; }',
    # Add additional context in footer
    'footer': 'function(tooltipItems) { return "Click for detailed breakdown"; }'
  }
}

Configuration object ready for Chart.js options.plugins.tooltip

The best dashboards anticipate questions. Revenue is down — why? Click the bar to drill into regional breakdown. Ratings dropped — which products specifically? Every chart should connect to deeper analysis.

Mobile-first design isn't optional anymore. 60% of executive dashboard views happen on phones during commutes. Test every chart on a 6-inch screen — if you can't read it clearly, redesign.

Quiz