Age range distribution; bar chart with the different ages.

index.html

@@ -201,7 +201,7 @@
         <section class="py-24 bg-gray-900">
             <div class="container mx-auto px-4">
                 <h3 class="text-3xl font-bold text-center mb-12">Nightlife Analytics</h3>
-                <!-- Age Range Pie Chart -->
+                <!-- Age Range Bar Chart -->
                 <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>
@@ -212,14 +212,12 @@
                             <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 flex justify-center items-center" id="ageChart">
-                        <div class="w-48 h-48 md:w-64 md:h-64">
-                            <!-- Pie Chart will be rendered here -->
-                        </div>
+                    <div class="h-64 w-full" id="ageChart">
+                        <!-- Bar Chart will be rendered here -->
                     </div>
                 </div>
                 
-                <!-- Music Genre Bar 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>
@@ -230,8 +228,10 @@
                             <button class="bg-indigo-900 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-800 transition" id="genre-hiphop">Hip Hop</button>
                         </div>
                     </div>
-                    <div class="h-64 w-full" id="genreChart">
-                        <!-- Bar Chart will be rendered here -->
+                    <div class="h-64 w-full flex justify-center items-center" id="genreChart">
+                        <div class="w-48 h-48 md:w-64 md:h-64">
+                            <!-- Pie Chart will be rendered here -->
+                        </div>
                     </div>
                 </div>
 </div>
@@ -357,13 +357,14 @@
         // Initialize Vanta.js background
         // Initialize Charts
         document.addEventListener('DOMContentLoaded', function() {
-            // Age Range Pie Chart
-            const ageCtx = document.getElementById('ageChart').querySelector('div').getContext('2d');
+            // Age Range Bar Chart
+            const ageCtx = document.getElementById('ageChart').getContext('2d');
             const ageChart = new Chart(ageCtx, {
-                type: 'pie',
+                type: 'bar',
                 data: {
                     labels: ['18-25', '25-35', '35-45', '45+'],
                     datasets: [{
+                        label: 'Percentage of Visitors',
                         data: [42, 38, 15, 5],
                         backgroundColor: [
                             'rgba(219, 39, 119, 0.7)',
@@ -382,10 +383,25 @@
                 },
                 options: {
                     responsive: true,
-                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 100,
+                            title: {
+                                display: true,
+                                text: 'Percentage (%)'
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Age Range'
+                            }
+                        }
+                    },
                     plugins: {
                         legend: {
-                            position: 'right',
+                            display: false
                         },
                         title: {
                             display: true,
@@ -398,14 +414,13 @@
                 }
             });
 
-            // Genre Bar Chart
-            const genreCtx = document.getElementById('genreChart').getContext('2d');
+            // Music Genre Pie Chart
+            const genreCtx = document.getElementById('genreChart').querySelector('div').getContext('2d');
             const genreChart = new Chart(genreCtx, {
-                type: 'bar',
+                type: 'pie',
                 data: {
                     labels: ['EDM', 'Hip Hop', 'Rock', 'R&B', 'Jazz', 'Alternative', 'Pop', 'Other'],
                     datasets: [{
-                        label: 'Venues by Genre',
                         data: [25, 20, 18, 15, 10, 7, 4, 1],
                         backgroundColor: [
                             'rgba(219, 39, 119, 0.7)',
@@ -432,24 +447,10 @@
                 },
                 options: {
                     responsive: true,
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            title: {
-                                display: true,
-                                text: 'Number of Venues'
-                            }
-                        },
-                        x: {
-                            title: {
-                                display: true,
-                                text: 'Music Genre'
-                            }
-                        }
-                    },
+                    maintainAspectRatio: false,
                     plugins: {
                         legend: {
-                            display: false
+                            position: 'right',
                         },
                         title: {
                             display: true,
@@ -460,7 +461,7 @@
                         }
                     }
                 }
-            });
+});
 // Filter buttons functionality
             document.querySelectorAll('#age-all, #age-18-25, #age-25-35, #age-35-45').forEach(btn => {
                 btn.addEventListener('click', function() {