Dashboard Overview

+ value.toLocaleString(); } } } } } }); // Category Chart const categoryCtx = document.getElementById('categoryChart').getContext('2d'); new Chart(categoryCtx, { type: 'doughnut', data: { labels: ['Electronics', 'Clothing', 'Home', 'Books', 'Other'], datasets: [{ data: [35, 25, 20, 15, 5], backgroundColor: [ 'rgb(59, 130, 246)', 'rgb(16, 185, 129)', 'rgb(245, 158, 11)', 'rgb(239, 68, 68)', 'rgb(139, 92, 246)' ] }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } } }); // Customer Segments Chart const segmentCtx = document.getElementById('segmentChart').getContext('2d'); new Chart(segmentCtx, { type: 'pie', data: { labels: ['New', 'Returning', 'VIP'], datasets: [{ data: [25, 60, 15], backgroundColor: [ 'rgb(16, 185, 129)', 'rgb(59, 130, 246)', 'rgb(245, 158, 11)' ] }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } }); // Trend Chart const trendCtx = document.getElementById('trendChart').getContext('2d'); new Chart(trendCtx, { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Growth', data: [5, 8, 12, 15, 20, 25], backgroundColor: 'rgba(16, 185, 129, 0.8)' }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { callback: function(value) { return value + '%'; } } } } } }); // Interactive Chart const interactiveCtx = document.getElementById('interactiveChart').getContext('2d'); new Chart(interactiveCtx, { type: 'bar', data: { labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'], datasets: [{ label: 'Revenue', data: [15000, 22000, 18000, 25000], backgroundColor: 'rgba(59, 130, 246, 0.8)' }, { label: 'Orders', data: [120, 180, 150, 200], backgroundColor: 'rgba(16, 185, 129, 0.8)', yAxisID: 'y1' }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'top' } }, scales: { y: { type: 'linear', display: true, position: 'left', ticks: { callback: function(value) { return ' + value.toLocaleString(); } } }, y1: { type: 'linear', display: true, position: 'right', grid: { drawOnChartArea: false, }, } } } });

+ (value/1000) + 'k'; } } } } } });