graph.html.haml

!!! 5
- width, height = 1440, 800

- x_type = data[:types][0].to_json
%html
  %head
    %script(type="text/javascript" src="https://www.google.com/jsapi")
    :css
      html, p, div {
        margin: 0;
        padding: 0;
      }
      body {
        padding: 5px;
      }
      #chart_div {
        width: #{width}px;
        height: #{height}px;
        clear: both;
      }
      .subtext {
        font-size: 12px;
        color: #ccc;
        float: left;
      }
      .right {
        float: right;
      }
    :javascript
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);


      var queryData = #{data.to_json};
      var data = queryData.data;

      var typeConvert = function (x) { return "" + x; };
      if (queryData.date) {
        typeConvert = function (x) { return new Date(x); };
      }
      if (queryData.number) {
        typeConvert = function (x) { return parseFloat(x); }
      }
      for (var i = 0, length = data.length; i < length; ++i) {
        var row = data[i];
        row[0] = typeConvert(row[0]);
      }

      var hAxis = { };
      if (queryData.number) {
        hAxis.baseline = 0;
      }
      var vAxes = [];
      for (var i = 1, length = queryData.fields.length; i < length; ++i) {
        vAxes.push({
          baseline: 0,
          format: queryData.number_format
        });
      }

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn(#{x_type}, Date.parse(queryData.fields[0]));
        for (var i = 1, length = queryData.fields.length; i < length; ++i) {
          data.addColumn('number', queryData.fields[i]);
        }
        data.addRows(queryData.data);

        var formatter = new google.visualization.NumberFormat({
          pattern: queryData.number_format
        });
        for (var i = 1, length = queryData.fields.length; i < length; ++i) {
          formatter.format(data, i);
        }

        // Set chart options
        var options = {
          title: queryData.title,
          width: #{width},
          height: #{height},
          hAxis: hAxis,
          animation: { duration: 150 },
          colors: ['#1B91E0', '#B80D49', '#15B80D', '#999600',
                   '#00B39E', '#0056B3', '#8600B3', '#B36E00']
        };

        if (queryData.chart_type !== 'Pie') {
          options.vAxes = vAxes;
        }

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.#{data[:chart_type]}Chart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
  %body
    %p.subtext.right
      = Time.now.getutc.strftime('%Y-%m-%d %H:%M:%S')

    #chart_div