拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<script type="text/javascript">
$(function(){
	$("#target_table").visualize({
		type: "line"
	});
});
</script>


ここでは、type しか指定していないので、他のオプションは全てデフォルトで設定されています。

▼ オリジナルオプション
グラフエリアのサイズは、width と height で指定できますが、何も指定しなければ table 要素の大きさが使われます。ここでは、table 要素に高さをわざと指定して、グラフエリアのサイズを同期させています


コード内部のデフォルト値
拡張子:txtvbswsfjsphpjavahtmlutf8sjis
		var o = $.extend({
			tableDisplay: true, // 追加オプション : false にすると、データの table を非表示にします
			top: 0, // 追加オプション
			bottom: 0, // 追加オプション
			type: 'bar', //also available: area, pie, line
			width: $(this).width(), //height of canvas - defaults to table height
			height: $(this).height(), //height of canvas - defaults to table height
			appendTitle: true, //table caption text is added to chart
			title: null, //grabs from table caption if null
			appendKey: true, //color key is added to chart
			rowFilter: '*',
			colFilter: '*',
			colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744'],
			textColors: [], //corresponds with colors array. null/undefined items will fall back to CSS
			parseDirection: 'x', //which direction to parse the table data
			pieMargin: 20, //pie charts only - spacing around pie
			pieLabelsAsPercent: true,
			pieLabelPos: 'inside',
			lineWeight: 4, //for line and area - stroke weight
			barGroupMargin: 10,
			barMargin: 1, //space around bars in bar chart (added to both sides of bar)
			yLabelInterval: 100 //distance between y labels
		},options);

拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<script type="text/javascript">
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></"+"script>");
}
</script>
<script type="text/javascript"> 
if ( window[window.location.hostname+'.visualize'] !== true ) { 
	window[window.location.hostname+'.visualize'] = true; 
	(function(){
		var str="";
		str+="<link href=\"http://winofsql.jp/jquery/plugins/visualize/visualize-dark.css\" type=\"text/css\" rel=\"stylesheet\"> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/excanvas.js\"></"+"script> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/visualize.jQuery.js\"></"+"script> \n";
		document.write(str);
	})();
} 
</script> 
<script type="text/javascript">
$(function(){
	$("#target_table").visualize({
		type: "line"
	});
});
</script>
<style>
.visualize * {
	font-size: 12px!important;
	font-family: Arial,"メイリオ","ＭＳ Ｐゴシック";
}
.visualize .visualize-title {
	font-size: 24px!important;
	font-family: Arial,"メイリオ","ＭＳ Ｐゴシック";
}
.visualize { 
	margin: 20px 0 0 15px;
}
#target_table {
	border-collapse: collapse;
	height: 300px;
}
#target_table caption {
	padding:10px;
	border: solid 1px #c0c0c0;
	margin-bottom: 10px;
	border-radius: 10px;
	background: linear-gradient(to bottom, #777, #000);
	color: #fff;
}
#target_table td, #target_table th {
	text-align: center;
	border: 1px solid #ddd;
	padding:2px 5px;
}
</style>
<table id="target_table">
<caption>電気使用量の推移</caption>
<thead>
<tr>
	<td></td>
	<th>1月</th>
	<th>2月</th>
	<th>3月</th>
	<th>4月</th>
	<th>5月</th>
	<th>6月</th>
	<th>7月</th>
	<th>8月</th>
	<th>9月</th>
	<th>10月</th>
	<th>11月</th>
	<th>12月</th>
</tr>
</thead>
<tbody>
<tr>
	<th>2013</th>
	<td>1144</td>
	<td>938</td>
	<td>972</td>
	<td>714</td>
	<td>771</td>
	<td>515</td>
	<td>641</td>
	<td>1051</td>
	<td>1018</td>
	<td>658</td>
	<td>681</td>
	<td>712</td>
</tr>
<tr>
	<th>2014</th>
	<td>1219</td>
	<td>927</td>
	<td>947</td>
	<td>709</td>
	<td>674</td>
	<td>495</td>
	<td>537</td>
	<td>900</td>
	<td>758</td>
	<td>536</td>
	<td>550</td>
	<td>857</td>
</tr>
</tbody>
</table>

拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<script type="text/javascript">
$(function(){
	$("#target_table2").visualize({
		type: "line",
		width: "400px",
		height: "300px"
	});
});
</script>


幅と高さを指定しています。ただ、オリジナルの仕様でグラフの最低値がマイナスが無い場合はゼロとなる為、無駄な空間がグラフの下を占有しています。また、最大値をグラフの値の上限にしているので、グラフが天井にべったりはりついた様子になってしまっています。そこで、このところを改造して top と bottom を指定できるようにしました。

拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<script type="text/javascript">
$(function(){
	$("#target_table3").visualize({
		type: "line",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		yLabelInterval: 50
	});
});
</script>


