Ruby on Railsでchart.jsに変数を入れる方法

はじめに

１９年６月からプログラミングの勉強をはじめているものです。
作成したアプリでchart.jsを使用し、変数を入れるところに苦労したので書いてみます。

chart.jsの導入

導入に関してはこちらを参照、大変分かりやすくグラフの導入部までは簡単にできます。

グラフに変数を入れる。

例えば、毎日の運動時間を測るアプリで、運動時間と日付を棒グラフで作る際は、このような感じになります。

前提　

UsersとSportsとテーブルがある。
UsersとSportsは親子関係で一対複数の関係
Sportsにはsport_day（データ型はdate）とsport_time（データ型はfloat）のカラムを持つ
*created_atでも問題なし

Controllerからです。

X軸はこちら、日付を配列させます。

users_controller.rb

        @graphdays =  @user.sports.order(sport_day: "DESC").limit(6).reverse
        @dayline = Array.new
        @graphdays.each do |graphday|
            @dayline.push(graphday.sport_day.strftime('%m/%d').to_s)
        end

以上、limitの数はご自由に、reverseさせないと表示された時、31日、30日という順番になります。
date型は.to_sを使用しないと文字列として表示されないので注意

Y軸はこちら、時間を配列させます。

users_controller.rb

        ＠graphtimes =  @user.sports.order(sport_day: "DESC").limit(6).reverse
        @timeline = Array.new
        @graphtimes.each do |graphtime|
            @timeline.push(graphtime.sport_time)
        end

こちらもreverseを忘れずに

次はViewです。

show.html.erb

<canvas id="spotsChart" width="200" height="200"></canvas>
   <script>
    var graphdays = <%== @dayline %>, graphtimes = <%= @timeline %>
   </script>
  　<script>draw_graph();</script>

ここはvarを使わないと変数が入らないので注意が必要
daylineのところは<%== %>と＝＝が二つならないとなぜか表示されませんでした。
（場合によっては＝＝でなくても大丈夫かも知れません）

最後はcoffeeです。

users.coffee

    window.draw_graph = -> 
    ctx = document.getElementById("sportsChart").getContext('2d')
    sportsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: graphsdays,#ここは日付が表示される　X軸に当たる
            datasets: [{
                label: '運動時間',
                data: graphtimes,#ここは時間が表示される　Y軸に当たる
                backgroundColor: [
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    })

このようなグラフができると思います。