かるくグラフを描いてみよう

DBに入っていたり、スクリプトで吐き出した数字をちょっとグラフにしたいときに、一旦CSVに吐き出してエクセルに持って行こうとしたら自分のPCにオフィスはいってなかったわーとか、GDライブラリを使ってごりごりお絵かきするかと思ったらサーバに入れてなかったわー(しかもなんだかんだと依存問題が出てサックリインストールできない)とか、そんなときにはJavaScriptをちょろっと使ってさっとグラフ描けるGoogle Chartsがべんり。Charts? Chart?

参考文献

データの準備

マトリクス的にデータを渡せるarrayToDataTableというメソッドを使うため、Arrayもしくは専用のClassあたりにデータを入れとくとプログラムを書きやすいとおもいます。

サンプルなんで超テキトーにデータつくります。２本グラフ引くためにValuesを２つ用意してます。

<?php
error_reporting(E_ALL);
$datas=array();
for($utime=strtotime('-1 year'); $utime<time(); $utime=strtotime('+1 month',$utime))
  $datas[date('Y/m',$utime)]=array(rand(0,1000),rand(0,1000));
?>

HTML準備

headでは専用のJSを一つincludeしてあげるだけでOK。
bodyへdiv等でグラフを描画する要素を置いてあげましょう。この要素にはJSから呼び出すためのidもふってあげます。

<html>
<head>
 <script type="text/javascript" src="//www.google.com/jsapi"></script>
</head>
<body>
<div style="margin:20px 10px; padding:0; width:800px; height:350px;" id="graphField">Now Loading ...</div>
<script type="text/javascript">
 // ここに後述のJSコードをいれてね
</script>
</body>
</html>

JavaScriptを書く

グラフを描画する要素の直下でいいのでscriptタグを設置してそこへ実際のchartsなコードを書きます。

// この辺おまじない
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function(){
  // この辺データ
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Value1', 'Value2'],
    <?php foreach($datas as $ym=>$values): ?>
    ['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
    <?php endforeach ?>
  ]);
  // この辺グラフの描画オプション
  var options = {
    title: 'Graph Sample',
    chartArea: {'width':'70%', 'height':'65%', 'left':65 },
    hAxis: { title:'Year/Month', titleTextStyle:{italic:false} },
    vAxis: { title:'Random Values',  titleTextStyle:{italic:false} },
    crosshair: { trigger: 'both' }
  };
  // この辺おまじない
  var chart = new google.visualization.LineChart(document.getElementById('graphField'));
  chart.draw(data, options);
});

データの辺り

なんとなくマトリクスなデータあげるといいかんじに解釈してくれます。
最初の配列要素はラベルになります。

// 横軸 , 値1, 値2
['Month', 'Value1', 'Value2'],

２行目以降は実際にプロットされるデータになります。

<?php foreach($datas as $ym=>$values): ?>
['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
<?php endforeach ?>

こう書くと、

['2013/11',100,444],
['2013/12',400,512],
  :
['2014/10',931,123],

といったかんじで展開されるハズ。

意外とこういう処理するときに面倒なのが、配列に入ったデータをforeachとかforみたいなループ文を使って出力するときの最初と最後の判定で、「最初はラベル」「最後のカンマを入れないようにする」といったような微調整なんですが、PHPみたいに最後の要素のおわりにカンマが入っていてもエラー等にならずにスルーしてくれるようです。たぶん。

グラフのオプションの辺り

chartArea : グラフ描画するエリアの設定
- 元のdiv要素の大きさとグラフ描画の範囲を調整してあげないとラベルテキストが折り返したり軸の数字が隠れちゃったりするのでいろいろ調整してあげてください。
hAxis, vAxis : 縦軸横軸の設定
- 斜体がお気に召さないのでキャンセル
crosshair
- プロットにマウスオーバーすると十字に線を表示してくれる厨二心が満たされるオプション

グラフの種類

さいごのおまじないのLineChartの辺りをいろいろ変えれば違うグラフにもできます。

できた！

~~上X下B左L右R~~

べんり！

追記

会社の先輩よりご指摘いただきました：）

JSの配列書くときの最後のカンマ
- 古いブラウザ(IEとかIEとかIEとか)ではやっぱりシンタックスエラーになるかも。
"data" で複数形だから datas じゃないよ！
- 単数形は datum
- やったね！飲み会での話題がひとつ増えたよ！

Google Charts でとりあえずグラフを描いてみる