added visualization chart for performance history

This commit is contained in:
Ken Johnson
2013-05-31 15:20:58 -04:00
parent 379c442049
commit 4813ba9349
5 changed files with 124 additions and 7 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
class PerformanceController < ApplicationController
def index
@user = current_user
@perf = current_user.performance
end
end
+1 -1
View File
@@ -13,7 +13,7 @@ class User < ActiveRecord::Base
has_one :retirement, :foreign_key => :user_id, :primary_key => :user_id
has_one :paid_time_off, :foreign_key => :user_id, :primary_key => :user_id
has_one :work_info, :foreign_key => :user_id, :primary_key => :user_id
has_one :performance, :foreign_key => :user_id, :primary_key => :user_id
has_many :performance, :foreign_key => :user_id, :primary_key => :user_id
+1 -1
View File
@@ -21,7 +21,7 @@
<li>
<a href="#">
<div class="icon">
<span class="fs1" aria-hidden="true" data-icon="&#xe0b8;"></span>
<span class="fs1" aria-hidden="true" data-icon="&#xe05c;"></span>
</div>
Benefit Forms
</a>
-4
View File
@@ -118,10 +118,6 @@
</div>
</div>
<!-- Google Visualization JS -->
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<%= javascript_include_tag "fullcalendar.js" %>
<script type="text/javascript">
+121
View File
@@ -0,0 +1,121 @@
<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="&#xe096;"></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="&#xe004;"></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 %></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">
google.load("visualization", "1", {
packages: ["corechart"]
});
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Year', 'Score'],
<% @perf.each do |p| %>
[ <%= "#{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);
}
$(document).ready(function () {
drawChart2()
});
</script>