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


記事の内容

前へ | 次へ

Ajax・CSS・PHPで簡単に棒グラフが作成できる『Ajax MGraph』
2007/05/19 00:19

画像
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本まとめ 画像

カテゴリ:jQuery Ajax JavaScript

前へ | 次へ

コメントを見る(0)
コメントを書く
トラックバック(1)
BlogTOP
このユーザーのホーム

ログイン


Powered By FC2ブログ