Building a Food Delivery Dashboard

This is your capstone project! You'll build a complete operations dashboard for QuickBite, combining everything you've learned: multiple chart types, real-time updates, KPI cards, and interactive controls.

Dashboard Design Principles

A good dashboard answers these questions at a glance:

• What's happening now? → KPI cards with current metrics
• How are we trending? → Line chart showing time progression
• What's the breakdown? → Pie/doughnut for composition
• Where's the activity? → Bar chart for comparison

Try It: Live Operations Dashboard

This dashboard simulates real-time QuickBite operations. Toggle auto-refresh, adjust the interval, and watch the data update:

Dashboard Architecture

This dashboard combines:

1. KPI Cards (Top Row)

Four gradient cards showing current metrics:

• Active Orders: Real-time count with change indicator
• Revenue: Today's total with % change
• Delivery Time: Current average with trend
• Rating: Live customer satisfaction

2. Hourly Trend (Line Chart)

Shows order volume throughout the day - reveals lunch and dinner peaks.

3. Category Mix (Doughnut)

Revenue distribution by food category - shows business composition.

4. Order Status (Horizontal Bar)

Current pipeline: Pending → Preparing → In Transit → Delivered

5. Top Performers (Bar Chart)

Restaurant rankings by order volume.

Real-Time Updates

The dashboard simulates live data with:

// Start auto-refresh
function startAutoRefresh() {
  const interval = parseInt(intervalSelect.value);
  if (refreshTimer) clearInterval(refreshTimer);

  if (autoRefreshCheckbox.checked) {
    refreshTimer = setInterval(updateDashboard, interval);
  }
}

// Update all charts
function updateDashboard() {
  // Generate new data
  const newData = generateRealtimeData();

  // Update each chart
  hourlyChart.data.datasets[0].data = newData.hourly;
  hourlyChart.update('none'); // Skip animation for smoother updates

  // Update KPIs with change indicators
  updateKPIs(newData.kpis, previousValues);
  previousValues = newData.kpis;

  // Timestamp
  lastUpdated.textContent = 'Updated ' + new Date().toLocaleTimeString();
}

Responsive Layout

The grid adapts to screen size:

/* Desktop: 4 columns for KPIs, 2-column charts */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.chart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
}

/* Mobile: Single column */
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

Change Indicators

Show users what changed:

function updateKPI(element, newValue, oldValue, format) {
  element.textContent = format(newValue);

  const change = newValue - oldValue;
  const changeEl = element.nextElementSibling;

  if (oldValue) {
    const prefix = change >= 0 ? '+' : '';
    changeEl.textContent = `${prefix}${change} from last`;
    changeEl.style.color = change >= 0 ? '#22c55e' : '#ef4444';
  }
}

Dashboard Best Practices

1. Hierarchy of Information

Most important metrics at top, details below.

2. Consistent Refresh

Update all charts together to avoid confusion.

3. User Control

Let users pause auto-refresh when needed.

4. Performance

Use chart.update('none') to skip animations during frequent updates.

5. Mobile-First

Design for small screens, enhance for large.

Key Takeaways

• Combine multiple chart types to answer different questions
• Use KPI cards for at-a-glance metrics
• Implement auto-refresh with user controls
• Show change indicators to highlight what's different
• Design responsive layouts for all screen sizes
• Skip animations during frequent real-time updates

Congratulations! You've built a complete data visualization dashboard. Now take the quiz to test your knowledge!