このような指定は自動ではできませんが、固定されたデータをグラフとして使用したい場合は重要なレイアウトだと思います。また、オリジナルでは、Y 座標の目盛りの単位がこのように 100 づつというようになりません。そこでこれも変更して（yLabelInterval）デフォルトで 100 づつにしています。( 変更可能です )

拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<script type="text/javascript">
$(function(){
	$("#target_table4").visualize({
		type: "line",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		yLabelInterval: 100,
		title: "電気使用量の推移(2013〜2014)",
		colFilter: ".a"
	});
});
</script>


title はデフォルトで表示するようになっています（appendTitle: true）。ですが、文字列はまず caption 要素の中を使います。他の内容に変更したい場合は、title オプションで指定します。

jQuery のセレクタを使ったフィルタが 列と行に用意されています。デフォルトでは、rowFilter: '*' と colFilter: '*' が設定されているので全てが対象となります。

ここでは、colFilter しか指定していませんが、TD 毎にクラスを指定して、2014年にはクラスを指定していないので、2013年の1〜6月のみが表示されます。


拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<table id="target_table4">
<caption>電気使用量の推移</caption>
<thead>
<tr>
	<td></td>
	<th class="a">1月</th>
	<th class="a">2月</th>
	<th class="a">3月</th>
	<th class="a">4月</th>
	<th class="a">5月</th>
	<th class="a">6月</th>
	<th class="b">7月</th>
	<th class="b">8月</th>
	<th class="b">9月</th>
	<th class="b">10月</th>
	<th class="b">11月</th>
	<th class="b">12月</th>
</tr>
</thead>
<tbody>
<tr>
	<th>2013</th>
	<td class="a">1144</td>
	<td class="a">938</td>
	<td class="a">972</td>
	<td class="a">714</td>
	<td class="a">771</td>
	<td class="a">515</td>
	<td class="b">641</td>
	<td class="b">1051</td>
	<td class="b">1018</td>
	<td class="b">658</td>
	<td class="b">681</td>
	<td class="b">712</td>
</tr>
<tr>
	<th>2014</th>
	<td>1219</td>
	<td>927</td>
	<td>947</td>
	<td>709</td>
	<td>674</td>
	<td>495</td>
	<td>537</td>
	<td>900</td>
	<td>758</td>
	<td>536</td>
	<td>550</td>
	<td>857</td>
</tr>
</tbody>
</table>

拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<script type="text/javascript">
$(function(){
	$("#target_table5").visualize({
		type: "line",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		parseDirection: "",
		colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744',"#ffffff","#DB30CD","#44DB30"],
	});
});
</script>


parseDirection は、デフォルトで "x" が設定されており、それ以外の文字列の場合はテーブルデータの利用の方向が x軸とy軸で入れ替わります。

グラフの色は、９種類しか用意されていないので、この場合は３色追加しています。オプションで設定した色がデフォルトの色を上書きするので、２色しか指定しなければ 3色目は無い事になるので注意して下さい。

拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<script type="text/javascript">
$(function(){
	$("#target_table6").visualize({
		type: "line",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		lineWeight: 2,
		tableDisplay: false
	});
});
</script>


ラインの太さは、デフォルトでは 4 です。ここでは 2 に変更して、tableDisplay を false にしてテーブルを非表示にしています

拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<script type="text/javascript">
$(function(){
	$("#target_table7").visualize({
		type: "bar",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		barMargin: 1,
		barGroupMargin: 10,
		tableDisplay: false
	});
	$("#target_table8").visualize({
		type: "bar",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		barMargin: 2,
		barGroupMargin: 3,
		tableDisplay: false
	});
});
</script>


barMargin は、グループ内でのグラフとグラフの間です。デフォルトは 1 ですが、グラフエリアはサイズが決まっているので、このような値をむやみに変更すると棒グラフの幅が細くなるだけなので注意して下さい。barGroupMargin のデフォルトは 10 が設定されているので、棒グラフの幅を広くしたい場合はこの値を少なく設定します。

拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<script type="text/javascript">
$(function(){
	$("#target_table9").visualize({
		type: "pie",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		parseDirection: "",
		pieLabelPos: "outside",
		pieMargin: 40,
		colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#EBA36C','#26a4ed','#f45a90','#e9e744',"#ffffff","#DB30CD","#44DB30"],
		textColors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#EBA36C','#26a4ed','#f45a90','#e9e744',"#ffffff","#DB30CD","#44DB30"]
	});
});
</script>


ラベルがデフォルトでは円グラフ内に表示されるので（pieLabelPos: "intside"）、データが多い場合は pieLabelPos: "outside" を指定します。

さらに、ラベルの色を指定しないと良く見えない場合は、textColors で個別に指定します。そして、pieMargin を指定してグラフエリアの外側からの距離指定する事によって外側のラベルをうまく表示できるようにします。

データは、この場合 parseDirection を "x" 以外に設定しますが、データは２行あるので内部で合計されてその値が使用されて% 表示されます。

値を直接表示したい場合は、pieLabelsAsPercent を false に設定します