Fix Google Charts race condition on performance page

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>
This commit is contained in:
Ken Johnson
2025-12-07 01:04:20 -05:00
parent 102a879a3a
commit c6f69b5d69
+15 -7
View File
@@ -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>