Thursday, July 9th, 2009

jQuery Visualize: Updated accessible charts and graphs

Category: Canvas, jQuery

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:

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

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

Posted by Dion Almaer at 9:06 am

3.9 rating from 66 votes


Comments feed TrackBack URI

It seems to be plotting incorrectly — the table values are not correctly reflected in the visualizations. Consider the values for ‘Kate’ in the bar graph, for example.

Comment by nataxia — July 9, 2009

@nataxia: I just checked over Kate’s values twice in both graphs, and it appears correct both times.

Comment by tj111 — July 9, 2009

Whoa, nice.

Comment by ilazarte — July 9, 2009

@tj111 & @nataxia: Yeah when I view the charts the values are not displaying correctly (Firefox 3.0.4), Mary/Food is only at the 135 line in the graph but is 150 in the table, and all are low like that. This is beautiful though and I’ll take advantage of it as soon as I can be sure it will display correctly.

Comment by BigAB — July 9, 2009

I get the same incorrect visual results in my browser (Firefox/3.0.11) but this is the easiest I’ve ever seen charts created. Besides, that small glitch – Great work!

Comment by breakthrough — July 9, 2009

Is the way they start their HTML correct? (Just no HTML/XHTML version, and no DTD). Won’t that trigger quirks mode in browsers?

And yes, the data doesn’t draw correctly (Firefox/3.5).

Comment by Salva — July 10, 2009

@saliva –

cut down on keystrokes and save trees…or something.

Comment by sixtyseconds — July 10, 2009

oh my…I’m so sorry. +1 vote for post editing.

Comment by sixtyseconds — July 10, 2009

¿Saliva?? I won’t ask ;D

Anyway, sorry for the off-topic, and thanks for the link! I guess I missed the memo ^^

Comment by Salva — July 10, 2009

It seems that the data is drawn correctly, but the scale of the y-axis is messed up.

Comment by reno — July 10, 2009

Yeah looks like it’s using round instead of ceiling calculating the loop interval on the y labels.

Comment by Deadmeat — July 10, 2009

Oh and prolly needs to decrement the number of labels by one before it divides too…

Comment by Deadmeat — July 10, 2009

Leave a comment

You must be logged in to post a comment.