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:
@@ -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>
|
||||
Reference in New Issue
Block a user