今まで２回に分けて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: {‘変数１’: 値１, ‘変数２’: 値２ ,その他の値},」といった情報を$.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でグラフを書くライブラリーがあるのでもし機会があればチャレンジしてみたいと思います。