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

<h2>可視化とは</h2>

http://ja.wikipedia.org/wiki/%E5%8F%AF%E8%A6%96%E5%8C%96

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

wikipediaから

<h2>Google Charts</h2>

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


<h4>データの取り扱い</h4>
> Data Policy
> All code and data are processed and rendered in the browser. No data is sent to any server.

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

<h4>サンプルデータ</h4>

```json
[["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]]
```

<h4>Html</h4>
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var gtitle = "グラフ1";
var vtitle = '件';
var htitle = '日付';
var maintbheight = $(window).height();
var maintbwidth = $(window).width();
var options = {
  title: gtitle,
  series: {
    // データ系列の設定
    0:{color: '#D2203E', lineWidth: 2, visibleInLegend: true},
    1:{color: '#FF844E', lineWidth: 2, visibleInLegend: true},
    2:{color: '#3498DB', lineWidth: 2, visibleInLegend: true}
  },
  vAxis: { title: vtitle, titleTextStyle: { fontSize: 14 }},
  hAxis: { title: htitle, titleTextStyle: { fontSize: 14 }},
  height: maintbheight
};
</script>
<script src="/js/draw_chart.js"></script>
</head>
<body onresize="chart.draw(data, options)">
  <div id="chart_div" style="width: 100%; height: 100%" data-url="/test.php"></div>
</body></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) {}
  });
}
```

<h4>/test.php</h4>
サンプルデータを出力

```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

<h2>データの可視化</h2>
![chat1_mini.jpg](https://qiita-image-store.s3.amazonaws.com/0/34109/27dcd592-f58f-ac53-0067-b92892682382.jpeg)

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

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