題名通りchartkickとgroupdateを使って投稿に紐づいたデータでグラフを作っていきたいと思います。
groupdateでかなり泥沼にハマったのでそれも合わせて書いていこうと思います。
完成形
はこんな感じです。投稿日に紐付けて棒グラフを作っていきます。
前提
Rails 6.0.3.5
金額や体重などなんらかのデータを入力している投稿機能を実装ずみ
Chartkickとgroupdateの導入
Chartkickだけでもグラフは作れるのですが、日時も表示したいのでgroupdateも導入します。
gem 'chartkick' # 追記
gem 'groupdate' # 追記
bundle install
さらにgroupdateの公式にMysqlのタイムゾーンを設定しろと書いてあるので設定します。
mysql_tzinfo_to_sql /usr/share/zoneinfo | mysql -u root mysql
続いてchart.jsの導入
$ yarn add chartkick chart.js
読み込めるように記述します
require("chartkick") // 追記
require("chart.js") // 追記
これで導入は終了です。
投稿に紐づいたデータを用意しよう
今回は投稿時に金額が入力できて、その金額を棒グラフに出力します。
コントローラーに表示用の変数を定義します。
def show
@user = User.find(params[:id])
@data = @user.posts
end
変数@dateにユーザーに紐づいた投稿を取得させています。
ビューで表示しよう
groupdateを導入したことで使えるようになったgroup_by_weekを使ってチャートを表示してみましょう。
<%= column_chart @data.group_by_week(:created_at).sum(:price)%>
＠dataで取得した日付と日時に対して1週間ごとの合計金額sum(:price)を表示しています。
いい感じにできましたね。
今度は1週間ごとではなく一日ごとになるようにしましょう。groupdateで使えるgroup_by_dayを使います。
<%= column_chart @data.group_by_day(:created_at, last: 7).sum(:price)%>
group_by_dayで日付毎にlast: 7で7日分を表示させています。
いい感じになりましたね！！！
その他のオプションを使ってみましょう
にも書かれているように色々な使い方ができるので試してみましょう！！！！
私は英語は読めませんが、日本語翻訳といろいろ試してなんとかなります。
<%= column_chart @data.group_by_day(:created_at, last: 7).sum(:price), xtitle: "日付", ytitle: "円"%>
xtitleで横軸のタイトルがytitleで縦軸のタイトルが指定できます。
<%= column_chart @data.group_by_day(:created_at, last: 7).sum(:price), xtitle: "日付", ytitle: "円", min: 0, max: 1000%>
minで最低値が、maxで最高値が指定できます。
<%= line_chart @data.group_by_day(:created_at, last: 7).sum(:price), xtitle: "日付", ytitle: "円", min: 0, max: 1000%>
line_chartで折れ線グラフになります。
他にもさまざまな使い方があるので気になった方はぜひチェック!!!
苦労した点、工夫した点
groupdateについての日本語の文献がなく英語の公式のオプションをみていろいろ試して実装しました。
特に1週間分だけのデータをグラフに表示させる方法がわからずorz
公式見ていろいろ試して、group_by_day(:created_at, last:7)という形に落ち着きました。
いい感じに1週間分のデータを表示できてると思います。
ちなみに一ヶ月分の表示させるのは同じ考えで、
group_by_day(:created_at, last: 30)
でいけます。厳密には一ヶ月ではなく30日分ですが。
英語アレルギーダメゼッタイ！！！
config.active_record.default_timezone = :localでDBの時間を日本時間にしたら
ActiveRecord::Base.default_timezone must be :utc to use Groupdate
というエラーにハマるorz
結局公式のGitHubのissueで製作者が
と言ってるのを見つけるorz(遅い)
まずは公式をみよう・・・（遅い）
でも開発環境であって本番環境はまた別に設定すればいいのでは？と気づき沼から抜ける。
最後に
やはりエラーやわからないことがあったらまず公式を見ることが大切だと改めて思いました（遅い）
日本語翻訳でもなんとかなります。オプションも試してみれば大体どういうのかわかります。
今後はまず英語の公式見る癖をつけたいと思います(遅い）
以上です。拙い文章にお付き合いいただきありがとうございました。