Chartkick導入してみた

はじめに

自作しているWebアプリの管理者コンソールが見た目がとても寂しく、、、

もっと管理者画面らしいことをできたらな〜〜〜

DBを一括管理できる画面があったらいいな〜〜〜

と思っていたところ

「Chartkick」

というgemで簡単にカッコいいグラフが作れると知り、導入してみよう！と思い立ちました。

対象読者

・Webアプリにかっこいいグラフをつけたくなった人 ・Chartkick使い始めたいな〜な人

導入には以下の公式リファレンスを参考にしました。

公式リファレンス

準備

環境

OSX : 10.13.6
Ruby : 2.6.3
Rails : 5.2.3
Mysql : 8.0.16

Gemfileに以下を追加してbundle install

gem "chartkick"

app/assets/javascripts/application.jsに以下を追加

//= require chartkick //= require Chart.bundle

Rails5ならこれだけでOKなはず

導入

Controller

〜〜省略〜〜
def index
  @tasks = current_user.tasks.all
end
〜〜省略〜〜

View

〜〜省略〜〜
<%= line_chart @tasks %>
〜〜省略〜〜

これで





データも何も入ってませんが、表示させることに成功。


ここまで超簡単です！

それっぽいデータを表示できるようにしてみる

gem "groupdate"

いつものごとくbundle installで導入。

〜〜省略〜〜
<%= line_chart @tasks.group_by_day(:created_at).count %>
〜〜省略〜〜

データも表示できました！！

※groupdate導入時にmysqlのタイムゾーンを設定していなかったせいでエラーが。。。

https://github.com/ankane/groupdate#for-mysql

→公式サイトに助けてもらいました。

オプションを使えば、、、

プレフィックスやサフィックス付与、データ無しの時の「No data」なんかも表示できました！

まとめ

Chartkickは本当に「一瞬」でおしゃれなグラフが作れる。