Open Flash Chartで磯野家の勢力図

次女の意地――――

「2007年12月現在。仮にサザエが引退した場合、最大の勢力を持つのはワカメである」
そんな調査結果を出して、グラフにしてみた。
磯野家の勢力図 with out サザエ

作り方

０．データの収集

Googleで「サザエさん （キャラクタ名）」で検索してHITした件数をメモ

１．Open Flash Chartをダウンロード

Open Flash Chart
ダウンロード

２．解凍してモジュールのコピー

※今回はPHPを使うのでphp-ofc-libraryをofc-libraryにリネームした。

• /graph/open-flash-chart.swf
• /graph/ofc-library/open_flash_chart_object.php
• /graph/ofc-library/open-flash-chart.php

３．データを生成するモジュールの作成

※PHP内部エンコード、サーバのエンコード、ソースのエンコード、全てUTF-8で統一。

• /graph/chart-data.php

<?php

include_once( 'ofc-library/open-flash-chart.php' );

// 「サザエさん (キャラクタ名)」でググった件数。サザエは多すぎるから省略

$data_name = array('ワカメ','カツオ','マスオ','タマ','波平','フネ','タラオ');

$data = array(146000,137000,123000,103000,73500,35500,18100);

// 件数合計

$data_sum = array_sum($data);

// 合計に対する各キャラの割合

foreach($data as $v){

	$data_disp[] = round($v / $data_sum * 100,1);

}

// グラフ作る

$g = new graph();

$g->pie(60,'#505050','#000000');

$g->pie_values( $data_disp, $data_name );

$g->pie_slice_colours( array('#d01f3c','#356aa0','#C79810') );

$g->set_tool_tip( '#val#%' ); //ツールチップの表示形式「○○％」

$g->title( '磯野家の勢力図', '{font-size:14px; color: #000000}' );

echo $g->render();

?>

４．グラフを呼び出すモジュール作成

• /graph/isono.php

<?php

	include_once 'ofc-library/open_flash_chart_object.php';

	open_flash_chart_object( 300, 300, 'http://'. $_SERVER['SERVER_NAME'] .'/graph/chart-data.php', false );

?>

５．アクセスできたら完成

http://www.mixnews.jp/graph/isono.php

まとめ

• 動きのあるFlashのグラフが簡単に作れるOpen Flash Chartは凄い。
• 円、棒、折れ線、他にも色々な形式のグラフが作成できて凄い。
• 各種言語向けヘルパーライブラリが揃ってて凄い。（Java,Perl,Python,Ruby and Rails,PHP,.NET）
• 無料で凄い*1

定番ライブラリに決定！！

*1:「DOWNLOADS」の「PRICE」の項を参照。無料だが、開発元にメッセージを送る、ブログを書く、パッチを送るなどしてフィードバックして欲しいとの事