非Web屋の俺がOpen Flash Chartを使ってみた

web php

いろいろと詰まったけど慣れてる人なら簡単に導入できると思われ。

Open Flash Chartとは

公式：http://teethgrinder.co.uk/open-flash-chart-2/
参考：http://fujitaiju.com/blog/php/open-flash-chartver2-x%E3%81%A8php%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%B0%E3%83%A9%E3%83%95%E3%82%92%E6%9B%B8%E3%81%8F%EF%BC%88%E5%B0%8E%E5%85%A5%E7%B7%A8%EF%BC%89/

Open Clash Chartとは、ウェブ上にFlashでグラフを描画するためのオープンソフトです。PHP, Ruby, Perl, Js< Pythonなどなどで使えるようです。DotNetもあるみたい。
仕事でwebUIをつくらんといけんくなった（デモ用）のでちょいちょいと使ってみた。
俺はWeb屋さんじゃないのでアパッチ起動するだけで一苦労です。
基本的にコンパイラのある言語しか使ったことないので、デバッグの仕方がわからNEEEE!!!

環境としてはRHEL 6.0 Enterprise 64bit, Apache2.2.18, PHP5.2.17を用意しました。エディタはしょうがない(?)のでEclipseのプラグインを導入。Windows環境だったらxamppを導入すればオールインワンのはず。CentOSだと最新版がダウンロードされないかもしれないのでyumの設定を書き換えましょう。ここでは割愛。

Apache+PHPを最新版にしよう

古いのが入っていたので最新版へ。まぁいろいろなところにいろいろなことが書いてあるので今さら俺が書いてもしょうがないかもしれんが、一応。

Apacheの最新版をダウンロードして展開、インストール

さくっとな。
ひとつ気をつけないといけないのは、たぶんRedHatに最初から入っているApacheはconfigureのオプションでlibファイルを生成するオプションが有効になっていないっぽい。なので、単に./configureとするとその後でPHPのlibphp5.soができないらしい。これで一日死んだ。
参考：http://oss.poyo.jp/pipermail/php-study/2006-October/000309.html

$ tar zxvf httpd-x.x.x.tar.gz
$ cd httpd-x.x.x
$ ./configure --enable-so {ほかオプション}
$ make
$ make install

なお、Apache2.0は/usr/local/apache2以下にファイルが展開されます（特に指定しなかった場合）。ほんでもって実行ファイルは/usr/local/apache2/bin/httpdなんだけど、それを実行するスクリプトは/usr/local/apache2/bin/apachectlらしい。
展開したフォルダ/build/httpd.initを/etc/rc.d/init.d/httpdに移動して設定を書き換えるてサービス化すると、apachectlと/etc/rc.d/init.d/httpdのスクリプトが両方叩かれて二重起動→80番ポート空いてないんですけど？って怒られる。
詳しい設定方法は詳しく書いているところがあると思うのでそちらを参照してください。
これがわからなくて一日死んだ。

PHPの最新版をダウンロードして展開、インストール

rpmがありゃ楽なんだけどなぁ。ま、さくっとな。libphp5.soファイルを作成するためにapacheのapxsが必要なようだ。
参考：http://www.oklab.org/language_c/php5_0_2_install_bug.htm
特定環境って書いてるけど、多分RedHatのapacheのオプションの設定のせいだと思われ。

$ tar zxvf php-x.x.x.tar.gz
$ cd php-x.x.x
$ ./configure --with-apxs2=/usr/local/apache2/bin/apxs {その他オプション}
$ make
$ make install
$ su root find / -name libphp*

これでlibphp5.soがあればOK
libファイルを適当（適切という意味）なところへコピーして、あとはapacheを起動する。

cp /usr/local/apache2/modules/libphp5.so /usr/lib64/httpd/modules/libphp5.so
service httpd start

phpinfoを実行してhttpdとphpのバージョンを調べよう。php知らない人のために書いておくと

<?php 
	phpinfo(INFO_MODULES);
?>

というファイルを作ってデフォルトだと/var/www/html/の下に置く。なおブラウザで閲覧する場合は
http://localhost/ファイル名
としてみよう（←それすら知らないのだった
http://localhost/ = /var/www/htmlです。これはhttpd.confのDocumentRootで変更可。
Forbiddenが出てしまう場合は
参考：http://www.cyberciti.biz/faq/apache-server-status/
とりあえずDeny from allをコメントアウトしとけばよいのかしら。

ようやくOpen flash chartへ

導入はとても簡単。/var/www/html以下にファイルをダウンロードしてきて展開すれば使えます。
なおOpen flash chartはv2.xになっているにもかかわらずググるとv1.xの方が上位に表示されるので注意。
公式（こっちね）：http://teethgrinder.co.uk/open-flash-chart-2/
v1.x:http://teethgrinder.co.uk/open-flash-chart/
メソッド名やプロパティなどが変わっているので互換はない模様。

