jQuery Visualize: Updated accessible charts and graphs

09.07.2009, 17:06

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:
  1.  
  3.         <caption>2009 Individual Sales by Category</caption>
  4.         <thead>
  5.                 <tr>
  6.                         <td></td>
  7.                         <th>food</th>
  8.                         <th>auto</th>
  9.                         <th>household</th>
  10.                         <th>furniture</th>
  11.                         <th>kitchen</th>
  12.                         <th>bath</th>
  13.                 </tr>
  14.         </thead>
  15.         <tbody>
  16.                 <tr>
  17.                         <th>Mary</th>
  18.                         <td>150</td>
  19.                         <td>160</td>
  20.                         <td>40</td>
  21.                         <td>120</td>
  22.                         <td>30</td>
  23.                         <td>70</td>
  24.                 </tr>
  25.                 <tr>
  26.                         <th>Tom</th>
  27.                         <td>3</td>
  28.                         <td>40</td>
  29.                         <td>30</td>
  30.                         <td>45</td>
  31.                         <td>35</td>
  32.                         <td>49</td>
  33.                 </tr>
  34.                 ...repetitive rows removed for brevity. 
  35.         </tbody>
  36. </table>
  37.  

Then you visualize it. You end up with pretty graphs like these: