sqlite3なRailsプロジェクトでおしゃれなグラフを簡単に実装する【2016年】

20170916_Chartkick

7398feb746e63561d75c23b48f923a2a.png

Railsで簡単にグラフを描画する

Railsでグラフを描画する場合、色々なライブラリが存在しますが、無料で使えるなどを考慮し、Chartkickを利用します。

sqlite3を使っていて、chartkick導入の際にgem ‘groupdate’も導入してみたけど、Connection adapter not supported: SQLiteってエラーが出て先に進めない方向けです。
上記の通り、sqliteには対応していないみたいなので、代わりにgem 'dateslices'を利用した方法をご紹介します。

環境
‘ruby’ , ‘2.2.1’
‘rails’, ‘4.2.6’

必要なライブラリを読み込む


gem 'chartkick' # chartの表示
gem 'dateslices' # 日付ごとにデータをグルーピングするメソッドを追加

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

グラフ描画用のデータをコントローラー内で準備する

def index
  # 例えば、ログイン中のユーザーが所有する商品のダウンロードされた数をグラフ化する場合
  @products = current_user.products.pluck(:id)
  @downloads = Download.where(product_id: @products).group_by_day( :created_at)

  # 単純に、ユーザー数を日毎にグラフ化したい時
  @users = User.group_by_day( :created_at)
end

データをview内で展開する

slimの使用を想定しています。


= column_chart @downloads, label: "ダウンロード数", discrete: true, ytitle: "ダウンロード数"
= line_chart @users, label: "ユーザー数", discrete: true, ytitle: "登録ユーザー数"

column_chartを利用した場合は、棒グラフっぽい感じになります。
line_chartを利用した場合は、折れ線グラフっぽい感じになります。

参考URL
chartkick
github/dateslices
dateslicesのより詳細な説明