helen's blog

ずっとおもしろいことしてたいな。

railsでChartkickを使ってみた

Chartkick

  • rubyにJSで綺麗にグラフを書いてくれる
  • 折れ線グラフや円グラフ、タイムラインをかける
  • googleJSAPIも使う
  • 配列・ハッシュで数値をグラフに渡すことができて簡単に書ける

Chartkick

導入

1. Gemfileに以下追記してbundle install

gem "chartkick"

2. GoogleCharts読み込み

グラフ描画ライブラリはヘルパーメソッドの前に読まれるようにする
:content_forオプションを使うときは気にしなくて良い

//= require chartkick

:content_for

コンテンツを指定の場所でロードする

# layout
<%= yield :extend_menu %>

# view
<% content_for :extend_menu do %>
  [<%= link_to 文字列A, action => "A" %>]
<% end %>

content_for - リファレンス - - Railsドキュメント

3. chartkick.js読み込み

JSのライブラリを読み込む

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

使ってみる

View

<%= line_chart @line_chart %>
<%= pie_chart @pie_chart %>

Controller

def index
  # 配列の場合
  @line_chart = [['2014-04-01', 30], ['2014-04-02', 40], ['2014-04-03', 50]]
  # ハッシュの場合
  @pie_chart = {'2014-04-01' => 20, '2014-04-02' => 50, '2014-04-03' => 30}
end

こうなる

f:id:heleeen:20160703004032p:plain
そしてやっぱりドキュメントを読むのが一番確実だなと思いました