2007/04/19

Ajax MGraph - prototype.jsベースのJavaScriptグラフ表示ライブラリ


Ajax MGraph

Ajax MGraphは、prototype.jsベースのJavaScriptグラフ表示ライブラリです。

表示できるグラフは縦棒グラフだけですが、これがなかなかキレイ。

こんな感じです。

Ajax MGraph

実際に自分でも試してみましたが、ソースをちょっと加工しないとうまく動かせませんでした。

折角なので、使い方も書いておきます。

ソースはPHPのプログラムの結果をデータとして使いますが、ここではJSONを使うように修正します。

まずは、graphM.prototype.jsの45行目をJSONのファイルを読み込むように変更します。

new Ajax.Request('number_generator.json', {

 そして、graphM.prototype.jsの60~64行目の内容を日本語用に書き換えます。

$('ag-dump').innerHTML+=g.returnHTML;
$('ag-head').update('グラフのバーの上にマウスを乗せると値が表示されます。');
$('ag-max').update('最大値: '+g.max);
$('ag-min').update('最小値: '+g.min);
$('ag-avg').update('平均値: '+g.avg);

 読み込みデータは、number_generator.jsonというファイル名で、次のようにJSON形式で作成します。

{
"num":[591,372,900,144,376,18,671,163,323,480,136,322],
"xTitle":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"msg":"Success"
}

それからHTMLを次のように作成します。

<html>
<head>
<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'>
function init() {
agGraphDivID='resultDiv';
agGraphShowNote='yes'; // yes,or no
agGraphNoteTitle='2006年度売上実績';
agGraphNoteText='6月の売上が極端に落ち込んでいます。';
}
</script>
</head>
<body onload="init()">
<input type="button" value="Generate Graph" id="startButton" onclick="draw();" />
<div id="resultDiv"/>
</body>
</html>

 実行結果です。


Ajax MGraph実験


グラフにマウスを乗せると、グラフの色が変わり値が表示されます。


Ajax MGraph実験


ちょっと使うのに工夫がいりますが、画面もキレイだしなかなか使えそうなライブラリですね。


なお、ライセンスはMITライセンスとのことです。


 



スポンサーリンク


このエントリーをはてなブックマークに追加




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール



最近の記事