jQueryプラグインchartify.jsを使ってtableデータからグラフを作成。

普通に作成したtable要素にchartify.jsのclassを指定するだけで、グラフィカルなグラフを作成してくれます。それぞれ上が通常のtable（通常のcssで整形）、下が同じtableにグラフ用のclassを指定したもの。円グラフの色などは外部のスクリプト内で変更可能です。
※Gender Chartは透過pngを使っているため、透過pngに対応していないIE6などは利用できません。
なお、tableのサンプルは、総務省統計局のデータを使用しています。

Pie Chart（円グラフ）

<table class="pie-chart"> //tableタグに指定
日本の年齢別人口分布（2011年10月1日現在 [単位：千人] ）
0〜9
10〜19
20〜29
30〜39
40〜49
50〜59
60〜69
70〜79
80〜84
85以上
男女計
10793
11987
13589
17805
17281
15959
18493
13327
4494
4071
日本の年齢別人口分布（2011年10月1日現在 [単位：千人] ）
0〜9 10〜19 20〜29 30〜39 40〜49 50〜59 60〜69 70〜79 80〜84 85以上
男女計 10793 11987 13589 17805 17281 15959 18493 13327 4494 4071


Bar Chart（棒グラフ）

<table class="bar-chart-3"> //tableタグに指定
日本の年齢別人口分布2（2011年10月1日現在 [単位：千人] ）
0〜9
10〜19
20〜29
30〜39
40〜49
50〜59
60〜69
70〜79
80〜84
85以上
男女計
10793
11987
13589
17805
17281
15959
18493
13327
4494
4071
女性のみ
5266
5842
6663
8773
8572
8013
9517
7312
2731
2925
日本の年齢別人口分布2（2011年10月1日現在 [単位：千人] ）
0〜9 10〜19 20〜29 30〜39 40〜49 50〜59 60〜69 70〜79 80〜84 85以上
男女計 10793 11987 13589 17805 17281 15959 18493 13327 4494 4071
女性のみ 5266 5842 6663 8773 8572 8013 9517 7312 2731 2925


Gender Chart（性別分布グラフ）

<table class="gender-chart"> //tableタグに指定
日本の男女数（数値はグラフを明確にするため数値を誇張しています）。
実際の数は、男性62184000人、女性65615000人。
男女数（単位：百万人）
男性
女性
統計
61
68
男性 女性
統計 61 68