added visualization chart for performance history

app/controllers/performance_controller.rb

@@ -1,7 +1,7 @@
 class PerformanceController < ApplicationController
   
   def index
-    @user = current_user
+    @perf = current_user.performance
   end
   
 end

app/models/user.rb

@@ -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
   
   
 

app/views/layouts/shared/_sidebar.html.erb

@@ -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>

app/views/paid_time_off/index.html.erb

@@ -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">

app/views/performance/index.html.erb

@@ -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>