railsgoat/app/views/paid_time_off/index.html.erb

<div class="dashboard-wrapper">
	<div class="main-container">
		<!-- Begin DP-->
		<div class="row-fluid">
			<div class="span6">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe052;"></span> Schedule PTO
                  </div>
                </div>
                <div class="widget-body">
                  	 <form class="form-horizontal" action="#">
	                   
	                    <div class="control-group">
	                      <label class="control-label" for="date_range1">
	                        Date Range Input
	                      </label>
	                      <div class="controls">
	                        <div class="input-append">
	                          <input type="text" name="date_range1" id="date_range1" class="span8 date_picker" placeholder="Select Date"/>
	                          <span class="add-on">
	                            <i class="icon-calendar"></i>
	                          </span>
	                        </div>
	                      </div>
	                    </div>

	                    
	                  </form>
                </div>
              </div>
            </div>
		</div>	
		<!-- End DP-->
		<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="&#xe097;"></span> Sick Days
                </div>
              </div>
              <div class="widget-body">
                <div id="column_chart_1"></div>
              </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="&#xe097;"></span> Paid Time Off
                </div>
              </div>
              <div class="widget-body">
                <div id="column_chart_2"></div>
              </div>
            </div>
          </div>
        </div>
	</div>
</div>
<!-- Google Visualization JS -->
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">

 //Dropdown
  $('.dropdown-toggle').dropdown();

//Date picker
$('.date_picker').daterangepicker({
  opens: 'right'
});

 $(document).ready(function () {
   drawChart1()
   drawChart2()
  });

	 google.load("visualization", "1", {
      packages: ["corechart"]
    });

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 %> ], ]);

    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_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);
  }

</script>