From c6f69b5d69fd56e8531dac69790e4813b4a1e4d2 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 01:04:20 -0500
Subject: [PATCH] Fix Google Charts race condition on performance page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed "Cannot read properties of undefined (reading 'arrayToDataTable')"
error caused by calling Google Charts API before it finished loading.

Changes:
- Move google.load() call below function definitions
- Use callback parameter to ensure charts load after library is ready
- Add guard check in drawChart2() to verify google.visualization exists
- Wrap chart drawing in $(document).ready() within the callback

This ensures the visualization library is fully loaded before attempting
to create charts, preventing race condition errors.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/performance/index.html.erb | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/app/views/performance/index.html.erb b/app/views/performance/index.html.erb
index 780b891..f6ff62b 100644
--- a/app/views/performance/index.html.erb
+++ b/app/views/performance/index.html.erb
@@ -51,11 +51,13 @@
 
 <script type="text/javascript">
 
- google.load("visualization", "1", {
-  packages: ["corechart"]
-});
-
 function drawChart2() {
+  // Guard against calling before Google Charts is loaded
+  if (typeof google === 'undefined' || !google.visualization) {
+    console.warn('Google Charts not loaded yet');
+    return;
+  }
+
   var data = google.visualization.arrayToDataTable([
     ['Year', 'Score'],
     <% @perf.each do |p| %>
@@ -118,9 +120,15 @@ function makeActive(){
   $('li[id="performance"]').addClass('active');
 };
 
-$(document).ready(function () {
-  drawChart2(),
-  makeActive()
+// Load Google Charts and set callback
+google.load("visualization", "1", {
+  packages: ["corechart"],
+  callback: function() {
+    $(document).ready(function () {
+      drawChart2();
+      makeActive();
+    });
+  }
 });
 
 </script>
\ No newline at end of file