以前からPHP/SWF Chartsを使ってグラフを表示してみようと思っていたのですが、ようやく試してみました。
このライブラリはフリーで使うには以下を満たす必要があります。(http://www.maani.us/charts/index.php?menu=License)
・グラフをクリックされたらPHP/SWF ChartsのWebサイトに行ってね
・中に他のFlashファイルを表示させないでね
・技術サポートはなしよ
この条件だと、普通のサービスじゃ使えないじゃん。と思われそうですが、個人的なblogのアクセス集計の表示だとか外部にあまり公開しないものであれば使い道はあると思いました。
まずチュートリアルにあるサンプルを変更するところから始めました。
http://www.maani.us/charts/index.php?menu=Tutorial
グラフは表示させるphpと、swfに食わせるグラフデータを出力するphpの二つのスクリプトを書くことになります。グラフの出力といっても簡単でチュートリアルのソースの
<?php include "charts.php"; //the chart's data $chart [ 'chart_data' ] = array ( array ( "", "2001", "2002", "2003", "2004" ), array ( "Region A", 5, 10, 30, 63 ), array ( "Region B", 100, 20, 65, 55 ), array ( "Region C", 56, 21, 5, 90 ) ); //send the new data to charts.swf SendChartData ( $chart ); ?>
$chart [ ‘chart_data’ ]という中にデータを配列にして入れるだけです。最初の配列のarray ( “”, “2001”, “2002”, “2003”, “2004” )がカラムのタイトルになります。
デフォルトは縦の棒グラフですが折れ線グラフにしたくなりました。
$chart[ ‘chart_type’ ] = ‘line’;
とすると折れ線グラフにできます。他にも３次元のグラフなどいろいろな種類(line, column (default), stacked column, floating column, 3d column, stacked 3d column, parallel 3d column, pie, 3d pie, bar, stacked bar, floating bar, area, stacked are, candlestick, scatter, polar)があります。
次にデータの値を点の上に表示したくなりました。これは
$chart[‘chart_value’]を操作すれば良いようです。
ここの入れる値は連想配列で、positionをキーにした値に’above‘と入れると点の上にデータがテキストで表示されます。なお、positionの値はchart_typeによって指定できる値が変わるようで、たとえばデフォルトの棒グラフのcolumnの場合、グラフの上にデータを表示するには’above’ではなく’outside‘を指定します。
chart_typeとpositionの対応付けについてはhttp://www.maani.us/charts/index.php?menu=Reference&submenu=chart_valueのLabel Positionのところを参照してください。
今回作ってみたサンプル(http://labs.makotokw.com/s/sandbox/charts)では以下のようにしています。
$chart['chart_value'] = array ( 'color'=>"333333", 'alpha'=>85, 'font'=>"arial", 'bold'=>true, 'size'=>10, 'position'=>"above", 'prefix'=>"", 'suffix'=>"", 'decimals'=>0, 'separator'=>"", 'as_percentage'=>false );
他にもアニメーションをつけたり色を付けたりいろいろできるようですが、個人的には折れ線グラフかつデータの表示で満足できました。
サンプルは配列の配列を使っていてわかりづらい人もいると思います。また実際に動的にデータを取得して表示する場合は一度にchart_dataのarrayを作らない方が書きやすいとも思います。
わかりやすいのが配列の末尾にデータを一行ずつ追加していく書き方だと思いますが以下のように書いてみました。
$rows = array();
$title = array ( "","1","2","3","4","5","6","7");
$rows[] = $title;
// adds
$data = array ("Adds 2");
for ($i=1; $i<count($title); $i++) {
$data[] = $i+2;
}
$rows[] = $data;
// times
$data = array ("Times 2");
for ($i=1; $i<count($title); $i++) {
$data[] = $i*2;
}
$rows[] = $data;
$chart['chart_data'] = $rows;
最初にカラムタイトルを配列に追加し、次に一行ずつデータを作って配列に追加、最後にchart_dataに代入です。
結構はまったのがキャッシュが効いているせいか、グラフデータの出力をしているスクリプトを変更しても表示が変わらないことがよくありました。この場合、InsertChartの第3引数で要求しているURLをそのままブラウザで表示して更新すると表示が変わります。