「SVGGraph」はPHPから使用可能なSVGグラフのライブラリです。

グラフの描画にはデータベースからデータを取得するなど、サーバーサイドで操作できると非常に便利なのですが、
このライブラリを使う事でPHPから簡単にグラフを出力可能になっています。

3Dのグラフが簡単に出力可能に

棒グラフ、折れ線、円グラフを出力可能なのはもちろん、全て3Dで表示する事もできるようになっています。

以下のようなコードで使用できるようです。

$graph = new SVGGraph(640, 480);
 $graph->colours = array('red' ,'green' ,'blue' );
 $graph->Values(100, 200, 150);
 $graph->Links('/Tom/' , '/Dick/' , '/Harry/' );
 $graph->Render('BarGraph' );

動作にはPHP5以上が必要になっていました。

IEはデフォルトではSVGをサポートしていませんが、Adobe SVG Viewerなどのプラグインをインストールする事で見る事ができるようになります。

いくつかの値を設定するだけで簡単に静的なグラフやインタラクティブなグラフを作成する事が可能です。

円グラフデモ

カラーピッカーデモ

使い方も以下のように値と色の設定をするだけのようです。

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

対応ブラウザもIE6から対応しているようですので、業務でも使えそうですね。

以下の内容のデータがダウンロード可能になっています。

• 円グラフ
• 棒グラフ
• 折れ線グラフ

こういった素材はいざ使おうと思った時になかなか見つからないので、覚えておいてもよさそうですね。

ランキング表示なんかに使えそうですね。

詳しくは以下

設置してみる

まずは公式サイトへアクセスします。

Google Codeへ。

圧縮ファイルか通常ファイルかを選択します。クリックでダウンロード開始。
今回はunpacked version を使用してみました。

ダウンロードした後はhtmlファイルを作成しましょう。
グラフには配列をわたすだけでよいようです。配列に渡すのは値、ラベル、カラーの順です。

<script src="jquery.js"></script>
<script src="jqBarGraph.js"></script>
<script>
arrayOfData = new Array(
    [10.3,'Jan','#f3f3f3'],
    [15.2,'Feb','#f4f4f4'],
    [13.1,'Mar','#cccccc'],
    [16.3,'Apr','#333333'],
    [14.5,'May','#666666']
); 

$(document).ready(function() {
	$('#divForGraph').jqBarGraph({ data: arrayOfData });
});

</script>
<div id="divForGraph"></div>

これだけで動作させる事ができました。

以下のブラウザで動作するようです。

• Safari 2+
• Internet Explorer 6+
• Firefox 2+
• Google Chrome 3+
• Opera 9+

かなり簡単に値を設定できるため、グラフ設置の際は検討してみても良いかもしれません。

パラメータを指定する事で簡単に2Dや3Dのグラフが作成する事ができます。
ブログ上にさくっとグラフを載せたい場合に良いかもしれません。

以下のグラフが作成可能なようです。

• 円グラフ
• 棒グラフ
• 折れ線グラフ
• 領域図

以下のようなコードでグラフがかけるようです。

テーマを変更する事で簡単に外観を変更できるようです。
テーマの変更方法は以下のコードを挿入するだけのようです。

<script>
g.theme_keynote();
g.theme_37signals();
g.theme_rails_keynote();
g.theme_odeo();
g.theme_pastel();
g.theme_greyscale();
</script>

色やサイズ、線の色、tooltipの設定ができるようです。
サイトにデモがありますのでぜひ見てみてください。

• moochart – charts for mootools

各種ブラウザとAIRで動作保証されています。
以下のブラウザ環境で動くようですね。

• Adobe AIR 1.0+
• Safari 2+
• Firefox 2+
• Opera 9+
• Internet Explorer

ライセンスはMITライセンスとなっていますので、サイトにバブルチャートを検討されている方はいかがでしょうか。