Demo Mode

No student ID available

Telebort | Learning to code made fun!

Chart.js Data Visualization Dashboard - Activity 07 - Discovery Challenge

Transform raw API data into beautiful, interactive charts! This template teaches you how to visualize data using Chart.js, one of the most popular charting libraries for web applications.

🎯 Learning Objectives

By completing this activity, you will:

Integrate Chart.js library into web applications
Transform API responses into chart-ready data formats
Create line charts, bar charts, and doughnut charts
Handle real-time data updates and visualization
Implement responsive chart layouts that adapt to screen sizes

🚀 Getting Started

⚡ Quick Start (See Results in 30 Seconds!)

IMPORTANT: This template includes WORKING CHARTS! You can see them immediately:

Navigate to this folder in your terminal/command prompt

Start a local server (choose one):

bash

# Mac/Linux:
python3 -m http.server 8002

# Windows:
python -m http.server 8002

# Alternative using Node.js:
npx http-server -p 8002

Open your browser to: http://localhost:8002
Click the buttons - charts appear immediately!
- "Load Weather Data" shows a line chart with temperature trends
- "Load Stock Data" displays a bar chart with stock prices
- "Load User Analytics" creates doughnut and radar charts
- "Clear All Charts" resets the dashboard

🎯 What's Already Working

65% of the code is implemented for you:

✅ Line chart with weather data (fully working)
✅ Bar chart with stock prices (fully working)
✅ Doughnut chart with device distribution (fully working)
✅ Responsive chart layouts (fully working)
⚠️ Real-time chart updates (TODO for you)
⚠️ Chart customization options (TODO for you)
⚠️ Advanced features (TODO for creativity)

📝 Your Learning Tasks

First, test the working charts to see how data transforms into visualizations
Experiment with the buttons to understand the chart lifecycle
Then complete the TODO sections to add real-time updates
Finally, customize and enhance with your own creative features

📋 Tasks to Complete

TODO 1: Real-time Weather Updates (Medium)

Implement the startRealTimeUpdates() function to automatically refresh weather data.

Requirements:

Update the line chart every 5 seconds with new temperature data
Show visual indicator when chart is updating
Stop updates when "Clear All Charts" is clicked

Success Criteria:

Chart animates smoothly with each update
Temperature values change realistically (+/-2 degrees)
User can start/stop real-time updates
Console logs each update timestamp

Hint: Use setInterval() and modify the existing weather data slightly for each update.

TODO 2: Custom Chart Colors (Easy)

Add a color picker to customize chart appearance.

Requirements:

Create color input controls for each chart type
Update chart colors dynamically when user picks new colors
Save color preferences to localStorage
Restore saved colors on page load

Success Criteria:

Each chart can have its own color scheme
Colors persist after page refresh
Reset button restores default colors
Color changes update smoothly without full chart redraw

TODO 3: Bar Chart Sorting (Medium)

Implement sorting functionality for the stock price bar chart.

Requirements:

Add buttons: "Sort A-Z", "Sort Z-A", "Sort by Price"
Update chart data based on selected sort order
Animate transitions between sort orders
Display current sort method

Success Criteria:

All three sort methods work correctly
Chart updates smoothly with animation
Labels and data stay synchronized
Active sort button is highlighted

TODO 4: Doughnut Chart Filtering (Challenge)

Add interactive filtering to the device distribution doughnut chart.

Requirements:

Click on legend items to hide/show segments
Display only devices ``with >15``% market share
Show/hide small segments (<5% share)
Update percentages when segments are hidden

Success Criteria:

Clicking legend toggles segment visibility
Percentages recalculate correctly
Chart redraws with smooth animation
At least one segment always remains visible

TODO 5: Export Chart as Image (Challenge)

Implement chart export functionality to save charts as PNG images.

Requirements:

Add "Download Chart" button for each chart
Use Chart.js toBase64Image() method
Generate filename with chart type and timestamp
Trigger browser download automatically

Success Criteria:

Downloads work in all modern browsers
Image quality matches screen display
Filename format: chart-[type]-[timestamp].png
Transparent background option available

🛠 Chart.js Reference

Chart Types in This Template

One. Line Chart (Weather Data)

Purpose: Show trends over time
Best for: Temperature, stock prices, website traffic
Features: Filled areas, multiple datasets, smooth curves

2. Bar Chart (Stock Data)

Purpose: Compare values across categories
Best for: Sales figures, survey results, comparisons
Features: Colorful bars, hover interactions, sorting

3. Doughnut Chart (Device Distribution)

Purpose: Show proportions and percentages
Best for: Market share, demographics, resource allocation
Features: Interactive segments, legend, percentage labels

Basic Chart.js Setup Pattern

javascript

// 1. Get canvas context
const ctx = document.getElementById('myChart').getContext('2d');

// 2. Create chart instance
const myChart = new Chart(ctx, {
    type: 'line',  // line, bar, doughnut, radar, etc.
    data: {
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3],
            borderColor: '#4CAF50',
            backgroundColor: 'rgba(76, 175, 80, 0.1)'
        }]
    },
    options: {
        responsive: true,
        scales: { y: { beginAtZero: true } }
    }
});

// 3. Update chart data
myChart.data.datasets[0].data = [15, 22, 8];
myChart.update();

API Data Transformation Pattern

javascript

// Transform API response to Chart.js format
function transformWeatherData(apiResponse) {
    return {
        labels: apiResponse.dates,           // X-axis labels
        datasets: [{
            label: 'Temperature (°F)',
            data: apiResponse.temperatures,  // Y-axis values
            borderColor: '#FF6384',
            fill: true,
            tension: 0.4  // Smooth curves
        }]
    };
}