diff --git a/app/models/paid_time_off.rb b/app/models/paid_time_off.rb
index e4e4dd0..f2bdcdd 100644
--- a/app/models/paid_time_off.rb
+++ b/app/models/paid_time_off.rb
@@ -7,7 +7,7 @@ class PaidTimeOff < ActiveRecord::Base
self.sick_days_earned - self.sick_days_taken
end
- def pto_days_reamining
+ def pto_days_remaining
self.pto_earned - self.pto_taken
end
diff --git a/app/views/paid_time_off/index.html.erb b/app/views/paid_time_off/index.html.erb
index e937cff..371c116 100644
--- a/app/views/paid_time_off/index.html.erb
+++ b/app/views/paid_time_off/index.html.erb
@@ -42,7 +42,21 @@
+
@@ -63,14 +77,15 @@ $('.date_picker').daterangepicker({
});
$(document).ready(function () {
- drawChart3()
+ drawChart1()
+ drawChart2()
});
google.load("visualization", "1", {
packages: ["corechart"]
});
-function drawChart3() {
+function drawChart1() {
var data = google.visualization.arrayToDataTable([
['Current Date', 'Days Earned', 'Days Taken', 'Days Remaining'],
[ <%= "As of today: #{Date.today}".inspect.html_safe %>, <%= @pto.sick_days_earned %>, <%= @pto.sick_days_taken %>, <%= @pto.sick_days_remaining %> ], ]);
@@ -100,7 +115,41 @@ function drawChart3() {
},
};
- var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));
+ var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_1'));
+ chart.draw(data, options);
+ }
+
+function drawChart2() {
+ var data = google.visualization.arrayToDataTable([
+ ['Current Date', 'Days Earned', 'Days Taken', 'Days Remaining'],
+ [ <%= "As of today: #{Date.today}".inspect.html_safe %>, <%= @pto.pto_earned %>, <%= @pto.pto_taken %>, <%= @pto.pto_days_remaining %> ], ]);
+
+ var options = {
+ width: 'auto',
+ height: '160',
+ backgroundColor: 'transparent',
+ colors: ['#579da9', '#e26666', '#1e825e'],
+ tooltip: {
+ textStyle: {
+ color: '#666666',
+ fontSize: 11
+ },
+ showColorCode: true
+ },
+ legend: {
+ textStyle: {
+ color: 'black',
+ fontSize: 12
+ }
+ },
+ chartArea: {
+ left: 60,
+ top: 10,
+ height: '80%'
+ },
+ };
+
+ var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_2'));
chart.draw(data, options);
}