[CakePHP]OpenFlashChartを組み込む

概要

社内システムの売上管理でグラフを表示させたいと思って、PHPで使えるライブラリを探していたところ、

以上の２つが候補にあがりました。

どちらかといえばpChartの方が扱いが簡単そうだったので第一候補にあげていたのですが、どうやらPHP4専用のようで…orz
結局第２候補のOpenFlashChart(以下OFC)を使うことにしました。
結論から言うと、OFCにして大正解。

よくよく調べるとOFCにはCakePHPのヘルパーがあったり、そのおかげで扱いも非常に簡単だったり、思った以上にスタイリッシュでかっこよかったり*1 と、pChartがPHP4専用でよかったです。ほんと。

導入に際しては結構手間取った部分もありましたのでここにメモとして残しておきたいと思います*2 。

導入方法

ファイルを設置

まずは本体をこちらからダウンロード。
ここで注意して欲しいのは最新版*3 の1.9.7は「open-flash-chart.php」が後述するFlashChartヘルパーの形式に合いませんのでそのままでは使えません。*4 ですので、オススメは1.9.6を使うこと。
1.9.6のopen-flash-chart.phpならそのまま使えます。
それでも最新版を使いたいという方はご自分で研究してください。ここらへんに情報があります*5 。

ダウンロードしたファイルを解凍したら、
open-flash-chart.swfを/app/webrootへコピー。
/php-ofc-library/open-flash-chart.phpを/app/vendors*6 コピー。
で、本家の記載には無いのですがコメント欄に書かれているjsファイルもコピーする必要があるので、
/js/swfobject.jsを/app/webroot/jsにコピーしてください。

次にこちらからヘルパーをダウンロードしましょう。
でダウンロードした「flash_chart.php」を/app/views/helpersへ設置。

これでファイルの設置は完了です。

ヘルパーをちょっと手直し

このまま後述するソースで表示できそうなもんですが、実はうまくいきません。
というのも、ヘルパーからgraphクラスのrenderメソッドを呼ぶときに$output_typeを指定していないので、swfobject.jsが呼ばれずに渡すはずのパラメータが表示されてしまうようなんですね。ちゃんと調べたわけではないのでテキトーに言ってるんですがね。

$output_typeに”js”を指定してあげれば良いだけなので、ヘルパーのrenderメソッドの以下を修正してください。

return $this->graph->render();
// を下記に修正↓
return $this->graph->render("js");

これでちゃんとスクリプトが呼ばれるようになりますよと。

実際に使ってみる

こちらのサンプルソースを参考に書くだけです。
説明の必要も無いとは思いますが、

pagesコントローラで
```
var $helpers = array("FlashChart");
```
の記述を追加。
※pagesコントローラなんてねーよって人は、自分の勉強不足を猛省しつつappControllerにでも書いてください。これもわからないという方はCakePHPを初めから勉強しなおしてください。PHPも。あとオブジェクト指向とか。

/app/views/pages/charts.ctpを作成してサンプルソースをコピペ。

<?php
// Sets height and width
$flashChart->begin(400, 250);
// Title
$flashChart->title('Example 1 - Bars: Hits per Day');
// Configure Grid style and legends
$flashChart->configureGrid(
array(
'x_axis' => array(
'step' => 1,
'legend' => 'Day'
),
'y_axis' => array(
'legend' => '#Hits',
)
)
);
// Prepare some random data (10 points)
$random_hits = array();
for ($i=0; $i < 10; $i++) {
$random_hits[] = rand(10,100);
}
// Register each data set with its information.
$data = array(
'Hits' => array(
'color' => '#afe342',
'font_size' => 11,
'data' => $random_hits,
'graph_style' => 'bar',
)
);
$flashChart->setData($data);

// Set Ranges in the chart
$flashChart->setRange('y', 0, 100);
$flashChart->setRange('x', 0, 10);

// Show the graph
echo $flashChart->render();
?>

http://%url%/pages/charts.ctpにアクセスしてグラフが表示されてるはず。

どうですか？できました？

あとは普段どおりにコントローラからグラフに使うデータを配列で渡してあげて、それをグラフにセットしてやればデータベースのデータなどを簡単にグラフにできますよ。
あと、豆知識ですが、

// Register each data set with its information.
$data = array(
'Hits' => array(
'color' => '#afe342',
'font_size' => 11,
'data' => $random_hits,
'graph_style' => 'bar',
)
);

この部分の$data[‘Hits’]を$data[‘ヒット数’]とすると上の項目ラベルを日本語で表示できますよ。
もちろん配列の添え字*7 に日本語を使うわけなんで環境によってはやばいことがあるかもしれませんが、僕知らねーと。とりあえずうちの環境じゃバッチリ使えちゃってます。

参考

学生起業?池袋で働く学生社長のBlog?:CakePHPでopen flash chart – livedoor Blog（ブログ）
ヘルパーの存在を知ることができ、とっても助かりました。ありがとうございます！

teethgrinder
Thank you for Mr. John Glazebrook. It helped very much thanks to your work!

これ重要 [↩]
恐らくこの記事、このブログではかなり良記事になる予感 🙂 [↩]
20081224時点 [↩]
ヘルパーの形式に合わないというよりは、ファイルが細かく分かれててそれをopen-flash-chart.phpからincludeして使ってるので色々いじらないとそのまま使えないのですよ。 [↩]
僕って親切 🙂 [↩]
ルートのvendorsでもいいですが [↩]
添え字っていうんでしたよね？忘れちゃったよもう。 [↩]