Chartkickを使用したグラフ作成

はじめに

体重管理アプリを作成しようと思い、入力した値をグラフ化する際にchartkickを使用したので、
導入方法からデータ入力、表示方法を忘れないように記録します！！
Rails 6を使用しています！！

※使用するバージョンによって記述内容が異なるので、詳しくはリンクを参照してください。
Chartkick公式

ChartKickの導入

まずgemにファイルに以下を記述します。
groupdateは今回作成するアプリで日時を表示したいため、一緒に導入しました。

qiita.rb

gem "chartkick"
gem 'groupdate'

記述ができたらbundle installを行います。

続いてchart.jsを追加するため、ターミナルで以下も実行。

・yarn add chartkick chart.js

qiita.js

require("chartkick")
require("chart.js")

入力したデータをグラフにする

以下はコントローラー内容です

qiita.rb

def create
    @weight = Weight.new(weight_params)
    if @weight.save
      redirect_to action: 'index'
    else
      render :new
    end
  end

  private
  def weight_params
    params.require(:weight).permit(:weight, :date).merge(user_id: current_user.id)
  end

以下はビューファイルの記述です。

qiita.rb

<%= line_chart @weight.group_by_day(:date, series: false).average(:weight),height: "400px",xtitle: "日", ytitle: "体重",min: 30, max: 80, curve: false %>

これでweightモデルのdateカラムをX軸にグラフが作成できます。
・series: falseを記述しないと、データが無い日付に０がカウントされてしまいます
・curve: falseでは、折れ線グラフの線が直線になります

以下が今回作成したグラフの画像です。

まとめ

Chartkickでは、折れ線グラフの他にも円グラフなど様々なグラフを作る事ができます。

今後はX軸、Y軸の値を入力された値によって変化させたり、グラフの点の部分にリンクつけて細かい記録を見たりとか、色々つけたい機能がたくさんあるので、実装できたらまた記事にします！！（それが実現できるかについてもまた調べます）