Update index.html

index.html

@@ -87,6 +87,11 @@
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            /*NUEVO*/
+            /*height: 100px;*/ /* Aumenta la altura del contenedor */
+            /*display: flex;
+            justify-content: center;
+            align-items: center;*/
         }
 
         canvas {
@@ -136,6 +141,7 @@
         <div class="chart-box">
             <canvas id="connectionsChart"></canvas>
             <canvas id="webinarChart"></canvas>
+            <canvas id="recordingChart"></canvas>
         </div>
 
 
@@ -144,6 +150,7 @@
         <div class="chart-box">
             <canvas id="supportTimeChart"></canvas>
             <canvas id="webinarTime"></canvas>
+            <canvas id="recordingTime"></canvas>
         </div>
 
         <!-- <div class="chart-container">
@@ -155,20 +162,22 @@
             </div>
         </div> -->
     </div>
+    
 
+    
     <script>
         var locations = [
-            { name: "Ragusa", coords: [36.9257, 14.7244], category: "operative", connections: 12, avgSupportTime: 12 }, // Ragusa, Italia
-            { name: "Seville", coords: [37.3886, -5.9823], category: "operative", connections: 5, avgSupportTime: 1 }, // Sevilla, España
-            { name: "Groningen", coords: [53.2194, 6.5665], category: "operative", connections: 7, avgSupportTime: 3 }, // Groningen, Países Bajos
-            { name: "Cape Town", coords: [-33.9249, 18.4241], category: "operative", connections: 1, avgSupportTime: 0 }, // Ciudad del Cabo, Sudáfrica
-            { name: "Bern", coords: [46.9481, 7.4474], category: "operative", connections: 0, avgSupportTime: 0 }, // Berna, Suiza
-            { name: "Kiel", coords: [54.3233, 10.1228], category: "removed", connections: 0, avgSupportTime: 0 }, // Kiel, Alemania
-            { name: "Le Mans", coords: [17.0151, 54.0924], category: "assessment", connections: 0, avgSupportTime: 0 }, // Salalah, Omán
-            { name: "Le Mans", coords: [48.0077, 0.1996], category: "assessment", connections: 0, avgSupportTime: 0 }, // Le Mans, Francia
-            { name: "Gdansk", coords: [54.3520, 18.6466], category: "assessment", connections: 0, avgSupportTime: 0 }, // Gdansk, Polonia
-            { name: "Prague", coords: [50.0755, 14.4378], category: "assessment", connections: 0, avgSupportTime: 0 }, // Praga, República Checa
-            { name: "Kuwait", coords: [29.3759, 47.9774], category: "assessment", connections: 0, avgSupportTime: 0 } // Kuwait, Kuwait
+            { name: "Ragusa", coords: [36.9257, 14.7244], category: "operative", connections: 12, avgSupportTime: 12, webinars: 1, avgWebinarTime: 1 , recordings: 0, avgRecordingTime: 0}, // Ragusa, Italia
+            { name: "Seville", coords: [37.3886, -5.9823], category: "operative", connections: 5, avgSupportTime: 1, webinars: 2, avgWebinarTime: 1 , recordings: 0, avgRecordingTime: 0}, // Sevilla, España
+            { name: "Groningen", coords: [53.2194, 6.5665], category: "operative", connections: 7, avgSupportTime: 3, webinars: 0, avgWebinarTime: 0 , recordings: 0, avgRecordingTime: 0}, // Groningen, Países Bajos
+            { name: "Cape Town", coords: [-33.9249, 18.4241], category: "operative", connections: 1, avgSupportTime: 0, webinars: 7, avgWebinarTime: 1 , recordings: 0, avgRecordingTime: 0}, // Ciudad del Cabo, Sudáfrica
+            { name: "Bern", coords: [46.9481, 7.4474], category: "operative", connections: 0, avgSupportTime: 0, webinars: 0, avgWebinarTime: 0 , recordings: 0, avgRecordingTime: 0}, // Berna, Suiza
+            { name: "Kiel", coords: [54.3233, 10.1228], category: "removed", connections: 0, avgSupportTime: 0, webinars: 0, avgWebinarTime: 0 , recordings: 0, avgRecordingTime: 0}, // Kiel, Alemania
+            { name: "Le Mans", coords: [17.0151, 54.0924], category: "assessment", connections: 0, avgSupportTime: 0, webinars: 0, avgWebinarTime: 0 , recordings: 0, avgRecordingTime: 0}, // Salalah, Omán
+            { name: "Le Mans", coords: [48.0077, 0.1996], category: "assessment", connections: 0, avgSupportTime: 0, webinars: 0, avgWebinarTime: 0 , recordings: 0, avgRecordingTime: 0}, // Le Mans, Francia
+            { name: "Gdansk", coords: [54.3520, 18.6466], category: "assessment", connections: 0, avgSupportTime: 0, webinars: 0, avgWebinarTime: 0 , recordings: 0, avgRecordingTime: 0}, // Gdansk, Polonia
+            { name: "Prague", coords: [50.0755, 14.4378], category: "assessment", connections: 0, avgSupportTime: 0, webinars: 0, avgWebinarTime: 0 , recordings: 0, avgRecordingTime: 0}, // Praga, República Checa
+            { name: "Kuwait", coords: [29.3759, 47.9774], category: "assessment", connections: 0, avgSupportTime: 0, webinars: 0, avgWebinarTime: 0 , recordings: 0, avgRecordingTime: 0} // Kuwait, Kuwait
         ];
 
         var map = L.map('map').setView([50.0755, 14.4378], 3);
@@ -191,6 +200,8 @@
         var chart2 = null;
         var chart3 = null;
         var chart4 = null;
+        var chart5 = null;
+        var chart6 = null;
 
         function updateMarkers() {
             var selectedCategory = document.getElementById("category").value;
@@ -224,16 +235,27 @@
             updateCharts(filteredLocations);
         }
 
+
+         
+
         function updateCharts(filteredLocations) {
         var cityNames = filteredLocations.map(location => location.name);
-        var connectionsData = filteredLocations.map(location => location.connections);
+        
+        var connectionsData = filteredLocations.map(location => location.connections);    
         var avgSupportTimeData = filteredLocations.map(location => location.avgSupportTime);
+        var webinarData = filteredLocations.map(location => location.webinars);
+        var avgWebinarTimeData = filteredLocations.map(location => location.avgWebinarTime);
+        var recordingData = filteredLocations.map(location => location.recordings);
+        var avgRecordingTimeData = filteredLocations.map(location => location.avgRecordingTime);
+        
         var categoryColorsData = filteredLocations.map(location => categoryColors[location.category]);
 
         if (chart1) chart1.destroy();
         if (chart2) chart2.destroy();
         if (chart3) chart3.destroy(); 
         if (chart4) chart4.destroy(); 
+        if (chart5) chart3.destroy(); 
+        if (chart6) chart4.destroy(); 
 
         var ctx1 = document.getElementById('connectionsChart').getContext('2d');
         chart1 = new Chart(ctx1, {
@@ -323,7 +345,7 @@
                 }
             }
         });
