デモ
てすと
|
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 |
|---|
ソース
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>
