jQuery Visualizeサンプル1(実験)
インストール必要 (表現されず)
/////
jQuery-Visualize


こちらのページで詳しく解説してくれている。
http://monopocket.jp/blog/jquery_visualize/1371/

分かりやすい。HTMLでデータのテーブルを作ればそれを描画してくれる。

オプションというか、調整可能な部分が少ないのが難点。

グラフのサイズ
テーマ2種類(dark,light)
線の色

/////
ここ

jQuery Visualizeサンプル集

/////
jQuery Visualize サンプル1(棒グラフ)
2009 Employee Sales by Department
food auto household furniture kitchen bath
Mary 190 160 40 120 30 70
Tom 3 40 30 45 35 49
Brad 10 180 10 85 25 79
Kate 40 80 90 25 15 119

/////
上のデータを「4つのグラフ」で表現すると、
こんな感じらしい。

1つのページに全ての種類(棒グラフ、折れ線グラフ(2種類)、円グラフ)のグラフを表示

下のプログラムは「棒グラフ」タイプ
/////
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>jQuery Visualize サンプル1(棒グラフ)</title>
    <meta name="description" content="jQuery Visualize の1つ目のサンプルです。今回はデフォルトの設定(棒グラフ)でダークなイメージのグラフを生成しました。" />
<link href="css/basic.css" type="text/css" rel="stylesheet" />
<link href="css/visualize.css" type="text/css" rel="stylesheet" />
<link href="css/visualize-dark.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/visualize.jQuery.js"></script>
<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize();
        });   
    </script>
</head>
<body>

<table >
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th scope="col">food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
<th scope="col">bath</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
<tr>
<th scope="row">Brad</th>
<td>10</td>
<td>180</td>
<td>10</td>
<td>85</td>
<td>25</td>
<td>79</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>40</td>
<td>80</td>
<td>90</td>
<td>25</td>
<td>15</td>
<td>119</td>
</tr>
</tbody>
</table>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-38409323-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>
/////