From 8abf4090412146a429eb1ced1305b64ba9cd70bd Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 02:31:36 -0500
Subject: [PATCH] Fix Google Charts loading for AJAX-loaded bar graph
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The issue was that google.load() doesn't work reliably when called
from AJAX-loaded content. The callback wasn't firing.

Solution:
- Load Google Charts library once in main application.html.erb layout
- Bar graph partial now just polls for google.visualization to be ready
- Uses retry logic (50 attempts @ 100ms = 5 second timeout)
- Returns success/failure boolean for proper flow control
- Removed duplicate script loading from partial

This ensures Google Charts is available globally for all chart views
(bar graphs, pie charts, performance charts) without timing issues.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/dashboard/bar_graph.html.erb |  58 ++++++++++++-------------
 app/views/layouts/application.html.erb |   9 ++++
 db/development.sqlite3-shm             | Bin 32768 -> 32768 bytes
 db/development.sqlite3-wal             | Bin 41232 -> 8272 bytes
 4 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/app/views/dashboard/bar_graph.html.erb b/app/views/dashboard/bar_graph.html.erb
index 8c8041c..6da5204 100644
--- a/app/views/dashboard/bar_graph.html.erb
+++ b/app/views/dashboard/bar_graph.html.erb
@@ -1,25 +1,17 @@
 <div id="column_chart"></div>
 
-<!-- Google Visualization JS -->
-<script type="text/javascript" src="https://www.google.com/jsapi"></script>
-
 <script type="text/javascript">
-// Prevent multiple initializations
-if (typeof window.barChartLoaded === 'undefined') {
-  window.barChartLoaded = false;
-}
-
 function drawChart3() {
   // Guard against calling before Google Charts is loaded
   if (typeof google === 'undefined' || !google.visualization) {
-    console.warn('Google Charts not loaded yet');
-    return;
+    console.warn('Google Charts not loaded yet, waiting...');
+    return false;
   }
 
   var chartElement = document.getElementById('column_chart');
   if (!chartElement) {
     console.warn('Chart element not found');
-    return;
+    return false;
   }
 
   var data = google.visualization.arrayToDataTable([
@@ -59,27 +51,33 @@ function drawChart3() {
 
   var chart = new google.visualization.ColumnChart(chartElement);
   chart.draw(data, options);
+  console.log('Bar chart drawn successfully');
+  return true;
 }
 
-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');
-  }
+// Wait for Google Charts to be ready, then draw
+function initBarChart() {
+  var attempts = 0;
+  var maxAttempts = 50; // 5 seconds max
+
+  var checkAndDraw = function() {
+    if (drawChart3()) {
+      // Success!
+      return;
+    }
+
+    attempts++;
+    if (attempts < maxAttempts) {
+      setTimeout(checkAndDraw, 100);
+    } else {
+      console.error('Failed to load Google Charts after ' + (maxAttempts * 100) + 'ms');
+    }
+  };
+
+  checkAndDraw();
 }
 
-// Initialize immediately (page is already loaded when this partial loads via AJAX)
-initializeBarChart();
+// Initialize when partial loads
+console.log('Bar chart partial loaded, waiting for Google Charts...');
+initBarChart();
 </script>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index b59bbd0..0dbf858 100755
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -29,6 +29,15 @@
   <!-- Bootstrap JS - loaded last -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
+  <!-- Google Charts - load once globally for dashboard charts -->
+  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+  <script type="text/javascript">
+    // Load Google Charts library once for the entire application
+    if (typeof google !== 'undefined' && google.load) {
+      google.load("visualization", "1", {packages:["corechart"]});
+    }
+  </script>
+
   <!-- Modern Design System -->
   <style>
     :root {
diff --git a/db/development.sqlite3-shm b/db/development.sqlite3-shm
index 8c0bd56033bf6c59fd1166ff9520937fe694e8a6..3a7f1efa83f28b7fa80519a8aa22b5f18943f6c2 100644
GIT binary patch
delta 158
zcmZo@U}|V!s+V}A%K!q55G=q1q*Z}9CuVu9XHe2&-Iw_p>plw~;`w9Ydqhhrg;e!G
jqu}5_5`YR$tmkD^-MG=yW8wi7M#haBcdIfo0l9(z#4Im%

