Replace score bars with Google Gauge visualization

2026-08-15 11:34:19 -04:00
parent a979dcba4b
commit 5694a1ed0c
3 changed files with 55 additions and 5 deletions
@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // Load Google Charts
+  google.charts.load('current', {'packages':['gauge']});
+  google.charts.setOnLoadCallback(drawGauges);
+
+  // Draw all gauges on the page
+  function drawGauges() {
+    const gaugeContainers = document.querySelectorAll('.gauge-container');
+    
+    gaugeContainers.forEach(container => {
+      const label = container.dataset.label;
+      const score = parseFloat(container.dataset.score);
+      
+      // Create data table
+      const data = google.visualization.arrayToDataTable([
+        ['Label', 'Value'],
+        [label, score]
+      ]);
+
+      // Configure gauge options
+      const options = {
+        width: 200,
+        height: 160,
+        redFrom: -100,
+        redTo: -50,
+        yellowFrom: -50,
+        yellowTo: 0,
+        greenFrom: 0,
+        greenTo: 50,
+        minorTicks: 5,
+        min: -100,
+        max: 100,
+        majorTicks: [-100, -50, 0, 50, 100],
+        animation: {
+          duration: 500,
+          easing: 'out'
+        }
+      };
+
+      // Create and draw the gauge
+      const chart = new google.visualization.Gauge(container);
+      chart.draw(data, options);
+    });
+  }
+
+  // Re-draw gauges when window is resized
+  window.addEventListener('resize', function() {
+    if (typeof google !== 'undefined' && google.visualization) {
+      drawGauges();
+    }
+  });
+});