Bar chart

index.html

@@ -205,19 +205,21 @@
                 <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6 mb-12">
                     <div class="flex justify-between items-center mb-6">
                         <h4 class="text-2xl font-bold">Age Range Distribution</h4>
-                        <div class="flex space-x-2">
-                            <button class="bg-gray-700 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-600 transition" id="age-all">All</button>
+                        <div class="flex flex-wrap gap-2">
+                            <button class="bg-pink-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-pink-700 transition active" id="age-all">All</button>
                             <button class="bg-pink-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-pink-800 transition" id="age-18-25">18-25</button>
                             <button class="bg-purple-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-purple-800 transition" id="age-25-35">25-35</button>
                             <button class="bg-blue-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-800 transition" id="age-35-45">35-45</button>
                         </div>
                     </div>
-                    <div class="h-64 w-full" id="ageChart">
-                        <!-- Bar Chart will be rendered here -->
+                    <div class="relative h-64 w-full">
+                        <canvas id="ageChart"></canvas>
+                        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none" id="noDataMessage" style="display: none;">
+                            <p class="text-gray-400 bg-black bg-opacity-70 px-4 py-2 rounded-lg">No data available for selected filter</p>
+                        </div>
                     </div>
                 </div>
-                
-                <!-- Music Genre Pie Chart -->
+<!-- Music Genre Pie Chart -->
                 <div class="bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-6">
                     <div class="flex justify-between items-center mb-6">
                         <h4 class="text-2xl font-bold">Music Genre Popularity</h4>
@@ -367,35 +369,55 @@
                         label: 'Percentage of Visitors',
                         data: [42, 38, 15, 5],
                         backgroundColor: [
-                            'rgba(219, 39, 119, 0.7)',
-                            'rgba(168, 85, 247, 0.7)',
-                            'rgba(59, 130, 246, 0.7)',
-                            'rgba(156, 163, 175, 0.7)'
+                            'rgba(236, 72, 153, 0.8)',
+                            'rgba(167, 139, 250, 0.8)',
+                            'rgba(99, 102, 241, 0.8)',
+                            'rgba(156, 163, 175, 0.8)'
                         ],
                         borderColor: [
-                            'rgba(219, 39, 119, 1)',
-                            'rgba(168, 85, 247, 1)',
-                            'rgba(59, 130, 246, 1)',
+                            'rgba(236, 72, 153, 1)',
+                            'rgba(167, 139, 250, 1)',
+                            'rgba(99, 102, 241, 1)',
                             'rgba(156, 163, 175, 1)'
                         ],
-                        borderWidth: 1
+                        borderWidth: 2,
+                        borderRadius: 4,
+                        borderSkipped: false
                     }]
                 },
                 options: {
                     responsive: true,
+                    maintainAspectRatio: false,
                     scales: {
                         y: {
                             beginAtZero: true,
-                            max: 100,
+                            max: 50,
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: 'rgba(255, 255, 255, 0.7)',
+                                callback: function(value) {
+                                    return value + '%';
+                                }
+                            },
                             title: {
                                 display: true,
-                                text: 'Percentage (%)'
+                                text: 'Percentage (%)',
+                                color: 'rgba(255, 255, 255, 0.7)'
                             }
                         },
                         x: {
+                            grid: {
+                                display: false
+                            },
+                            ticks: {
+                                color: 'rgba(255, 255, 255, 0.7)'
+                            },
                             title: {
                                 display: true,
-                                text: 'Age Range'
+                                text: 'Age Range',
+                                color: 'rgba(255, 255, 255, 0.7)'
                             }
                         }
                     },
@@ -403,18 +425,27 @@
                         legend: {
                             display: false
                         },
-                        title: {
-                            display: true,
-                            text: 'Age Range Distribution',
-                            font: {
-                                size: 16
+                        tooltip: {
+                            backgroundColor: 'rgba(17, 24, 39, 0.9)',
+                            titleColor: 'white',
+                            bodyColor: 'white',
+                            borderColor: 'rgba(255, 255, 255, 0.1)',
+                            borderWidth: 1,
+                            padding: 12,
+                            callbacks: {
+                                label: function(context) {
+                                    return context.parsed.y + '%';
+                                }
                             }
                         }
+                    },
+                    animation: {
+                        duration: 1000,
+                        easing: 'easeOutQuart'
                     }
                 }
             });
-
-            // Music Genre Pie Chart
+// Music Genre Pie Chart
             const genreCtx = document.getElementById('genreChart').querySelector('div').getContext('2d');
             const genreChart = new Chart(genreCtx, {
                 type: 'pie',
@@ -463,21 +494,47 @@
                 }
 });
 // Filter buttons functionality
+            // Filter buttons functionality
             document.querySelectorAll('#age-all, #age-18-25, #age-25-35, #age-35-45').forEach(btn => {
                 btn.addEventListener('click', function() {
+                    // Remove active class from all buttons
+                    document.querySelectorAll('#age-all, #age-18-25, #age-25-35, #age-35-45').forEach(b => {
+                        b.classList.remove('active', 'bg-pink-600');
+                        b.classList.add('bg-opacity-70');
+                    });
+                    
+                    // Add active class to clicked button
+                    this.classList.add('active', 'bg-pink-600');
+                    this.classList.remove('bg-opacity-70');
+
                     const filter = this.id.split('-').pop();
+                    const noDataMsg = document.getElementById('noDataMessage');
+                    
                     if (filter === 'all') {
+                        noDataMsg.style.display = 'none';
                         ageChart.data.datasets[0].data = [42, 38, 15, 5];
+                        ageChart.options.scales.y.max = 50;
                     } else {
-                        ageChart.data.datasets[0].data = [0, 0, 0, 0];
                         const index = ['18-25', '25-35', '35-45', '45+'].indexOf(filter.replace(/(\d+)-(\d+)/, '$1-$2'));
-                        if (index !== -1) ageChart.data.datasets[0].data[index] = [42, 38, 15, 5][index];
+                        
+                        if (index === 3) { // 45+ has very little data
+                            noDataMsg.style.display = 'flex';
+                            ageChart.data.datasets[0].data = [0, 0, 0, 0];
+                        } else {
+                            noDataMsg.style.display = 'none';
+                            ageChart.data.datasets[0].data = [0, 0, 0, 0];
+                            ageChart.data.datasets[0].data[index] = [42, 38, 15, 5][index];
+                            ageChart.options.scales.y.max = 50;
+                        }
                     }
+                    
                     ageChart.update();
                 });
             });
 
-            document.querySelectorAll('#genre-all, #genre-edm, #genre-rock, #genre-hiphop').forEach(btn => {
+            // Initialize first button as active
+            document.getElementById('age-all').classList.add('active', 'bg-pink-600');
+document.querySelectorAll('#genre-all, #genre-edm, #genre-rock, #genre-hiphop').forEach(btn => {
                 btn.addEventListener('click', function() {
                     const filter = this.id.split('-').pop();
                     if (filter === 'all') {