基本的にはチュートリアルのとおりやっていけばOKです。open-flash-chart.swfのパスの設定を忘れそうなら、同じフォルダに配置するのが吉。

とにかくやってみる。
<html><head>
<!-- グラフ表示のためのJsとフラッシュファイルを指定する -->
<script type="text/javascript" src="../../ofc/js/swfobject.js"></script>
<script type="text/javascript">
	swfobject.embedSWF("open-flash-chart.swf", "data", "550", "200", "8.0.0", "expressInstall.swf", {"data-file":"chart_data.php"});
	swfobject.embedSWF("open-flash-chart.swf", "data1", "550", "200", "8.0.0", "expressInstall.swf", {"data-file":"chart_data1.php"});
</script>
</head>
<body>
<!-- グラフを挿入する -->
<div id = "data"></div>
<div id = "data1"></div>
</body>
</html>

いきなり二つ表示させる場合をかいてしまいましたが。
swfobject.embedSWFの引数に

  • フラッシュのファイル
  • グラフのnameに当たる名前
  • グラフのwidth
  • グラフのheight
  • フラッシュのバージョン？　8.0.0または9.0.0とかいておけばよいぽい。10.0.0でもいいのかな
  • 複数のファイルを表示する場合は後ろの二つの引数が必要。expressInstall.swfはようわからんがおまじない
  • 最後の引数は{"data-file":"グラフに描画するデータ・グラフ設定について書いたphpファイル"}とする


ちなみに一個しか表示しないよという場合は後ろの二つの引数は省略できます。そのかわりブラウザに表示するときは
http://localhost/disp.php?ofc=chart_data.php
などとしないといけない模様。"?ofc="とかいてデータファイルを食わせるんだね。

さて、肝心のデータファイル

これもとりあえずTutorialに書いてある通りに書けばできるが一応。

<?php
	include 'php-ofc-library/open-flash-chart.php';//php5-ofc-libraryとしたほうがよいのかもしれない
	
	//create dammy data
	$data = array();
	for($i = 0; $i < 10; $i++){
		$data[] = $i;
	}
	
	//set title
	$title = new title("TITLE");
	
	//set line
	$dot = new dot();
	$dot->colour('#cd5e3c');
	$line = new line();
	$line->set_defaultdot_style($dot);	//hoverするとドットが表示される
	$line->set_values($data);	//データを与えてやる
	$line->set_width(3);
	$line->set_colour('#68bd8d');
	
	//set y axis
	$y = new y_axis();
	$y->set_range(0, 15, 3);
	
	//set chart chartを出力するとブラウザ上に表示できるようになる
	$chart = new open_flash_chart();
	$chart->set_title($title);
	$chart->add_element($line);
	$chart->set_y_axis($y);
	
	echo $chart->toString();
?>

chartに作った設定をくっつけてやると表示されます。結構C#ぽい実装なのでわかりやすい。

データベースからデータを取ってきて描画してみよう。

データベースはMySQLでもいいんだけど情報がないのでPostgresについて書いてみる。
表示用のPHPは大して変わらんのでそのままにしておくとして、チャートデータの方。

<?php
	include 'php5-ofc-library/open-flash-chart.php';
	//データベースを開く　postgresというユーザーでpostgresという名前のデータベースにログイン
	//失敗した場合はその場で死ぬ
	$db = pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=postgres") or die("failed to connect");
	//データを取ってくる 
	$tableName = 'testdb';
	$result = pg_query($db, "SELECT * from {$tableName};") or die ("faield to query\n");
	//fetchで実際にデータの値が取れる
	$data_all = pg_fetch_all($result);
	pg_close($db);
	
	//連想配列のままでは描画できないので項目ごとにarrayに分ける
	$data1 = array();
	$data2 = array();
	
	foreach($data_all as $key=>$tmp){
		$data1[] = intval($tmp['data1']);	//文字列で入ってくるらしいので数字に直してやる
		$data2[] = intval($tmp['data2']);
	}
	
	if(count($data1) == 0) die('An error occurred\n');
	
	$title = new title("TEST");
	
	$dot = new dot();
	$line = new line();
	$line->set_default_dot_style($dot);
	$line->set_values($data1);
	
	$bar = new bar_filled('#999', '#aaa');
	$bar->set_values($data2);
	
	$chart = new open_flash_chart();
	$chart->set_title($title)+
	$chart->add_element($bar);
	$chart->add_element($line);
	
	echo $chart->toPrettyString();
?>

文字列ってところがわからなくてかなり死んだ。
ただま、出来ちゃうとすごく簡単かな。日本語ドキュメントは少ないけど公式にもソースコードが乗っているのでそんなに困らないはず。