Advanced Challenges

Master sophisticated coding techniques and system design with AI assistance.

Data Visualization Dashboard

Create a dynamic data visualization dashboard with AI guidance.

HTML Structure

<!-- Ask AI: "Create HTML structure for a data visualization dashboard" -->
<div class="dashboard">
    <header class="dashboard-header">
        <h1>Data Analytics Dashboard</h1>
        <div class="controls">
            <select id="dataSource">
                <option value="sales">Sales Data</option>
                <option value="traffic">Website Traffic</option>
                <option value="users">User Growth</option>
            </select>
            <button id="refreshData">Refresh Data</button>
        </div>
    </header>
    
    <div class="dashboard-grid">
        <div class="card" id="chartArea1">
            <h3>Trend Analysis</h3>
            <div class="chart-container"></div>
        </div>
        
        <div class="card" id="chartArea2">
            <h3>Distribution</h3>
            <div class="chart-container"></div>
        </div>
        
        <div class="card" id="statsArea">
            <h3>Key Statistics</h3>
            <div class="stats-container">
                <div class="stat-item">
                    <span class="stat-label">Total</span>
                    <span class="stat-value" id="statTotal">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Average</span>
                    <span class="stat-value" id="statAvg">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Growth</span>
                    <span class="stat-value" id="statGrowth">0%</span>
                </div>
            </div>
        </div>
        
        <div class="card" id="dataTable">
            <h3>Raw Data</h3>
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Value</th>
                            <th>Category</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

JavaScript Implementation (Partial)

// Ask AI: "Write JavaScript for a data dashboard that fetches and visualizes data"
// Using Chart.js for visualization
import Chart from 'chart.js/auto';

class Dashboard {
    constructor() {
        this.currentDataSource = 'sales';
        this.charts = {};
        this.data = {};
        
        this.initializeEventListeners();
        this.loadData();
    }
    
    initializeEventListeners() {
        document.getElementById('dataSource').addEventListener('change', (e) => {
            this.currentDataSource = e.target.value;
            this.loadData();
        });
        
        document.getElementById('refreshData').addEventListener('click', () => {
            this.loadData();
        });
    }
    
    async loadData() {
        try {
            const response = await fetch(`/api/data/${this.currentDataSource}`);
            const data = await response.json();
            
            if (!data.success) {
                throw new Error(data.message || 'Failed to load data');
            }
            
            this.data = data.data;
            this.updateDashboard();
        } catch (error) {
            console.error('Error loading data:', error);
            alert('Failed to load data. Please try again later.');
        }
    }
    
    updateDashboard() {
        this.updateCharts();
        this.updateStats();
        this.updateTable();
    }
    
    updateCharts() {
        // Trend Analysis Chart
        this.createOrUpdateChart('chartArea1', 'line', {
            labels: this.data.dates,
            datasets: [{
                label: this.getDataSourceLabel(),
                data: this.data.values,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        });
        
        // Distribution Chart
        this.createOrUpdateChart('chartArea2', 'pie', {
            labels: this.data.categories,
            datasets: [{
                label: 'Distribution',
                data: this.data.categoryValues,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    'rgb(75, 192, 192)',
                    'rgb(153, 102, 255)'
                ]
            }]
        });
    }
    
    // ... More methods for updating stats and table ...
    
    createOrUpdateChart(containerId, type, data) {
        const container = document.querySelector(`#${containerId} .chart-container`);
        
        if (this.charts[containerId]) {
            this.charts[containerId].destroy();
        }
        
        const ctx = document.createElement('canvas');
        container.innerHTML = '';
        container.appendChild(ctx);
        
        this.charts[containerId] = new Chart(ctx, {
            type: type,
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    }
    
    getDataSourceLabel() {
        switch(this.currentDataSource) {
            case 'sales': return 'Sales Revenue';
            case 'traffic': return 'Website Visitors';
            case 'users': return 'User Count';
            default: return 'Value';
        }
    }
}