グラフ表示 入れたgemはChartkickですが、グラフ描画はchart.jsで書いています。

初めに

今回は、こんな感じで棒グラフと、折線グラフを実装しました。

以前、以下の記事で折線グラフは作成済みではあり、
やり方はほとんど一緒です。
この記事ではグラフのコードの解説のみなので、
gemの導入、投稿数の取得方法については以下の記事をご確認ください。
ユーザーがもらったいいね数の取得方法については追って記事を作成する予定です。

Javascriptの記述

turbolinksを無効にしなくてもグラフは表示できました。

一応、chart.jsでの基本の書き方は以下になります。

 <canvas id="myChart_2" width="200" height="48"></canvas>
　　　<!--グラフの記述-->
        <script>
        var ctx = document.getElementById("myChart_2").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['6日前', '5日前', '4日前','3日前', '2日前', '1日前', '今日'],
                datasets: [{
                    label: "投稿数",
                    data: [<%= @posts.created_6days_ago.count %>,<%= @posts.created_5days_ago.count %>,<%= @posts.created_4days_ago.count %>,<%= @posts.created_3days_ago.count %>, <%= @posts.created_2days_ago.count %>, <%= @posts.created_yesterday.count %>, <%= @posts.created_today.count %>],
                    backgroundColor: 'rgba(30, 144, 255, 0.5)',
                    borderColor: 'rgba(30, 144, 255, 0.5)',
                    fill: false},{
　　　　　　　　#ここから重ねる２個目のグラフ
                    label: "もらったいいね数",
                    data: [<%= @point.created_6days_ago.count %>,<%= @point.created_5days_ago.count %>,<%= @point.created_4days_ago.count %>,<%= @point.created_3days_ago.count %>, <%= @point.created_2days_ago.count %>, <%= @point.created_yesterday.count %>, <%= @point.created_today.count %>],
                    backgroundColor: "rgba(255,0,0,0.4)",
                    borderColor: 'rgba(255,0,0,0.4)',
                    type: 'line',
                }]
            },
        });
      </script>

borderColor: 'rgba(30, 144, 255, 0.5)',とありますが、
最後の0.5とかの数字をいじればもっとぼかしたりできます。
以下のサイトを参考に綺麗なグラフが作れるかと思います！