Bits of .NET

📊 Data Dashboard = Visualization

Data needs visualization. JavaScript charts create interactive data dashboards.

📝 Dashboard Implementation

// Data Preparation
const salesData = [
    { month: 'Jan', sales: 12000 },
    { month: 'Feb', sales: 15000 },
    { month: 'Mar', sales: 18000 },
    { month: 'Apr', sales: 14000 },
    { month: 'May', sales: 22000 },
    { month: 'Jun', sales: 25000 }
];

// Chart.js Configuration
const ctx = document.getElementById('salesChart').getContext('2d');
const salesChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: salesData.map(d => d.month),
        datasets: [{
            label: 'Monthly Sales',
            data: salesData.map(d => d.sales),
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Monthly Sales Report'
            }
        }
    }
});

// Bar Chart
const barCtx = document.getElementById('barChart').getContext('2d');
const barChart = new Chart(barCtx, {
    type: 'bar',
    data: {
        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
        datasets: [{
            label: 'Revenue',
            data: [45000, 52000, 48000, 58000],
            backgroundColor: 'rgba(54, 162, 235, 0.5)'
        }]
    }
});

🎯 Advanced Dashboard

// Dashboard Component
class Dashboard {
    constructor() {
        this.charts = [];
        this.data = {};
        this.init();
    }

    init() {
        this.fetchData();
        this.setupCharts();
        this.setupRefresh();
    }

    async fetchData() {
        try {
            const response = await fetch('/api/dashboard-data');
            this.data = await response.json();
            this.updateCharts();
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    }

    setupCharts() {
        this.charts.push(this.createSalesChart());
        this.charts.push(this.createRevenueChart());
        this.charts.push(this.createUserChart());
    }

    updateCharts() {
        this.charts.forEach(chart => {
            chart.update();
        });
    }

    setupRefresh() {
        setInterval(() => {
            this.fetchData();
        }, 60000); // Refresh every minute
    }
}

// Real-time Updates
const socket = new WebSocket('wss://metrics.example.com');
socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    updateMetrics(data);
    updateCharts(data);
};

💡 Dashboard Tips

• Use appropriate chart types
• Keep it simple and focused
• Add interactivity
• Update data in real-time
• Make it responsive