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:
HTML:
-
-
<caption>2009 Individual Sales by Category</caption>
-
<td></td>
-
<th>food</th>
-
<th>auto</th>
-
<th>household</th>
-
<th>furniture</th>
-
<th>kitchen</th>
-
<th>bath</th>
-
</tr>
-
</thead>
-
<th>Mary</th>
-
<td>150</td>
-
<td>160</td>
-
<td>40</td>
-
<td>120</td>
-
<td>30</td>
-
<td>70</td>
-
</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:
4 rating from 56 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.
Looks really nice :)
Also if you want some examples of things to add, take a look here.
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…
New to this. How does it compare to style chart?
With the changing trend of the world, wedding apart from white,Princess Strapless Satin Evening Dress ivory, beige and other traditional colors,are also increasingly popular in recent years, ghetto prom dressespink wedding package,gothic prom dresses such as pink, pink orange, baby blue, purple night, light green and light silver-gray, very soft and pleasing to wedding hair accessoriesthe eye; if you have the courage to try, dark green, purplish red, deep purple, decorated in pink wedding dress, the formation of rich colors,the dress, the effect is very special;Sash Lace Satin Flower Girl Dress, laden with flour colored silk flowers, butterflies, in order to add color.wedding dressIn fact, the wedding is the color of lesser importance, the most important prerequisite is to match the bride’s complexion. Oriental deep and yellowish color, wearing white Mermaid Satin Organdie Wedding Dress,will appear dull, wearing ivory would be more harmonious and natural, baby blue, wedding accessoriespurple night can not be coordinated with the yellow, but pink orange, light green with yellowish color match. As for the skin and rosy, or bronze skin, wearing white will look great, wedding dress