Home
>
Programming > jQuery Visualize: Updated accessible charts and graphs
jQuery Visualize: Updated accessible charts and graphs
Scott Jehl has released jQuery Visualize, the plugin that groks HTML tables and generates lovely charts from it, all from a simple $('table').visualize(); (lot’s of options for you to twiddle too if you want).
First, you create a bog standard table like:
| PLAIN TEXT |
|
HTML:
-
<table>
-
<caption>2009 Individual Sales by Category</caption>
-
<thead>
-
<tr>
-
<td></td>
-
<th>food</th>
-
<th>auto</th>
-
<th>household</th>
-
<th>furniture</th>
-
<th>kitchen</th>
-
<th>bath</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<th>Mary</th>
-
<td>150</td>
-
<td>160</td>
-
<td>40</td>
-
<td>120</td>
-
<td>30</td>
-
<td>70</td>
-
</tr>
-
<tr>
-
<th>Tom</th>
-
<td>3</td>
-
<td>40</td>
-
<td>30</td>
-
<td>45</td>
-
<td>35</td>
-
<td>49</td>
-
</tr>
-
…repetitive rows removed for brevity.
-
</tbody>
-
</table>
|
Then you visualize it. You end up with pretty graphs like these:
