Google Chartsを使用してのデータの可視化を試してみる

可視化とは

可視化とは、人間が直接「見る」ことのできない現象・事象・関係性を「見る」ことのできるもの（画像・グラフ・図・表など）にすることをいう。視覚化・可視化情報化・視覚情報化ということもある。英語の "visualization", "visualize" に相当し、そのままビジュアリゼーション・ビジュアライゼーションと称されることもある。流れの可視化のように分野や領域に結びついて生まれた呼称も多い。

wikipediaから

Google Charts

GoogleChartは、システムで良く利用されるグラフ描画のJavaScriptのライブラリで、
Googleアナリティクスなどで使用されてます。

https://developers.google.com/chart/?hl=ja
https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

様々なタイプのグラフが使用できます
Chart Gallery
https://google-developers.appspot.com/chart/interactive/docs/gallery

データの取り扱い

> Data Policy > All code and data are processed and rendered in the browser. No data is sent to any server.

Google Chartsを使用してのデータの可視化をためす

サンプルデータ

[["YYYYMMDD","\u30c7\u30fc\u30bf1","\u30c7\u30fc\u30bf2","\u30c7\u30fc\u30bf3"],["2014\/02\/01",111,136,221],["2014\/02\/02",150,109,78],["2014\/02\/03",259,140,114],["2014\/02\/04",203,103,191],["2014\/02\/05",96,113,103],["2014\/02\/06",222,193,74],["2014\/02\/07",230,110,100],["2014\/02\/08",56,101,133],["2014\/02\/09",284,149,248],["2014\/02\/10",45,132,61],["2014\/02\/11",263,153,126],["2014\/02\/12",14,170,215],["2014\/02\/13",81,162,141],["2014\/02\/14",237,177,140],["2014\/02\/15",116,183,69],["2014\/02\/16",139,191,60],["2014\/02\/17",144,103,158],["2014\/02\/18",255,164,195],["2014\/02\/19",187,145,162],["2014\/02\/20",238,114,220],["2014\/02\/21",32,112,131],["2014\/02\/22",197,119,241],["2014\/02\/23",266,197,223],["2014\/02\/24",189,171,143],["2014\/02\/25",241,100,129]]

Html

```html

body onresizeメソッドに"chart.draw(data, options)"にしておくと
画面のリサイズに応じて表示できるようです。

<h4>/js/draw_chart.js</h4>
```js
var chart;
var data;
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {

  $chart_div = $("#chart_div");
  $.ajax({
    type: "get",
    url: $chart_div.data('url'),
    dataType : 'json',

    success: function(result) {
      data = google.visualization.arrayToDataTable(result);
      chart = new google.visualization.LineChart($chart_div.get(0));
      chart.draw(data, options);
    },
    error: function(data) {}
  });
}

/test.php

サンプルデータを出力

<?php
    use Carbon\Carbon;

    $entity = array();
    $entity[] = ['YYYYMMDD', 'データ1', 'データ2', 'データ3'];
    $start = Carbon::now()->startOfMonth()->day;
    $end = Carbon::now()->day;
    for ($d = $start; $d < $end; $d++) {
        $yyyymmdd = Carbon::create(Carbon::now()->year,Carbon::now()->month, $d);
        $entity[] = [
            $yyyymmdd->format("Y/m/d"),
            mt_rand (1, 300),   // データ1
            mt_rand(100, 200),  // データ2
            mt_rand (50, 250)   // データ3
        ];
    }

    echo json_encode($entity);

Carbon
https://github.com/briannesbitt/Carbon

データの可視化


• データ1は、最大件数が大きいがばらつきが多く
• データ2は、3つのデータで一番安定してる

データをグラフ化すると、直観的に把握しやすくなります。