From b47a70d8b8d8b3ad1783b8ed816eab54a1991e95 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 02:27:06 -0500
Subject: [PATCH] Fix Google Charts race condition in bar graph view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bar graph was calling drawChart3() before Google Charts library
finished loading, causing "Cannot read properties of undefined
(reading 'arrayToDataTable')" error.

Applied same fix as performance page:
- Check if visualization already loaded before calling google.load
- Use callback parameter to ensure charts only draw after load
- Add flag to prevent duplicate library loads
- Guard against missing DOM elements
- Handle AJAX-loaded partial context

Fixes dashboard statistics bar graph view errors.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/dashboard/bar_graph.html.erb | 121 ++++++++++++++++---------
 1 file changed, 76 insertions(+), 45 deletions(-)

diff --git a/app/views/dashboard/bar_graph.html.erb b/app/views/dashboard/bar_graph.html.erb
index ed8c550..8c8041c 100644
--- a/app/views/dashboard/bar_graph.html.erb
+++ b/app/views/dashboard/bar_graph.html.erb
@@ -1,54 +1,85 @@
- <div id="column_chart"></div>
- <!-- Google Visualization JS -->
+<div id="column_chart"></div>
+
+<!-- Google Visualization JS -->
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
 <script type="text/javascript">
-   // google.load("visualization", "1", {packages:["corechart"]});
-  
- 
+// Prevent multiple initializations
+if (typeof window.barChartLoaded === 'undefined') {
+  window.barChartLoaded = false;
+}
 
-	function drawChart3() {
-     var data = google.visualization.arrayToDataTable([
-       ['Year', 'Visitors', 'Orders', 'Income', 'Expenses'],
-       ['2007', 300, 800, 900, 300],
-       ['2008', 1170, 860, 1220, 564],
-       ['2009', 260, 1120, 2870, 2340],
-       ['2010', 1030, 540, 3430, 1200],
-       ['2011', 200, 700, 1700, 770],
-       ['2012', 1170, 2160, 3920, 800], ]);
+function drawChart3() {
+  // Guard against calling before Google Charts is loaded
+  if (typeof google === 'undefined' || !google.visualization) {
+    console.warn('Google Charts not loaded yet');
+    return;
+  }
 
-     var options = {
-       width: 'auto',
-       height: '160',
-       backgroundColor: 'transparent',
-       colors: ['#b5799e', '#579da9', '#e26666', '#1e825e', '#dba26b'],
-       tooltip: {
-         textStyle: {
-           color: '#666666',
-           fontSize: 11
-         },
-         showColorCode: true
-       },
-       legend: {
-         textStyle: {
-           color: 'black',
-           fontSize: 12
-         }
-       },
-       chartArea: {
-         left: 60,
-         top: 10,
-         height: '80%'
-       },
-     };
+  var chartElement = document.getElementById('column_chart');
+  if (!chartElement) {
+    console.warn('Chart element not found');
+    return;
+  }
 
-     var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));
-     chart.draw(data, options);
-   }
+  var data = google.visualization.arrayToDataTable([
+    ['Year', 'Visitors', 'Orders', 'Income', 'Expenses'],
+    ['2007', 300, 800, 900, 300],
+    ['2008', 1170, 860, 1220, 564],
+    ['2009', 260, 1120, 2870, 2340],
+    ['2010', 1030, 540, 3430, 1200],
+    ['2011', 200, 700, 1700, 770],
+    ['2012', 1170, 2160, 3920, 800]
+  ]);
 
+  var options = {
+    width: 'auto',
+    height: '160',
+    backgroundColor: 'transparent',
+    colors: ['#b5799e', '#579da9', '#e26666', '#1e825e', '#dba26b'],
+    tooltip: {
+      textStyle: {
+        color: '#666666',
+        fontSize: 11
+      },
+      showColorCode: true
+    },
+    legend: {
+      textStyle: {
+        color: 'black',
+        fontSize: 12
+      }
+    },
+    chartArea: {
+      left: 60,
+      top: 10,
+      height: '80%'
+    },
+  };
 
-$(document).ready(
-  drawChart3()
-);
+  var chart = new google.visualization.ColumnChart(chartElement);
+  chart.draw(data, options);
+}
 
-</script>
\ No newline at end of file
+function initializeBarChart() {
+  // Check if Google Charts visualization is already loaded
+  if (typeof google !== 'undefined' && google.visualization && google.visualization.ColumnChart) {
+    drawChart3();
+    window.barChartLoaded = true;
+  } else if (typeof google !== 'undefined' && google.load && !window.barChartLoaded) {
+    // Load Google Charts
+    google.load("visualization", "1", {
+      packages: ["corechart"],
+      callback: function() {
+        drawChart3();
+        window.barChartLoaded = true;
+      }
+    });
+  } else {
+    console.error('Google JSAPI not available');
+  }
+}
+
+// Initialize immediately (page is already loaded when this partial loads via AJAX)
+initializeBarChart();
+</script>