Load to Professional...

最高の凡人系Webエンジニアへ。地に足をつける。

Chartkick導入してみた

はじめに

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

f:id:oni_rb:20190802195256p:plain


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

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 %>
〜〜省略〜〜



これで


f:id:oni_rb:20190802202832p:plain


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


ここまで超簡単です!

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


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

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



f:id:oni_rb:20190802210345p:plain

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

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

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

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

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

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


まとめ

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