Chartkickを使って、グラフを作成してみた

はじめに

Chartkickというgemを使うと、簡単にグラフが作れてしまうらしいので、実験的に使ってみる事に。

環境

Ubuntu16.04.7 LTS
Windows10 + Vegrant
Rails 5.2.4
Ruby 2.5.1

手順

Gemfileに２つのgemを追加します。

gem 'chartkick'
gem 'groupdate'

$bundle install

application.jsに２つのjsを追加します。

application.js

//= require chartkick
//= require Chart.bundle

適当にコントローラを作成します。show1とshow2と２つメソッドを作成したのは、それぞれ異なるグラフを表示させるためです。

$rails g controller asagaos index show1 show2

適当にモデルを作成します。（朝顔の成長記録を想定したデータを登録するため、このようなモデルにしました）

$rails g model asagao jyotai:string take:integer ymd:date
$rails db:migrate

rootを設定します。

routes.rb

get 'asagaos/show1'
get 'asagaos/show2'
root 'asagaos#index'

seedにテストデータを作成します。

seed.rb

Asagao.destroy_all

require "date"
_todate = Date.today

30.times do |n|

    _jyotai = case n 
        when 0..10 then  "種"
        when 11..20 then "葉"
        when 21..30 then "花"
    end

    _ymd = _todate + n

    Asagao.create!(
        jyotai: "#{_jyotai}",
        take: "#{n + 10 }",
        ymd: "#{_ymd}"
    )
end

テストデータを流します。

$rails db:seed

コントローラをこのように記述します。

controller/asagaos_controller.rb

class AsagaosController < ApplicationController
    def index
        @asagaos = Asagao.all
    end

    def show1
    end

    def show2
    end
end

indexビューをこのように記述します。

view/asagaos/index.html.erb

<h1>朝顔の成長記録</h1>

<%= link_to 'グラフ１', asagaos_show1_path %>
<%= link_to 'グラフ２', asagaos_show2_path %>
<br>

<table>
  <thead>
    <tr>
      <th>状態</th>
      <th>丈</th>
      <th>日付</th>
    </tr>
  </thead>

  <tbody>
    <% @asagaos.each do |a| %>
      <tr>
        <td><%= a.jyotai %></td>
        <td><%= a.take %></td>
        <td><%= a.ymd %></td>
      </tr>
    <% end %>
  </tbody>
</table>

棒グラフを表示させる記述です。

views/asagaos/show1.html.erb

<h1>Asagaos#show1</h1>
<p>Find me in app/views/asagaos/show1.html.erb</p>

<%= link_to '一覧', root_path %>
<br>
<%= column_chart Asagao.group_by_day(:ymd).sum(:take), id: "column-chart", width: "800px", height: "500px" %>

円グラフを表示させる記述です。

views/asagaos/show2.html.erb

<h1>Asagaos#show2</h1>
<p>Find me in app/views/asagaos/show2.html.erb</p>

<%= link_to '一覧', root_path %>
<br>
<%= pie_chart Asagao.group(:jyotai).count %>

実行します。

$rails s

index画面でテストデータを一覧表示します。

グラフ１を表示させると、このようになります。

グラフ２を表示させると、このようになります。

参考URL