Fun with Charts via jQuery & the Visualize Canvas Plugin
HTML
<h2>Fun with Charts via jQuery & the <a href="http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/">Visualize Plugin</a> for Canvas Charting</h2>
<table >
<caption>2012 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>130</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>100</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>
<!-- here are all the required libraries ... chuh -->
<script type='text/javascript' src="http://mindmeldtools.com/cssjs/visualize.jQuery.js"></script>
<script type='text/javascript' src="http://mindmeldtools.com/cssjs/excanvas.js"></script>
<link rel="stylesheet" type="text/css" href="http://mindmeldtools.com/cssjs/visualize.css">
<link rel="stylesheet" type="text/css" href="http://mindmeldtools.com/cssjs/visualize-dark.css">
<link rel="stylesheet" type="text/css"...
CSS
h2 { font-size:2.0em; margin: 10px; }
JavaScript
// really not much to do here w/this library -- but TOOO much overhead for the price
// -- see my other examples for a bit more hands-on.
$('table').visualize({type: 'pie'});
$('table').visualize({type: 'line'});
$('table').visualize({type: 'bar', parseDirection: 'y'});
$('table').visualize({type: 'area'});