QA@IT

Railsでグラフ表示ツールを利用する際にコントローラのデータをビューで受け取るには

4824 PV

Railsで「google chart tools」や「jqplot」等のグラフ表示ツールの利用を考えていますが、それらのサンプルプログラムには、サンプルプログラム内にデータが直接記述されているため、どのようにコントローラからビューへデータを渡したらよのか分かりません。
ネット上で調べると、「json形式で送ると良い」とような記載が散見されるのですが、具体的にどのよう記述したらい良いのでしょうか?
例えば、google chart tools の以下のページには棒グラフのサンプルが掲載されています。

https://developers.google.com/chart/interactive/docs/gallery/barchart?hl=ja

同様のグラフを表示させるにはコントローラ側でどのように記述し、ビュー側ではサンプルをどのように加工したら良いのでしょうか?

回答

自分の質問に自分で回答します。自力で探したら良いものが見つかりました。

参考ページ
http://railscasts.com/episodes/324-passing-data-to-javascript?view=asciicast
https://github.com/gazay/gon

導入方法
1.Gemfile に以下を追加する。
gem 'gon'

2.view/layouts/application.html.erb に <%= include_gon %> を追加する。
......
<%= include_gon %>
<%= stylesheet_link_tag "application", :media => "all" %>
.......

3.例えば、chart_controller.rb の barアクションにおいて 
 グラフ表示用データを gon.bar_data として格納する。(bar_dataは任意の変数名)
  def bar
gon.bar_data = [
['Year', 'Sales', 'Expenses'],
['2009', 1000, 400],
['2010', 1170, 460],
['2011', 900, 720],
['2012', 830, 640] ]
end

4.view/chart/bar.html.erb に google chart tool のサンプルをコピペして
  データ部分を gon.bar_data に変更する。
..........
function drawChart() {
var data = google.visualization.arrayToDataTable( gon.bar_data );
...........

以上

編集 履歴 (3)

解決したようですが、ご参考までに gem を使わない方法を1つ。

これが正解かどうか分かりませんが、以前jqplotを使って棒グラフを描いたときには、私は以下のようにしました。

  1. config/routes.rb でJSONを提供するURLを決める
  2. コントローラもしくはモデルでデータを加工してハッシュに入れる
  3. グラフを表示するページのJavaScript(実際はCoffeeScript)からAjaxで1で設定したURLを叩いてJSONを受け取る
  4. 受け取ったJSONを加工して、ライブラリに投げてグラフを描いてもらう

という感じです。JSONを返すAPIを用意したといっていいかもしれません。

# config/routes.rb

  match '/stats' => 'clips#stats', as: 'stats'
# app/controller/clips_controller.rb

  def stats
    @check_months = Check.check_months
    @stats = Clip.stats # @stats には割と汚いhashオブジェクトが入る

    respond_to do |format|
      format.html
      format.json { render json: @stats }
    end
  end
app/assets/javascripts/clip.js.coffee

$ ->
# chartというidを持つdivタグがあれば、そこにグラフを描く
  if ($('#chart').length > 0)
    # 以下の行でAjaxで/stats.jsonにアクセスが発生してdataにJSONのデータが入ってコールバックされる。getJSONはjQueryのAPI
    $.getJSON '/stats.json', (data) ->

    # この辺でゴニョゴニョとdataを加工して、必要なデータを作る
    # それを↓のように描画ライブラリに投げる

      $.jqplot('chart',  [item, count, remain], {
        title: 'hoge foo'
        stackSeries: true,
        seriesDefaults: {
          renderer:$.jqplot.BarRenderer,
          rendererOptions: {
              barMargin: 25,
            },
          pointLabels: {show: true}
        },
      })
編集 履歴 (0)

Working with JavaScript in Rails が参考になると思います。

編集 履歴 (0)
  • 回答ありがとうございます。json形式で送る側はなんとなく分かりましたが、Rails及びjavascriptの知識不足+英語力不足のため、ビュー側での受け取り方(グラフ表示のサンプルプログラムをどのように加工して実装したら良いのか)まで到達することができません。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。