@DIV
<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>
@END

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

@HTML
</pre>
<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_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>
<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_table6 {
	border-collapse: collapse;
}
.target_table6 caption {
	padding:10px;
	border: solid 1px #c0c0c0;
	margin-bottom: 10px;
	border-radius: 10px;
	background: linear-gradient(to bottom, #777, #000);
	color: #fff;
}
.target_table6 td, .target_table6 th {
	text-align: center;
	border: 1px solid #ddd;
	padding:2px 5px;
}
</style>
<table class="target_table6" id="target_table7">
<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>

<table class="target_table6" id="target_table8">
<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>
<pre>
@HEND