デモ

てすと
food auto household furniture kitchen bath
Mary190160401203070
Tom34030453549
Brad1018010852579
Kate4080902515119

ソース

javascript

$(function(){
var configLine = {type: 'line', width: '420px'};
var configPie  = {type: 'pie', height: '300px', width: '420px'};
var configBar  = {type: 'bar', width: '420px'};
var configArea = {type: 'area', width: '420px'};
var visualizeEvent = function(){
	$("#graph-line").html($('table#visualize').visualize(configLine));
	$("#graph-pie").html($('table#visualize').visualize(configPie));
	$("#graph-bar").html($('table#visualize').visualize(configBar));
	$("#graph-area").html($('table#visualize').visualize(configArea));
};
visualizeEvent();
$("tr.line").click(function(){
	configLine.emphasis =  $("tr").index(this);
	configPie.emphasis =  $("tr").index(this);
	configBar.emphasis =  $("tr").index(this);
	configArea.emphasis =  $("tr").index(this);
    visualizeEvent();
});
});

HTML

<table id="visualize" class="table table-bordered">
<caption>てすと</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 class="line"><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 class="line"><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 class="line"><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 class="line"><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>

<div id="graph-line"></div>
<div id="graph-pie"></div>
<div id="graph-bar"></div>
<div id="graph-area"></div>

  • グラフ描画
  • jQuery
  • jQuery Visualize