グラフを統計データーで表示させたかったのでいろいろ調べてみたが、Googleでリリースしている Google Chartsを使ってみた。
統計情報はmysqlに保管しているものを利用したかったので、それでクエリーで検索して表示できないかと調べてみた。
Google Chartsとは
詳しくは「Google Charts」を参照のこと。
分布図だけでなく地図を使った図を作成できる。利用方法はいろいろサンプルも書いてあるし、検索だと本記事以外にもいろいろと出てくるのでそちらの方を是非参考にして欲しい。
「Visualization: Map – Google Charts — Google Developers」をみると簡単にGoogle Map APIと連動して地図を表示できる。
「Visualization: Pie Chart – Google Charts — Google Developers」ではよく分布図で利用される円形グラフが表示できるようになる。
こちらでは上の例を表示させた例である。
JavaScriptで記載されており、https://www.google.com/jsapiを読みだして使っている。
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">// <![CDATA[
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
// ]]></script></pre>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<pre>
複数のグラフを表示させる方法
詳細な説明についてはgoogleのページを参照していただきたい。
私がちょっと悩んだのは１ページで複数のグラフを表示させる方法である。「function drawChart() {グラフデーター}」で表示させるグラフの中身のデーターを入力しているが、その関数名を指定するのはその前の行にある「google.setOnLoadCallback(drawChart);」 で指定している。
「google.setOnLoadCallback(関数名)」と任意の関数名を指定して「function 関数名(){グラフデーター}」で関数名を使えばいいので、それを使って複数の関数名を使用することで対応することが可能になる。
PHP、mysqlとの連動
実際の例をみても分かる通り、JavaScript内でグラフデーターを書いている。
そのため、PHPでダイナミックにグラフデーターを書くことが考えられるのと、もうひとつはAJAXなどの方法を用いて書きたいデーターを送りそこからJSONなどのデーターを受け取って表示させる方法がある。
保守性を考えると後者のほうがいいが、今回はとりあえず実験的にあまり手間を考えずに使ったので前者の方法を利用した。
具体的にはphp内でmysql のクエリーを実行しその結果について[‘項目’, 数 ] を書いた。
$drawScript ='グラフデーターを書くまでの記述';
$i = 0;
while ($row = mysql_fetch_assoc($result)) {
if ($i != 0) {
$drawScript .=", ['" . $row['item'] . "', " . $row['num'] . "]";
} else {
$drawScript .= "['項目', '数'], ['" . $row['item'] . "', " . $row['num'] . "]";
// 一つ目の項目は 前に コンマ がいらないのと要素を入れる必要があるため
}
$i++;
}
print $drawScript . '後必要な記述';
上のような形であれば比較的簡単にmysqlのデーターを元にダイナミックにグラフを作成し表示させることが可能となる。
まとめ
Google Chartsについては私以外にもいろいろな人が書いているが、mysqlのデーターを表示させる方法について書いている人が少なかったので書いてみた。
またjsonを利用した場合についても検証を行ってみたので興味のある方はぜひ見てください。