<% content_for :js do %>
      alert('{{graphData}}')
      google.load('visualization', '1', {packages: ['corechart', 'line']});
      google.setOnLoadCallback(drawBasic);
      function drawBasic() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'X');
        data.addColumn('number', 'Y');
        data.addRows([
          [new Date(2000, 8, 5), 0],
          [new Date(2000, 8, 6), 10],
          [new Date(2000, 8, 7), 23],
          [new Date(2000, 8, 8), 12],
          [new Date(2000, 8, 9), 2],
          [new Date(2000, 8, 10), 18],
          [new Date(2000, 8, 11), 25],
        ]);
        /**
         * Modify the javascript as you see fit just keep the options
         */
        var options = {
          chartArea: {
            top: 0,
            left: 0,
            width: '100%',
            height: '88%'
          },
          hAxis: {
            textStyle: {
              color: '#999',
              fontSize: 12,
            },
            baselineColor: 'transparent',
            gridlines: {
              color: 'transparent'
            }
          },
          vAxis: {
            textPosition: 'in',
            textStyle: {
              color: '#999',
              fontSize: 12,
            },
            baselineColor: 'transparent',
            gridlines: {
              count: 4,
              color: '#dfdfdf'
            }
          },
          legend: {
            position: 'none'
          },
          colors: [
            '#81abf1'
          ],
          pointSize: 8
        };
        var chart = new google.visualization.AreaChart(document.getElementById('chart'));
        chart.draw(data, options);
      }
    <% end %>