Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

Google Charts by AngularJS

基本的なサンプル

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<%= javascript_include_tag "gglchrt" %>
<div ng-controller="GglChrt1">
  <div id="chart_div1"></div>
</div>

(config/environments/production.rb)
config.assets.compile = false
config.assets.precompile += ['gglchrt.js']
google.load('visualization', '1', {
  packages: ['corechart']
});

google.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['myModule']);
});

var mymodule = angular.module('myModule', ['ui.bootstrap']);

var GglChrt1 = function($scope) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);
  var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':400,
                 'height':300};
  var chart = new google.visualization.PieChart(document.getElementById('chart_d
iv1'));
  chart.draw(data, options);
};

GglChrt1.$inject = ['$scope'];
mymodule.controller('GglChrt1', GglChrt1);

データベースのデータをグラフ表示

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<%= javascript_include_tag "gglchrt" %>
<div ng-controller="GglChrt2">
  <div id="chart_div2"></div>
</div>

(config/environments/production.rb)
config.assets.compile = false
config.assets.precompile += ['gglchrt.js']
google.load('visualization', '1', {
  packages: ['corechart']
});

google.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['myModule']);
});

var mymodule = angular.module('myModule', ['ui.bootstrap']);

var GglChrt2 = function($scope,$http) {
  $http.get('/angular_pages/gglchrt2.json').success(function(data) {
    var data1 = new google.visualization.DataTable();
    data1.addColumn('string', 'year/mon');
    data1.addColumn('number', 'avarage');
    for(i = 0 ; i < data.length;i++) {
      var ym = data[i]["updateday"].substr(0,4) + "/" + data[i]["updateday"].substr(5,2);
      data1.addRow([ym, parseFloat(data[i]["avg"])]);
    };
    var options = {
      'title':'Sample Title',
      'height':300
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div2'));
    var formatter = new google.visualization.NumberFormat(
      {fractionDigits: 2}
    );
    formatter.format(data1, 1);
    chart.draw(data1, options);
  });
};

GglChrt2.$inject = ['$scope','$http'];
mymodule.controller('GglChrt2', GglChrt2);
  def gglchrt2
    @data2 = Sale.all
    respond_to do |format|
      format.html { render html: @data2 }
      format.json { render json: @data2 }
    end
  end

データベースのデータをテーブル表示

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<%= javascript_include_tag "gglchrt" %>
<div ng-controller="GglChrt3">
  <div id="chart_div3"></div>
</div>

(config/environments/production.rb)
config.assets.compile = false
config.assets.precompile += ['gglchrt.js']
google.load('visualization', '1', {
  packages: ['table']
});

google.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['myModule']);
});

var mymodule = angular.module('myModule', ['ui.bootstrap']);

var GglChrt3 = function($scope,$http) {
  $http.get('/angular_pages/gglchrt2.json').success(function(data) {
      var data1 = new google.visualization.DataTable();
      data1.addColumn('string', 'date');
      data1.addColumn('number', 'avarage');
      data1.addColumn('number', 'count');
      for(i = 0 ; i < data.length;i++) {
        data1.addRow([
          data[i]["updateday"],
          parseFloat(data[i]["avg"]),
          parseInt(data[i]["count"])
        ]);
      };
      var options = {
        'title':'Sample Title',
        'height':300
      };
      var chart = new google.visualization.Table(document.getElementById('chart_div3'));
      var formatter = new google.visualization.NumberFormat(
        {fractionDigits: 2}
      );
      formatter.format(data1, 1);
      chart.draw(data1, options);
    });
};

GglChrt3.$inject = ['$scope','$http'];
mymodule.controller('GglChrt3', GglChrt3);

  def gglchrt2
    @data2 = Sale.all
    respond_to do |format|
      format.html { render html: @data2 }
      format.json { render json: @data2 }
    end
  end

ラインとバーの2軸のグラフ

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<%= javascript_include_tag "gglchrt" %>
<div ng-controller="GglChrt4">
  <div id="chart_div4"></div>
</div>

(config/environments/production.rb)
config.assets.compile = false
config.assets.precompile += ['gglchrt.js']
google.load('visualization', '1', {
  packages: ['corechart']
});

google.setOnLoadCallback(function() {
  angular.bootstrap(document.body, ['myModule']);
});

var mymodule = angular.module('myModule', ['ui.bootstrap']);

var GglChrt4 = function($scope,$http) {
  $http.get('/angular_pages/gglchrt2.json').success(function(data) {
    var data1 = new google.visualization.DataTable();
      data1.addColumn('string', 'date');
      data1.addColumn('number', 'avarage');
      data1.addColumn('number', 'count');
      for(i = 0 ; i < data.length;i++) {
        var ym = data[i]["updateday"].substr(2,2) + "/" + data[i]["updateday"].substr(5,2);
        data1.addRow([
          ym,
          parseFloat(data[i]["avg"]),
          parseInt(data[i]["count"])
        ]);
      };
      var options = {
         title: 'Sample Title',
         height: 300,
         bar: { groupWidth: 10 },
         hAxis: {title: "year/mon"},
         series: {
           0: {targetAxisIndex:0,type: "line",pointSize: 5},
           1: {targetAxisIndex:1,type: "bars",dataOpacity: 0.2}
         },
         vAxes: [
           { title: 'avg' },
           { title: 'count'}
         ]
      };
      var chart = new google.visualization.LineChart(document.getElementById('chart_div4'));
      var formatter = new google.visualization.NumberFormat(
        {fractionDigits: 2}
      );
      formatter.format(data1, 1);
      chart.draw(data1, options);
    });
};

GglChrt4.$inject = ['$scope','$http'];
mymodule.controller('GglChrt4', GglChrt4);

  def gglchrt2
    @data2 = Sale.all
    respond_to do |format|
      format.html { render html: @data2 }
      format.json { render json: @data2 }
    end
  end