やりたいこと
過去７日間の投稿数を取得し、折れ線グラフで表示する. グラフが表示できなかったり、１２日分表示してしまったり・・・ととにかく大変でした。 そもそもJavascriptの知識が浅いため、、難しかったです。
注意
今回gemでChartkickを入れてますが、グラフの記述は、 完全にchart.jsの基本フォーマットで記載しています。 Chartkickはchart.jsもサポートしているため、gemがChartkickで、 グラフの記述がchart.jsの記述方法でもグラフが表示されます。7日間の投稿データ取得
前回作成した記事と同様です。グラフ化が大変だったのでここはサクッと行きます
違う点は、、
コントローラーに記述しなくても、モデルで定義した値をviewで使用できるということです。
７日間の投稿データ取得
models/book.rb
scope :created_today, -> { where(created_at: Time.zone.now.all_day) }
scope :created_yesterday, -> { where(created_at: 1.day.ago.all_day) }
scope :created_2days, -> { where(created_at: 2.days.ago.all_day) }
scope :created_3days, -> { where(created_at: 3.days.ago.all_day) }
scope :created_4days, -> { where(created_at: 4.days.ago.all_day) }
scope :created_5days, -> { where(created_at: 5.days.ago.all_day) }
scope :created_6days, -> { where(created_at: 6.days.ago.all_day) }
users_controller.rb
def show
@user=User.find(params[:id])
@books = @user.books.page(params[:page]).reverse_order
@today_book = @books.created_today
@yesterday_book = @books.created_yesterday
@this_week_book = @books.created_this_week
@last_week_book = @books.created_last_week
@book=Book.new
end
users/show.html.erb
<table class="table">
<thead>
<tr>
<th>６日前</th>
<th>5日前</th>
<th>4日前</th>
<th>3日前</th>
<th>２日前</th>
<th>昨日</th>
<th>今日</th>
</tr>
</thead>
<tbody>
<tr>
<th><%= @books.created_6days.count %></th>
<th><%= @books.created_5days.count %></th>
<th><%= @books.created_4days.count %></th>
<th><%= @books.created_3days.count %></th>
<th><%= @books.created_2days.count %></th>
<th><%= @yesterday_book.count %></th>
<th><%= @today_book.count %></th>
</tr>
</tbody>
</table>
もっと綺麗なコンパクトなコードにリファクタリング可能です
グラフ化①・・・chart.js ? chartkick をいれる
chart.jsで検索するとchartkickが出てきます。
もう何を入れるのか分からなくなりました
→chartkickのgemはchart.jsもカバーしてるので、
chartkickを入れました。
Gemインストール
以下の記事の通り行いました。groupdateもインストールしてしまいましたが、今回使わなかったです。
（正しくは、理解できず、うまく使えなかったです・・・)
Turbolinksの無効化
無効化にしないと、グラフが表示されないのではないかと思います。
と、思っていたのですが、別のアプリケーションで無効果せずに作成したところ、
表示されました。グラフが表示されない場合は、無効化を試してみてください。
私は、とにかくTurbolinksの記述を全削除してしまいましたが、個別削除がベストですね。
以下の記事で全削除できます。
Viewの記述
chart.jsの基本フォーマットを元に作成しております。
Turbolinks全削除済みの場合
users/show.html.erb
<canvas id="myChart" width="300" height="100"> </canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['6日前', '5日前', '4日前', '3日前', '2日前', '1日前', '今日'],
datasets: [{
label: "投稿数",
data: [<%= @books.created_6days.count %>, <%= @books.created_5days.count %>, <%= @books.created_4days.count %>, <%= @books.created_3days.count %>, <%= @books.created_2days.count %>, <%= @yesterday_book.count %>, <%= @today_book.count%>],
backgroundColor: 'rgba(255, 80, 120, 1.0)',
borderColor: 'rgba(255, 80, 120, 1.0)',
fill: false
}]
},
});
</script>
Turbolinksを個別で無効化
<canvas id="myLineChart"></canvas>
<script>
$(document).on('turbolinks:load', function() {
var ctx = document.getElementById("myLineChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['6日前', '5日前', '4日前', '3日前', '2日前', '1日前', '今日'],
datasets: [
{
label: '投稿した本の数',
data: [<%= @books.created_6days.count %>, <%= @books.created_5days.count %>, <%= @books.created_4days.count %>, <%= @books.created_3days.count %>, <%= @books.created_2days.count %>, <%= @yesterday_book.count %>, <%= @today_book.count%>],
borderColor: "rgba(0,0,255,1)",
backgroundColor: "rgba(0,0,0,0)"
}
],
},
options: {
title: {
display: true,
text: '7日間の投稿数の比較'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 10,
suggestedMin: 0,
stepSize: 1,
callback: function(value, index, values){
return value
}
}
}]
},
}
});
});
</script>
これで、折れ線グラフの表示ができました。
参考にさせていただいた記事
以下の記事でも、グラフができましたが12日分表示されてしまいました。
どうやって７日間分に抑えれば良いのだろう？？
今回、groupdate使えこなせてないですが、使えたら便利