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

JQueryでEメールアドレスをカウント。その２

フィールドに入力したEメールアドレスの数をJQueryを使ってカウント。

アドレスの件数をインプットフィールドに表記する。

$("#num").val(count);

と、val()　を使う。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE></TITLE>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
"></script>
<script type="text/javascript"><!--
$(function(){
$("#message").keyup(function(){
var txt = $(this).val();
$("#ct").val(
txt.replace(/[^@]/g,'')
);
var count = $("#ct").val().length;
$("#num").val(count);
});
});

// --></script>

</HEAD>
<BODY>

<br><br>
Eメール数をチェック
<br><br>

アドレス数：　
<input type="text" size="8" maxlength="" name="" value="" id="num">件
<br><br>
Eメール：　
<input type="text" size="80" maxlength="" name="" value="" id="message">
<br><br>

<input type="hidden" id="ct">
</div>
<br><br>

</BODY>
</HTML>

JQueryでEメールアドレスをカウント。

フィールドに入力したEメールアドレスの数をJQueryを使ってカウント。

実際はアドレスのチェックはせず、@の数をカウントしています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE></TITLE>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
"></script>
<script type="text/javascript"><!--
$(function(){
$("#message").keyup(function(){
var txt = $(this).val();
$("#ct").val(
txt.replace(/[^@]/g,'')
);
var count = $("#ct").val().length;
$("#num").text(count);
});
});

// --></script>

</HEAD>
<BODY>

<br><br>
Eメール数をチェック
<br><br>

アドレス数：　<div id="num">0</div>
<br><br>
Eメール
<input type="text" size="80" maxlength="" name="" value="" id="message">
<br><br>

<input type="hidden" id="ct">
</div>
<br><br>

</BODY>
</HTML>