はじめに
体重を毎日記録しグラフで変化を可視化するアプリを作成するためにChartkick/Groupdateを使いシンプルなグラフ機能を実装しました。他の記事ではseedファイルに初期データをあらかじめ入れておきグラフを表示させていたので、ユーザーが投稿したデータをもとにグラフを表示させる方法を本記事では記します。
環境
windows10
ruby 2.6.6
rails 6.0
用意しておくもの
シンプルな投稿機能は用意しておいてください。
私は体重を記録するweightカラムを持った、postsテーブルを作りました。
また、自らの体重だけを表示したいためdeviseというgemを使ってログイン機能を実装しています。
GOAL
ユーザーが投稿したデータをもとにグラフを作成する。
実装
gemのインストールするために、GemfileにChartkickとGroupdateのgemを追加します。
Gemfile.
gem "chartkick"
gem 'groupdate'
$ bundle install
yarnでchart.jsをインストールします。
$ yarn add chartkick chart.js
app/javascript/packs/application.jsに以下を追加します。
app/javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import "chartkick/chart.js" //追記
自らの体重を記録していくので、controller.rbでログインしたユーザーのデータだけを取得するようにします。
posts_controller.rb
def index
@posts = current_user.posts
@post = Post.new
end
最後に、グラフを表示させるコードをviweファイルに記述します。
index.html.erb
<%= column_chart @posts.where(created_at: 1.week.ago.beginning_of_day..Time.zone.now.end_of_day).group("date(created_at)").sum(:weight) %>
たったこれだけでグラフを表示することができます！
whereメソッドで直近1週間に記録された体重データを引っ張ってきました。
また、以下のようにすることでグラフをカスタマイズすることもできます。
<%= column_chart @posts.where(created_at: 1.week.ago.beginning_of_day..Time.zone.now.end_of_day).group("date(created_at)").sum(:weight)
, xtitle: "日付"
, ytitle: "体重(kg)"
, width: "600px"
, height: "200px"
,colors: ['#ffff00'] %>
ちなみに、様々な種類のグラフも表示させることができます。
・円グラフ
<%= pie_chart ~~~ %>
・折れ線グラフ
<%= line_chart ~~~ %>
・横棒グラフ
<%= bar_chart ~~~ %>
・散布図
<%= scatter_chart ~~~ %>
まだ他にもあるのでchartkickの公式リファレンスをご覧ください！