-
+        
         var ctx3 = document.getElementById('webinarChart').getContext('2d');
         chart3 = new Chart(ctx3, {
             type: 'bar',
@@ -331,7 +353,7 @@
                 labels: cityNames,
                 datasets: [{
                     label: 'Average Monthly Webinar Connections',
-                    data: avgSupportTimeData,
+                    data: webinarData,
                     backgroundColor: categoryColorsData,
                     borderColor: '#333',
                     borderWidth: 1,
@@ -374,8 +396,100 @@
             data: {
                 labels: cityNames,
                 datasets: [{
-                    label: 'Average Monthly Webinar Time (hrs)',
-                    data: avgSupportTimeData,
+                    label: 'Average Monthly Webinar Time (hrs/session)',
+                    data: avgWebinarTimeData,
+                    backgroundColor: categoryColorsData,
+                    borderColor: '#333',
+                    borderWidth: 1,
+                    borderRadius: 5,
+                    hoverBackgroundColor: 'rgba(0, 0, 0, 0.2)'
+                }]
+            },
+            options: {
+                plugins: {
+                    legend: { display: false },
+                    title: {
+                            display: true,
+                            text: 'Average Monthly Webinar Time (hrs/session)',
+                            font: {
+                                size: 12
+                            },
+                            color: '#333'
+                        }
+                },
+                scales: {
+                    x: {
+                        ticks: { color: '#333' },
+                        grid: { display: false }
+                    },
+                    y: {
+                        ticks: { color: '#333' },
+                        grid: { color: 'rgba(0,0,0,0.1)' }
+                    }
+                },
+                animation: {
+                    duration: 1000,
+                    easing: 'easeInOutBounce'
+                }
+            }
+        });
+
+
+
+        /*RECORDINGS*/
+
+        var ctx5 = document.getElementById('recordingChart').getContext('2d');
+        chart5 = new Chart(ctx5, {
+            type: 'bar',
+            data: {
+                labels: cityNames,
+                datasets: [{
+                    label: 'Average Monthly Recordings',
+                    data: recordingData,
+                    backgroundColor: categoryColorsData,
+                    borderColor: '#333',
+                    borderWidth: 1,
+                    borderRadius: 5,
+                    hoverBackgroundColor: 'rgba(0, 0, 0, 0.2)'
+                }]
+            },
+            options: {
+                plugins: {
+                    legend: { display: false },
+                    title: {
+                            display: true,
+                            text: 'Monthly Recordings',
+                            font: {
+                                size: 12
+                            },
+                            color: '#333'
+                        }
+                },
+                scales: {
+                    x: {
+                        ticks: { color: '#333' },
+                        grid: { display: false }
+                    },
+                    y: {
+                        ticks: { color: '#333' },
+                        grid: { color: 'rgba(0,0,0,0.1)' }
+                    }
+                },
+                animation: {
+                    duration: 1000,
+                    easing: 'easeInOutBounce'
+                }
+            }
+        });
+
+        var ctx6 = document.getElementById('recordingTime').getContext('2d');
+        chart6 = new Chart(ctx6, {
+            type: 'bar',
+            data: {
+                labels: cityNames,
+                datasets: [{
+                    label: 'Average Monthly Recording Time (hrs)',
+                    data: avgRecordingTimeData,
                     backgroundColor: categoryColorsData,
                     borderColor: '#333',
                     borderWidth: 1,
@@ -388,7 +502,7 @@
                     legend: { display: false },
                     title: {
                             display: true,
-                            text: 'Average Monthly Webinar Time (hrs)',
+                            text: 'Average Monthly Recording Time (hrs)',
                             font: {
                                 size: 12
                             },
@@ -420,3 +534,5 @@
 </body>
 </html>
 
+
+