WEBのテーブルをgvChartでグラフ化。

tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」

http://www.skuare.net/2010/06/tablejquerygvchart.html

●１）gvChartファイルをダウンロード＆設置。

●２）ヘッダー記述。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.gvChart.js"></script>
<script type="text/javascript">
gvChartInit();
$(document).ready(function(){
$('#id名').gvChart({
chartType: 'ColumnChart',
//その他に AreaChart、LineChart、BarChart、ColumnChart、PieChartがあります。
gvSettings: {
vAxis: {title: 'No of players'}, //縦軸タイトル
hAxis: {title: 'Month'}, //横軸タイトル
width: 720, //幅
height: 300, //高さ
}
});
</script>

●３）テーブルを記述。

テーブルの数値でない部分はthでしっかり囲むこと。

<table id="id名">
<caption>Game players count</caption>
<thead>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
</tr>
</thead>
<tbody>
<tr>
<th>2010</th>
<td>125</td>
<td>185</td>
<td>327</td>
<td>359</td>
</tr>
<tr>
<th>2009</th>
<td>1167</td>
<td>1110</td>
<td>691</td>
<td>165</td>
</tr>
</tbody>
</table>

ついthをtdで記述してしまったりするが、ちゃんとthで囲まないと表示されないので注意！

MySQLでCASEを使って集計

年度別にセミナーA、セミナーB、合計の人数を出したい場合、

CASEを使う。

年度　　A　　B　　　計
---------------------
2011　　350　200　　550
2010　　250　150　　500
2009　　125　120　　245
2008　　200　100　　300

SELECT year_c,
SUM(CASE
WHEN seminar_c = 'A' THEN 1
ELSE 0
END
) as `A`,
SUM(CASE
WHEN seminar_c = 'B' THEN 1
ELSE 0
END
) as `B`,
SUM(CASE
WHEN seminar_c != '取消し' and seminar_c not in('A','B') THEN 1
ELSE 0
END
) as `計`
FROM `table`
GROUP BY year_c
ORDER BY year_c DESC

JQueryライブラリ

ダウンロードせず、Googleにリンクしたほうが簡単。

cssは、テーマがいくつかあり、見た目が変更出来ます。

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/blitzer/jquery-ui.css
" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js
"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js
"></script>

jQueryやUI、PrototypeなどのライブラリーをGoogleライブラリAPIから読み込む方法
http://worldwidedeb.net/2011/05/09/jquery-ui-prototype-google-api-url