【Laravel】googleチャートでデータをグラフ出力してみる

PHP
2019.12.23

はじめに

Laravelでグラフ出力をしてみます。
グラフ出力も様々な方法があります。
個人的にchart.jsは使用した事がある為、googleチャートを試してみました。

手順

わかりやすくする為、Viewのみでグラフ表示を行ってみます。
Viewのみで完成してイメージを掴めれば、コントローラー側からそのデータを渡すように変更すればいいと思います。
今回は以下のような複合的なグラフを作っていきます。

棒グラフは積み上げ式（青と赤の部分）、そこに折れ線グラフも追加します。

googleチャートのローダーを指定 

<script src="https://www.gstatic.com/charts/loader.js"></script>

パッケージのロードを行う 

google.charts.load('current', {packages: ['corechart']});

ロード完了まで待機

google.charts.setOnLoadCallback(drawChart);

データの準備

var data = google.visualization.arrayToDataTable([
                ['年齢', '終身保険', '定期保険','不足金額'],
                ['55',  500 , 3000 , 3100],
                ['56',  500 , 3000 , 3800],
                ['57',  500 , 3000 , 2900],
                ['58',  500 , 3000 , 2500],
                ['59',  500 ,    0 , 2300],
                ['60',  500 ,    0 , 2100],
                ['61',  500 ,    0 , 1900]
]);

データ1行目がヘッダー、それ以降は4列の項目でデータを作成。

オプション設定

var options = {
                title: '保険の年間推移 ( 単位：万円 )',
                seriesType: "bars",
                isStacked: true,
                series: {2: {type: "line"}}
};

seriesType:棒グラフなのでbarsを指定します。
折れ線グラフはline、面積グラフはareaを指定します。

isStacked:棒グラフの積み上げはtrue。
積み上げしない場合はfalseまたはinStackedオプションを削除します。

series:一部折れ線グラフの指定をします。
ゼロから始まるデータ部の2番目をグラフlineで指定しています。

インスタンス化と描画

var chart = new google.visualization.ComboChart(document.getElementById('target'));
chart.draw(data, options);

まとめ

最終的には以下のようなコードになりました。
このままViewへ貼り付けて動作すると思います。

<head>
  <title>GoogleChartのテスト</title>
</head>
<body>
  <div id="target"></div>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
        // パッケージのロード
        google.charts.load('current', {packages: ['corechart']});
        // ロード完了まで待機
        google.charts.setOnLoadCallback(drawChart);

        // コールバック関数の実装
        function drawChart() {
            // データの準備
            var data = google.visualization.arrayToDataTable([
                ['年齢', '終身保険', '定期保険','不足金額'],
                ['55',  500 , 3000 , 3100],
                ['56',  500 , 3000 , 3800],
                ['57',  500 , 3000 , 2900],
                ['58',  500 , 3000 , 2500],
                ['59',  500 ,    0 , 2300],
                ['60',  500 ,    0 , 2100],
                ['61',  500 ,    0 , 1900]
            ]);
            // オプション設定
            var options = {
                title: '租税の年間推移 ( 単位：兆円 )',
                seriesType: "bars",
                isStacked: true,
                series: {2: {type: "line"}}
            };

            // インスタンス化と描画
            var chart = new google.visualization.ComboChart(document.getElementById('target'));
            chart.draw(data, options);
        }
 </script>
</body>
</html>

コメント