Ajax・CSS・PHPで簡単に棒グラフが作成できる『Ajax MGraph』

CSSとAjax。そしてPHPによって簡単に上のような棒グラフが作成できるスクリプトのご紹介です。
AjaxMGraph


まずは上記サイトへ行きセットファイルをダウンロードしよう。

ここから少し注意点があり、上記セットファイルにないJsファイルを手に入れよう。


画面中央からでもダウンロード可能ですし、prototype.js←ここからでもダウンロード可能です。
ダウンロードしたprototype.jpはセットファイルのフォルダに入れておこう。

ダウンロードしたらまず 『number_generator.php』を開き

$data['num'][0]=43;
$data['num'][1]=33;
$data['num'][2]=23;
$data['num'][3]=33;
$data['num'][4]=43;
$data['num'][5]=53;
$data['num'][6]=63;
$data['num'][7]=73;
$data['num'][8]=83;
$data['num'][9]=93;
$data['num'][10]=103;
$data['num'][11]=113;

$bar_x_title[1]='Jan';
$bar_x_title[2]='Feb';
$bar_x_title[3]='Mar';
$bar_x_title[4]='Apr';
$bar_x_title[5]='May';
$bar_x_title[6]='Jun';
$bar_x_title[7]='Jul';
$bar_x_title[8]='Aug';
$bar_x_title[9]='Sep';
$bar_x_title[10]='Oct';
$bar_x_title[11]='Nov';
$bar_x_title[12]='Dec';

↑この部分を弄り回そう。
全体的にファイルのコンテンツタイプが、シフトJISになっているが、もしかしたらUTF-8じゃないとダメかもしれない。
【コンテンツタイプの指定】

その後、表示したいHTMLをつくり、メタタグ部分に
<link rel="stylesheet" type="text/css" media="screen" href="agGraph.css" />
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='graphM.prototype.js'></script>
を追加しよう。

次にスクリプトを読み込む
<script type='text/javascript'>
var agGraphDivID='resultDiv';
var agGraphShowNote='yes'; // yes,or no
var agGraphNoteTitle='Note';
var agGraphNoteText='Little note about this graph goes here...';
</script>

最後にボタンを設置で完成です。
<input type="button" value="Generate Graph" id="startButton" onclick="draw();" />

もしもこのスクリプトを使うとすれば

やっぱり動的なコンテンツの排出のために、『number_generator.php』の固定数値部分を変数に直し、そこに動的値を入れてあげると良いかもしれませんね。
はてなの特定のサイトのタグクラウド棒グラフ表とか無駄に面白いかもしれません。

【関連エントリー】
- PHPプログラムを始めてみたい、難しいと思っている人の為に
- PHPで動いている高度なオープンソースWebアプリケーション厳選15本まとめ