laravel, chart.js で n件ごとのグラフを表示する（備忘録

概要

laravelの練習を兼ねて、下記のような体調管理webアプリを作成した。
10件、30件、全件表示のボタンを押下することでグラフの切り替えが可能。

Controller

$userid = Auth::id();

        // ページネーションのため10件ずつ取得
        if(History::where('user_id', $userid)->count() >= 10){
            $histories = History::where('user_id', $userid)->latest()->paginate(10);
        }else{
            $histories = History::where('user_id', $userid)->latest()->paginate(History::where('user_id', $userid)->count());
        }
        // チャートでの表示のため30件を取得
        if(History::where('user_id', $userid)->count() >= 30){
            $histories_thirty = History::where('user_id', $userid)->latest()->paginate(30);
        }else{
            $histories_thirty = History::where('user_id', $userid)->latest()->paginate(History::where('user_id', $userid)->count());
        }
        // チャートでの表示のため全件を取得
        $histories_all = History::where('user_id', $userid)->latest()->get();

        return view('index', 
        ['histories' => $histories,
         'histories_thirty' => $histories_thirty,
         'histories_all' => $histories_all,
          'userid' => $userid,]);

paginateを利用して、それぞれの件数を変数に格納する。
それらをViewに渡す。

View (グラフ部分のみ）

<div style="width:1000px; margin: 0 auto 30px auto;">
  <div class="text-right">
    <button id="display_tenchart" class="btn btn-dark" disabled>10件</button>
    <button id="display_thirtychart" class="btn btn-dark">30件</button>
    <button id="display_allchart" class="btn btn-dark">全部</button>
  </div>
  <canvas id="Chart_default" style="width:1000px; height:300px;"></canvas>
</div>

<script>
  var ctx = document.getElementById('Chart_default').getContext('2d');
  var score = [];
  var labels = [];
  var histories_json = @json($histories);
  var histories_thirty_json = @json($histories_thirty);
  var histories_all_json = @json($histories_all);

  get_scores_ten();
  display_chart();

  //10件のスコアを取得
  function get_scores_ten(){
    $("#display_tenchart").prop("disabled", true);
    $("#display_thirtychart").prop("disabled", false);
    $("#display_allchart").prop("disabled", false);
    score = [];
    labels = [];
    for(var i=0; i < histories_json['data'].length; i++){
    score.unshift(histories_json['data'][i]['score']);
    labels.unshift(histories_json['data'][i]['created_at'].split(" ")[0].split("-")[1] + "/" + histories_json['data'][i]['created_at'].split(" ")[0].split("-")[2]);
    }
  }
  //30件のスコアを取得
  function get_scores_thirty(){
    $("#display_tenchart").prop("disabled", false);
    $("#display_thirtychart").prop("disabled", true);
    $("#display_allchart").prop("disabled", false);
    score = [];
    labels = [];
    for(var i=0; i < histories_thirty_json['data'].length; i++){
    score.unshift(histories_thirty_json['data'][i]['score']);
    labels.unshift(histories_thirty_json['data'][i]['created_at'].split(" ")[0].split("-")[1] + "/" + histories_thirty_json['data'][i]['created_at'].split(" ")[0].split("-")[2]);
    }
  }
  //全件のスコアを取得
  function get_scores_all(){
    $("#display_tenchart").prop("disabled", false);
    $("#display_thirtychart").prop("disabled", false);
    $("#display_allchart").prop("disabled", true);
    score = [];
    labels = [];
    for(var i=0; i < histories_all_json.length; i++){
    score.unshift(histories_all_json[i]['score']);
    labels.unshift(histories_all_json[i]['created_at'].split(" ")[0].split("-")[1] + "/" + histories_all_json[i]['created_at'].split(" ")[0].split("-")[2]);
    }
  }
  //10件表示
  $('#display_tenchart').on('click', function() {
    myChart.destroy();
    get_scores_ten()
    display_chart();     
  });
  //30件表示
  $('#display_thirtychart').on('click', function() {
    myChart.destroy();
    get_scores_thirty()
    display_chart();     
  });
  //全件表示
  $('#display_allchart').on('click', function() {
    myChart.destroy();
    get_scores_all()
    display_chart();     
  });

  // チャートを表示
  function display_chart(){
        myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '体調スコアの推移',
                data: score
              }
            ]
        },
        options:{
          scales:{
            xAxes:[],
            yAxes:[
              {
                ticks:{
                  min: 0,
                  max: 100,
                }
              }
            ]
          }
        },
    });
  };
  // インスタンス破棄をするために、グローバル変数で定義
  var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '体調スコアの推移',
                data: score
              }
            ]
        },
        options:{
          scales:{
            xAxes:[],
            yAxes:[
              {
                ticks:{
                  min: 0,
                  max: 100,
                }
              }
            ]
          }
        },
    });
</script>