Thursday, July 9th, 2009
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:
- <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:
3.9 rating from 66 votes
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.
@nataxia: I just checked over Kate’s values twice in both graphs, and it appears correct both times.
Whoa, nice.
@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.
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!
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).
@saliva – http://ajaxian.com/archives/doctype-html
cut down on keystrokes and save trees…or something.
oh my…I’m so sorry. +1 vote for post editing.
¿Saliva?? I won’t ask ;D
Anyway, sorry for the off-topic, and thanks for the link! I guess I missed the memo ^^
It seems that the data is drawn correctly, but the scale of the y-axis is messed up.
Yeah looks like it’s using round instead of ceiling calculating the loop interval on the y labels.
Oh and prolly needs to decrement the number of labels by one before it divides too…