今まで2回に分けてgoogle chartについて書いてきました。
Google Charts + PHP + mysqlでグラフを作ってみた
google chart + json で作成してみました。
一つ目の記事ではgoogle chartをjsonを使わずにphp 経由で mysqlとの連動について書きました。
二つ目の記事ではjavascriptで標準的にデータのやりとりで利用されているjsonについて書いてみました。
「Populating Data Using Server-Side Code」で図を書くロジックは以下のように表されています。
{ function drawChart() { var jsonData = $.ajax({ url: "getData.php", dataType:"json", async: false }).responseText; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240}); }
プログラムから分かる通り、jsonでの情報をやりとりするのはgetData.phpになります。
phpに対してデータを送りたい場合
mysqlでクエリーを利用したい場合、何らかの情報を送る必要があるのでその時は「type: “POST”, data: {‘変数1’: 値1, ‘変数2’: 値2 ,その他の値},」といった情報を$.ajaxの中に入れることで対応できます。
ここで仮に変数をone, twoとし、値をichi, niとすると以下のように追加してください。
var jsonData = $.ajax({ url: "getData.php", dataType:"json", type: "POST", data: {'one': ichi, 'two': ni}, async: false }).responseText;
このようにすると値は指定されたphpに送られます。type: “GET” でも動作するとは思っていますが、今のところ試していないです。
phpでデータを受け取るとき
$one =filter_input(INPUT_POST, 'one') ; $two =filter_input(INPUT_POST, 'two') ;
phpでは上のようにすれば値が利用できるようになります。
このあとPHPでjsonデータを生成して渡す必要があります。
下のコードは「google chart + json で作成してみました。」で上げたデータをmysqlから取り出してjsonに対応したフォーマットで出力する場合の例になります。
$i=0; $jsondata = '{ "cols":[ {"label": "ID","type":"string"},{"label": "Life Expectancy","type":"number"},{"label": "Fertility Rate","type":"number"},{"label": "Region","type":"string"},{"label": "Population","type":"number"}], "rows":['; while ($row = mysql_fetch_assoc($result)) { $ID = $row['ID']; $Life = $row['LIFE']; $Fertility = $row['Fertility']; $Region = $row['Region']; $Population = $row['Population']; if ($i === 0) { // 一行目は前にコンマがつかないための処理です。 $jsondata .= '{"c": [{ "v": "' . $ID . '"},{"v":' . $Life . '},{"v":' . $Fertility . '},{"v":"' . $Region . '"},{"v":' . $Population . '} ]}'; } else { $jsondata .= ', {"c": [{ "v": "' . $ID . '"},{"v":' . $Life . '},{"v":' . $Fertility . '},{"v":"' . $Region . '"},{"v":' . $Population . '} ]}'; } $i++; } $jsondata .= ']}'; echo $jsondata;
phpの場合はjson_encodeなどが利用できますが、google chartの場合のjsonフォーマットはちょっと癖があったので実際のフォーマットに合わせて作りました。
再度jsonデータを受け取る
phpで生成されたデータを受け取るのはgoogle chartでは関数が用意されている。
「var data = new google.visualization.DataTable(jsonData);」
で受け取る。また、表示するには
「var chart = new google.visualization.BubbleChart(document.getElementById(‘chart_div’));
chart.draw(data, options);」
を使って表示します。
表示の凡例などを書く場合
optionsを利用するとグラフの凡例などが変更できます。例えば「Visualization: Bubble Chart」では以下のように書いています。
var options = { title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: {textStyle: {fontSize: 11}} };
ここでjavascriptの変数を利用することができます。例えば title, hAxis, vAxis, fontSizeはgoogle chartで決められている変数ですが : のあとは javascriptの変数が使えます。
例えば全体のタイトルの変数が hennsuTitle, 横軸が hennsuYoko, 縦軸を hennsuTateとした場合以下のようにかけます。
var options = { title: hennsuTitle, hAxis: {title: hennsuYoko}, vAxis: {title: hennsuTate}, bubble: {textStyle: {fontSize: 11}} };
まとめ
jsonとphpをgoogle chartで使う方法についてこの記事では紹介しました。
応用するとインターラクティブに多くのデータを処理することもできるようになります。
google chart以外にもjavascriptでグラフを書くライブラリーがあるのでもし機会があればチャレンジしてみたいと思います。