Ken Johnson
c6f69b5d69
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>
134 lines
3.4 KiB
Plaintext
134 lines
3.4 KiB
Plaintext
<div class="dashboard-wrapper">
|
|
<div class="main-container">
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="widget">
|
|
<div class="widget-header">
|
|
<div class="title">
|
|
<span class="fs1" aria-hidden="true" data-icon=""></span> Performance History Visualization
|
|
</div>
|
|
</div>
|
|
<div class="widget-body">
|
|
<div id="line_chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div class="widget">
|
|
<div class="widget-header">
|
|
<div class="title">
|
|
<span class="fs1" aria-hidden="true" data-icon=""></span> Performance History
|
|
</div>
|
|
</div>
|
|
<div class="widget-body">
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:16%">Reviewer</th>
|
|
<th style="width:16%">Date</th>
|
|
<th style="width:16%">Score</th>
|
|
<th style="width:16%">Comments</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% @perf.each do |p| %>
|
|
<tr>
|
|
<td><%= p.reviewer_name %></td>
|
|
<td><%= p.date_submitted %></td>
|
|
<td><%= p.score %></td>
|
|
<td><%= p.comments %></td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
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| %>
|
|
// Let's just hope this data isn't suspectible during later releases ;-)
|
|
[ <%= "#{p.date_submitted}".inspect.html_safe %>, <%= p.score %> ],
|
|
<% end %>
|
|
]);
|
|
|
|
var options = {
|
|
min: 1,
|
|
max: 5,
|
|
width: 'auto',
|
|
height: '160',
|
|
backgroundColor: 'transparent',
|
|
colors: ['#e26666', '#579da9', '#1e825e', '#b5799e', '#dba26b'],
|
|
tooltip: {
|
|
textStyle: {
|
|
color: '#666666',
|
|
fontSize: 11
|
|
},
|
|
showColorCode: true
|
|
},
|
|
legend: {
|
|
textStyle: {
|
|
color: 'black',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
chartArea: {
|
|
left: 100,
|
|
top: 10
|
|
},
|
|
focusTarget: 'category',
|
|
hAxis: {
|
|
textStyle: {
|
|
color: 'black',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
vAxis: {
|
|
textStyle: {
|
|
color: 'black',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
pointSize: 8,
|
|
chartArea: {
|
|
left: 60,
|
|
top: 10,
|
|
height: '80%'
|
|
},
|
|
lineWidth: 2,
|
|
};
|
|
|
|
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
|
|
chart.draw(data, options);
|
|
}
|
|
|
|
function makeActive(){
|
|
$('li[id="performance"]').addClass('active');
|
|
};
|
|
|
|
// Load Google Charts and set callback
|
|
google.load("visualization", "1", {
|
|
packages: ["corechart"],
|
|
callback: function() {
|
|
$(document).ready(function () {
|
|
drawChart2();
|
|
makeActive();
|
|
});
|
|
}
|
|
});
|
|
|
|
</script> |