ホームページを作る人のネタ帳

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

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

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

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

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本まとめ はてなブックマーク数

@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply

Trackbacks 1

Click to send a trackback(FC2 User)
この記事へのトラックバック
  • Tag: Ajax Ajax prototype.js 関連ページ コメント Ajax Ajaxデザインパターン|Ouobpo 「Ajaxアプリでもナビゲーションバーで戻りたい!」を叶える、dsHistory登場 | エンタープライズ | マイコミジャーナル Ajax・CSS・PHPで簡単に棒グラフが作成できる『Ajax MGrap..

    2007.05.19 (Sat) 11:29 | Happy Engineer Life (PukiWiki/TrackBack 0.3)