Update index.html

index.html

@@ -135,6 +135,7 @@
 
         <div class="chart-box">
             <canvas id="connectionsChart"></canvas>
+            <canvas id="webinarChart"></canvas>
         </div>
 
 
@@ -142,6 +143,7 @@
 
         <div class="chart-box">
             <canvas id="supportTimeChart"></canvas>
+            <canvas id="webinarTime"></canvas>
         </div>
 
         <!-- <div class="chart-container">
@@ -187,6 +189,8 @@
         var markers = [];
         var chart1 = null;
         var chart2 = null;
+        var chart3 = null;
+        var chart4 = null;
 
         function updateMarkers() {
             var selectedCategory = document.getElementById("category").value;
@@ -228,6 +232,8 @@
 
         if (chart1) chart1.destroy();
         if (chart2) chart2.destroy();
+        if (chart3) chart3.destroy(); 
+        if (chart4) chart4.destroy(); 
 
         var ctx1 = document.getElementById('connectionsChart').getContext('2d');
         chart1 = new Chart(ctx1, {
@@ -317,6 +323,95 @@
                 }
             }
         });
+
+        var ctx3 = document.getElementById('webinarChart').getContext('2d');
+        chart3 = new Chart(ctx3, {
+            type: 'bar',
+            data: {
+                labels: cityNames,
+                datasets: [{
+                    label: 'Average Monthly Webinar Connections',
+                    data: avgSupportTimeData,
+                    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 Webinar Connections',
+                            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 ctx4 = document.getElementById('webinarTime').getContext('2d');
+        chart4 = new Chart(ctx4, {
+            type: 'bar',
+            data: {
+                labels: cityNames,
+                datasets: [{
+                    label: 'Average Monthly Webinar Time (hrs)',
+                    data: avgSupportTimeData,
+                    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)',
+                            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'
+                }
+            }
+        });
+
     }
 
         updateMarkers();