読者です 読者をやめる 読者になる 読者になる

人生のヒント

私が経験したことが、誰かの人生のヒントになればと願い書きます。

Ruby On Railsでグラフを表示させる(chartkick)

スポンサーリンク

f:id:hinthint:20160909082048j:plain

 

今回は、Ruby On Railsで↓こんな感じのグラフを表示させます。

f:id:hinthint:20160909160642p:plain

 

 

下記サイトを参考にしました。

http://chartkick.com/

 

1.インストール

いつものようにサーバにrootでログインします。

# su - rails

$ cd work/foo

$ vi Gemfile

Gemfileに以下記述を記入します。

gem 'chartkick'

 以下コマンドを実行します。

$ bundle install

$ vi app/assets/javascripts/application.js

app/assets/javascripts/application.jsファイルに以下記述を記入します。

//= require chartkick

 

 以下コマンドを実行します。

$ vi app/views/layouts/application.html.erb

app/views/layouts/application.html.erbファイルの javascript_include_tag記述を以下のようにします。

<%= javascript_include_tag '//www.google.com/jsapi', 'application', 'data-turbolinks-track' => true %>

 

以下コマンドを実行します。

$ rake assets:clobber

$ rake assets:precompile

 

2.グラフ設定

今回、棒グラフを使った2例を紹介します。

グラフ描写用のデータは配列かハッシュのどちらかですが、今回は配列を使います。

 

例1.データをコントローラ内に書く場合

以下コマンドを実行します。

$ vi app/controllers/users_controller.rb

app/controllers/users_controller.rbファイルの「def index~end」間に以下のように記述する。

@chart_data = [[1 , 60], [2, 65], [3, 64]]

 

以下コマンドを実行します。

$ vi app/views/users/index.html.erb

app/views/users/index.html.erbファイルに以下を追記。

<%= column_chart @chart_data  %>

 

以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

Webブラウザでhttp://FQDN/userにアクセスして、以下のようなグラフが出来ていたら完了です。

f:id:hinthint:20160909160642p:plain

 

 

例2.データをDBから抽出する場合

以下コマンドを実行します。

$ vi app/controllers/users_controller.rb

app/controllers/users_controller.rbファイルの「def index~end」間に以下のように記述する。

例ではUserモデルのユーザが作成された人数をカウントしてます。

@chart_data = User.group(:created_at).count

 

以下コマンドを実行します。

$ vi app/views/users/index.html.erb

app/views/users/index.html.erbファイルに以下を追記。

<%= column_chart @chart_data, label: "人"  %>

labelは、棒にマウスが触れた時に表示される「Value」という文字を変えたい場合使います。

 

以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

Webブラウザでhttp://FQDN/userにアクセスして、以下のようなグラフが出来ていたら完了です。

f:id:hinthint:20160909161007p:plain

 

 

3.まとめ

今回は、棒グラフに限定して書きましたが、chartkickはパイチャートや線グラフなど色々なグラフを使うことができます。

紹介したサイト(英語ですが)を確認いただくと、それらの使い方が分かると思います。

グラフがあることで、文字で説明しなくて良い分、ユーザに伝えやすいメリットがあると思います。

データを伝える時に活用してみてください。