7
11

More than 3 years have passed since last update.

Railsでシンプルなグラフを出力 gem-chartkick・groupdate使用

Last updated at Posted at 2020-07-16

Railsでグラフ機能を実装したいと思い、Chartkickを使用しました。
中々記事が少なかったので、少しでも参考になればと思い載せることにしました。
今回はgem groupdateを使い、更新日時を取得しています。
使用したgemは以下の通りです。
- chartkick
- groupdate
Chartkick公式 https://chartkick.com

開発環境

Rails 5.2.4

構築

① gemのインストール

gem chartkick
gem groupdate

② ターミナル

 bundle install

③ Javascriptのライブラリ読み込み
app/assets/javascripts/application.jsに下記を追記。

application.js
//= require chartkick
//= require Chart.bundle

④ コントローラーに記述

top.rb
  def index
    @users_count = User.group_by_day(:created_at).size
        # ユーザー登録数グラフ出力 gem groupdateをインストールしないと上記の記述は使用不可
    @user_today = User.where(created_at: Date.today.all_day).count
        # ユーザーの1日の登録数
  end

⑤ viewに記述

index.html.erb
    <div class="main">
        <label class="text-user">日別会員登録者数 (総会員数 : <%= @users.count %>)</label>
        <div class="graph">
          <%= line_chart @users_count, download: true, colors: ['#FF4F02'] %>
        </div>
    </div>

⑥ 実際の画面(登録日と登録数)
guraf.jpg

line_chart 

  • 折れ線グラフの出力に使用。他に、pie_chart(円グラフ)・column_chart(棒グラフ)・bar_chart(棒グラフ水平方向)・area_chart(面グラフ)・scatter_chart(散布図)などが利用可能。

colors: ['rgb']

  • グラフの線の色を変えられる。

gem groupdateについて

  • groupdateは所定のタイムゾーンに基づいて、日時のデータを扱います。groupdateをインストールすると、以下のメソッドが利用可能。 参考 https://github.com/ankane/groupdate

group_by_second (2分ごとの時間)
group_by_minute (分)
group_by_hour (時間)
group_by_day (日にち)
group_by_week (週)
group_by_month (月)
group_by_quarter (四半期)
group_by_year (年)
group_by_hour_of_day (日と時間の両方を返す)
group_by_day_of_week (一週間事の日付を返す)
group_by_day_of_month (月の日ごと)
group_by_month_of_year

参考①棒グラフ column_chart使用
スクリーンショット 2020-07-16 18.13.32.png

参考③円グラフ pie_chart使用
スクリーンショット 2020-07-16 18.13.47.png

group_by部分は、曖昧なところがありますが、間違っていれば、ご指摘お願いします。
chartkickは公式サイトにも画像付きで使い方がわかりやすく出ているので参考にしてみてください。

7
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
11