6日目

【技術テーマ】

APIを使ったグラフ描画

言語

JavaScript
canvas

目標成果物

前回作ったAPIを叩いてグラフを描画する部分を作成したいと思います。

コードと資料

1. グラフを描画するページを決める

今回はPHPでAPI作ったので、PHPの方でグラフの描画画面も作成しちゃおうと思います。
別にルーティングとかもしたくないので、初期からあるresources/views/welcome.blade.phpを書き換えます。

2. 必要なライブラリの用意

JSでのグラフ描画はめちゃくちゃ種類があってc3.jsが簡単って記事を見かけてトライしていたのですが、ライブラリのインストールがうまく行かなくて嫌になったので
https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369
こちらの記事を参考にChart.jsでグラフを描画したいと思います。

welcome.blade.php

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
        <title>グラフ描画</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>

ヘッダーに必要なライブラリ等を定義します。
ダウンロードとかも面倒なので全部cdn使ってます笑(コピペで動いたほうが楽だろうし....)
今回使うのは

chart.js
jquery

こちらの2種類です。

3. キャンバスの用意

グラフを描画するためのキャンバスを用意します。

welcome.blade.php

    <body>
        <canvas id="myChart"></canvas>
    </body>

4. ロジックの記載

上記のbodyの中にスクリプトを記載していきます。

welcome.blade.php

    <body>
        <canvas id="myChart"></canvas>
        <script>
            $.ajax({
                url: '/api/logs',
                type: 'GET',
                dataType: 'json',
            })
            .done(function(data) {
                var labels = [];
                var datasets = [];
                var tmpLabel = "";
                var results = data['result'];
                for(var i = 0; i < results.length;i++){
                    // ラベル取得処理
                    if(tmpLabel != results[i]['date']){
                        labels.push(results[i]['date']);
                        tmpLabel = results[i]['date'];
                    }
                    // データセットの作成
                    var index = datasets.findIndex(item => item['label'] == results[i]['image_id']);
                    if (index === -1) {
                        datasets.push(
                            {
                                label:results[i]['image_id'],
                                data:[results[i]['download']],
                                borderColor:"rgba("+results[i]['download']*10+",0,0,1)",
                                backgroundColor: "rgba(0,0,0,0)"
                            }
                        );
                    }else{
                        datasets[index]['data'].push(results[i]['download'])
                    }
                }
                // グラフ設定
                var ctx = document.getElementById("myChart");
                var myLineChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                    labels: labels,
                    datasets: datasets,
                    },
                    options: {
                    title: {
                        display: true,
                        text: 'ダウンロード数'
                    },
                    scales: {
                        yAxes: [{
                        ticks: {
                            suggestedMax: 40,
                            suggestedMin: 10,
                            stepSize: 10,
                            callback: function(value, index, values){
                            return  value +  '回'
                            }
                        }
                        }]
                    },
                    }
                });
            })
            .fail(function() {
                alert("APIとの通信に失敗しました");
            });
        </script>
    </body>

一気に書いてしまいましたがこんな感じです。

ajaxでAPIサーバーを叩いてデータを取得し、そのデータをもとにラベルとデータセットを作成して当てはめているだけです！

5. いざ実行

実行すると下記のような画面になりました....

なんといいますか...3日分しかデータがなく、かつダウンロード数も全然変動してないのでとてもつまらないグラフになってしまいました....

今後頑張ってダウンロードしてもらえるような画像を投稿せねば....

一旦今回やりたいこととしては完結しているのでこのシリーズは完結とします...
(次は実用的 or ちゃんとしたものを作ろうと思います....)