« 3方向を囲まれた箱をCSS3を利用して記述する方法 | トップページ | 画像を使用しないで、ボックスの影をcssで表現する方法 »

2010年12月20日 (月)

テーブルの数値をグラフ化してくれるjQueryプラグイン

Gvchart

セッション数
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2010 248 285 227 259 286 298 286 306 315 296 327 326
2009 116 111 191 165 135 167 189 166 138 112 145 125
2008 0 0 0 0 0 52 26 53 87 112 105 178

テーブルに入力した数値を5種類のグラフ化してくれるプラグイン「gvChart」を紹介します。

デモページ

使い方は…

必要なリソース
jsapi
jquery-1.4.4.js
jquery.gvChart-1.0.1.min.js

プラグインを動かすのに必要な「jquery.gvChart-1.0.1.min.js」をダウンロードします。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.gvChart-1.0.1.min.js"></script>

オプションの設定

<script type="text/javascript">
gvChartInit();
$(document).ready(function(){
$('#id').gvChart({
chartType: 'AreaChart',
gvSettings: {
vAxis: {title: 'セッション数'},
hAxis: {title: '月'},
width: 720,
height: 300,
}
});
</script>

#id 対応するテーブルのidを記述します。
chartType グラフのパターンを設定します。
パターンは以下の5種類です。
AreaChart:面形式グラフ
LineChart:折れ線グラフ
BarChart:横線形式グラフ
ColumnChart:縦線形式グラフ
PieChart:円グラフ
vAxis: {title: 'タイトル名'},:縦軸のタイトル
hAxis: {title: 'タイトル名'},:横軸のタイトル
width: 720,:グラフの幅を指定します
height: 300,:グラフの高さを指定します。

html
最後にテーブルの記述します。
テーブルのid名にオプションで指定したidを記述します。
「caption」を仕様することでグラフのタイトルを記述する事ができます。

|

« 3方向を囲まれた箱をCSS3を利用して記述する方法 | トップページ | 画像を使用しないで、ボックスの影をcssで表現する方法 »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/38113238

この記事へのトラックバック一覧です: テーブルの数値をグラフ化してくれるjQueryプラグイン:

« 3方向を囲まれた箱をCSS3を利用して記述する方法 | トップページ | 画像を使用しないで、ボックスの影をcssで表現する方法 »