背景

WebアプリケーションにGoogle Chartを使ったグラフを表示させるために、chartを表示させるJavaScriptを生成するRubyのWrapperを作った。

コード

基本的な構成はChartクラスで行い、個別のチャートについての相違をサブクラスで実装している。
現状は、パイチャート、バーチャート、ラインチャートのみ作成。
ヘッダーに、以下の記載が必要（erbテンプレートを使用した例）

<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <%=header%>  
</head>
<body>
...
<%=body%>
...
</html>

# encoding: utf-8
require 'erb'
require 'date'

class Chart
  attr_accessor :column,:data,:options,:name

  def self.to_js_date(d)
    a = Date.parse(d)
    "#{a.year},#{a.mon - 1},#{a.mday}"
  end

  def initialize(column,data,options,name)
    @column = column
    @data = data
    @options = options
    @name = name
    @chart_type = ''
  end

  # body部分に表示するスクリプト
  def body_script
    erb = ERB.new(<<-EOS,nil,'-')
<div id="<%=@name%>"></div>
EOS
    erb.result(binding)
  end

  def header_script
    erb = ERB.new(<<-EOS,nil,'-')
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  <%- @column.each do |c| -%>
  data.addColumn('<%=c.keys[0]%>','<%=c.values[0]%>');
  <%- end -%>
  data.addRows([
  <%- @data.each_with_index do |d,index| -%>
  [<%=data_format(d)%>]<%="," if index < @data.length - 1%>
  <%- end -%>
  ]);

  var options ={
	  <%- @options.each_with_index do |o,index| -%>
    '<%=o.keys[0]%>':<%=o.values[0]%><%="," if index < @options.length - 1%>
    <%- end -%>
  };

  var chart = new google.visualization.<%=@chart_type%>(document.getElementById('<%=@name%>'));
  chart.draw(data, options);
}
</script>
EOS
    erb.result(binding)
  end

  def data_format(d)
    d.inspect
  end

end

# PieChart
class PieChart < Chart
  def initialize(column,data,options,name)
    super
    @chart_type = 'PieChart'
  end

  def data_format(d)
    "'#{d.keys[0]}',#{d.values[0]}"
  end
end

# LineChart
class LineChart < Chart
  def initialize(column,data,options,name)
    super
    @chart_type = 'LineChart'
  end

  def data_format(d)
    d.each_with_index.inject("") do |r,(v,index)|
      r += "new Date(#{Chart.to_js_date(v)})" if index == 0
      r += "#{v}" if index > 0
      r += "," if index < d.length - 1
      r
    end
  end
end

# BarChart
class BarChart < Chart
  def initialize(column,data,options,name)
    super
    @chart_type = 'BarChart'
  end

  def data_format(d)
    "'#{d.keys[0]}',#{d.values[0]}"
  end
end

使い方

column,data,options,nameを指定
header_script及びbody_scriptでJavaScriptを生成
対象ページには、Google Chartへのリンクを指定

サンプル

パイチャート

column = [{'string' => '会社名'},{'number' => '金額'}]
data = [
  {'A社' => '10000'},
  {'B社' => '20000'},
  {'C社' => '30000'},
  {'D社' => '40000'}
]
options = [{'width' => 400},{'height' => 300}]  # 400px x 300px とする場合
name = 'pie_chart'                              # 識別できればOK

pc = PieChart.new(column,data,options,name)
header = pc.header_script   # HTMLのheaderタグ内に記載
body = pc.body_script       # HTMLのbodyタグ内に記載

バーチャート

column = [{'string' => '会社名'},{'number' => '金額'}]
data = [
  {'A社' => '10000'},
  {'B社' => '20000'},
  {'C社' => '30000'},
  {'D社' => '40000'}
]
options = [{'width' => 400},{'height' => 300}]  # 400px x 300px とする場合
name = 'bar_chart'                              # 識別できればOK

bc = BarChart.new(column,data,options,name)
header = bc.header_script   # HTMLのheaderタグ内に記載/ERBでの埋め込みなどで使用
body = bc.body_script       # HTMLのbodyタグ内に記載/ERBでの埋め込みなどで使用

ラインチャート

column = [{'string' => '決算期'},{'number' => 'A社'},{'number' => 'B社'}]
fy = ['2012年度','2013年度','2014年度']
a = [10000,9000,12000]
b = [20000,21000,19000]
data = fy.zip(a,b)
options = [{'width' => 400},{'height' => 300}]  # 400px x 300px とする場合
name = 'line_chart'                              # 識別できればOK

lc = LineChart(column,data,options,name)
header = lc.header_script   # HTMLのheaderタグ内に記載/ERBでの埋め込みなどで使用
body = lc.body_script       # HTMLのbodyタグ内に記載/ERBでの埋め込みなどで使用