delta 203
zcmZo@U}|V!s+V}A%K!qbK+MR%AixErm4R4x150a9C@*8@0Y4`eG5@CIy4uS#)fVZK
zsvc+*7=X<Ej|8B?6YF^uLDn$?F;05pL|+e1MxYv226hI{jT5)ab22foFt9OjFmP?0
HXe$l?-*76i

diff --git a/db/development.sqlite3-wal b/db/development.sqlite3-wal
index 9610b80010c8072fcbafb3da22245a90e71c81b7..125067ad2b9307f784b582ebb567a9ffbc8ff097 100644
GIT binary patch
literal 8272
zcmeI0!E4h{9LJNT+q!jaraQQcEGmNyZ2I2Idr2A<93FJeA#8K*pwz5=U1HOwCMnZ_
zjty@f1uu#h4-P?(4g@bd`xkgoJP3jZ#k=@QZK;iV@E{B1l^*)ONqC>{_xFA;RNEZb
z=CU8gIc}6|j_fDbdhu;+@6__=)4L11_t})tJ-_oZ`|8WHcX!g_11>36Ik76<6W@z(
z#Mk0;@u7ITd2Kvm2Vw_e2Vw_e2Vw_e2Vw_e2Vw_e2Vw_e2Vw{Q!GR1fO!S#G)43Jc
zMW1hsB!$C#mHNK9M*YN4pKyq8_|)?U#jjld(CDBr$=9h@cD<@uD^fp`84!-}>#kQR
z*tN3jr_%kx1n(CuT534dPaRAM(|p~uONGF$(t=wq`zcWnj`1E1Y>!rHE$~xp*&^Rr
z!zTMV+5EQuFSz>jit}W3VK&Vs5AcsT5oMOs8zYZXd&3`x$A?ZPuMOTE*y(?p_?|c_
zEcM-Fm&D^gJFvB~-AHm{m$uetW()&bK~OhxIma!Uj^+A+p#T7KCDXT7UDGS&EVoMM
z-3{Au%p8${G&OG)?ONda)(L607EniG6Vk;+X+?sd07*fcmS*a8hhC<ub9Rs;iY6<n
zG&Of_Y5u}-$+0U`I!lWccUn4QdF<gih>;AMA8FAno1Xpi76cH<LX-uX1T;f|1|l-X
z7?Av*6~-1slTDFTq$mW1+1kq1`E8%E<^P)7{zwY4$Q7XLVVaJ@lJX*$6fhu^p`t>p
z^d!}#Ft!_!WCNN^u!;c=v2_$yh4n~OAu!mQQ6A{9w_kKAEGaj7Ng>TZSjHMey83HU
z-3nu?MU@TenDqAf7F$bUY}IJ8DKgOs)OvPUldY{VHYb{FNQMNd5QJ;8t+4J<VQl;U
z3~S~A<vhXcT_{Y`R#;NkBbgM;%NoK!)kAC@g|XRDWy88gaCnC?wwA)!tf;aff{EJm
zUd5`Fv9%P&wiZpc=4p*|2*WkmRv243nruYYR0YG|?6<bUIwNIlQRs}2$SPJ@RN<uB
F$`74jRn!0g

literal 41232
zcmeI*?`s=%90%~+u0Imf^oD}#7-c6#Xk@*gxm<ES%G$22Z7tFjbra%w{bo6G$%WjF
z(t(UboDBC!!6%AOeBc8a=pQhU4IeoW1>Mulzd+{$*)zXcy`#ywBBJKfzAqG-`?PT1
z*Ih16KkxgVes!#qnEQDukvN{{F4w<)`RvHE8=Vu{oljnIzFMTK*!}B2y>PNJ^_xDG
z;XX<vxq5=DbMJHaxx3sg?k4v!_jdPZu|NO<5P$##AOHafKmY;|fB*y_@DBtg8TRxs
zvtc^BzHNET;zW|2X6nTA%uB=@NgZQPFqb{j^2WJe6Qil)<LvWHle8*st8O+d;!RGD
zvClC(ZmU+d8x_|}XGYo6jAvEJ_GO27>8D57EYmdY?XqvzN!hJbyfnwMGfa#4c8k<W
z!}rp3vpFW*hO6}HO!q7Jf5GYpS1Qfashb(Pay0!#f}5V)$T$<%>9<%Q009U<00Izz
z00bZafx!#3FLV}@iDzDK@03c0Ay<9BX^5iZTBcKVJ>O6zNfIA_t`KE0__VR^Ua=j=
z6g5HOXV*>3ZuqWOeUV>j_{8Dq3Vvgge~p)=vaFT$EMICi9r7x9Yt{BeP1OZ8&(E$d
zpI=`)!#j43@Jqz1xmkX`+H&helyiz8bszkuSutDopTD9=iZ&-JbCS+Wx}oF@O%n=o
zp`gf5uC&XY1v)zGZ;h_!!%s|xs0doIn9moYLkuc(i1WidM7pyTEhiO~$PmLy`=!oV
zI>h3Edodn6EGG*}uBhdr$7EQcJFGO!J4`JKnqJH)#mEi|EA+J1lNb2#<b#ZOd*&hX
z0)s!{V+$Yv0SG_<0uX=z1Rwwb2teSF3H0R!&c!e<@YBO@#vlDc*1CCtv8R66mlvQ<
zus{F;5P$##AOHafKwxMD+FPA-w8^(|V9PRSt2fQvcyuo{UC{HoDyxy!URXh1AWTCb
zFEEJIN0<tT9HU_cd4atEe>_eqVJaZ9!@>$Zt@q>wuHCry`)7@N_mCGDnm0UbC<Gt?
z0SG_<0uX=z1Rwwb2n>rrUtVA-hIxVe-<NKE`@);=bn^n^sYg9|0s0gR1Rwwb2tWV=
z5P-m86QFJNrJ-!A)2q}A1ufD6qiyxQ3i1LT<`)>i6bivC0?{Kgs9=79y*V)A(M%6#
z5s2)tuyO?F7kKdA?T-K5f`h!kVSB^Jcpv})2tWV=5P$##AOHafKw#hkeR+Z980H0X
zvut*JXXbHUAerL(@&a@P76?E90uX=z1R!uk1!(tqc?jF;1wk#yc~y_}!nB}*yg;|D
zj`;;}KZ1YhmJ2~DAo`LED#!~UFYv$K1|*zCAaYEG75cW`Grz!(pTBYE)Ye1;d4VJP
z2M>k~0SG_<0uX=z1Rwwb2tWV=|D8ZzUSK7Ld4YFFzMN(<TQ|D%3#5{zNM3-h!U6#Z
zKmY;|fB*#kTA+QgvqBr{7Z05N-Q2F*4ceYH8>X}C+m;uHOH4IGlIS(*d0FkhT76#y
zd4agK)iJ-oPN`%Va@F^nhA29&Wja;Y^Y?nO!HpK`#PiHcBo;5UoS|t#fzAq{MDG<J
zR%kPQfu2XK1J5JD=x{#*+>hY=`q~-Zv1^21B38}K^7GY}TPLDSZ;l{!AN;0SF<Z8%
Vsk)%%BQ5iA7J(;Mj==l^e*gsXwB7&!