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 ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。


    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから