jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

Very nice, would there be a posibillity to have the barcharts be clickable?

Is there a way to add a text based differentiators for the data as it appears the charts and graphs rely on color alone. For example is their a method to add the names of the people to the pieces of the pie in the pie chart?

Woooooow !
Great !
The ability to specify the which cols and/or rows to use for visualisation will make the script perfect !

thank you - just great code!

Amazing code, thanks a lot!

Hi,

great job but needs some input into the article :
- the data table is still needed in the page if you want to be truly accessible (and not using display none to hide it)
- with or without the table for user of screenreader, the script add some useless (even confusing sometimes) text to the page like series of figures or terms without relationship (even with the aria role presentation)

It seems to have trouble with negative numbers--the graph items just go offscreen and the baseline stays at zero. At least, that’s what happens when I edit the table in HTML.

Neat, but seems to plot the values incorrectly, at least in Firefox 3.5 (Windows).

e.g. Set everything to 5, then set the first two cells (going downwards) to 100 and 30 respectively. The bar for 30 ends below the 30 line on the left.

(It looks wrong in a lot of cases but I thought maybe my brain was just perceiving things incorrectly. The 100 & 30 example is one where it’s definitely not my brain and the chart which is wrong, unless I’ve misunderstood what the table/units/charts represent.)

...Actually, even from the default values it looks wrong.

e.g. Mary’s food value is 150 but the bar ends just below 135. Kate’s bath value is 119 but the bar for it ends just below 108.

Maybe it’s just the scale on the left which is wrong. The top value seems right but the way it’s divided up doesn’t match the bars, and it’s using unusual numbers for a scale as well (e.g. lines for “81” and “27” rather than rounded numbers like 80 and 25).

Here’s what I’m seeing in my browser in case it isn’t the same as what you see:

http://www.pretentiousname.com/temp/jqvis.png

Sorry if it’s all working fine and I’m just being stupid and missing something.

As I say the role presentation is not sufficient because :
- old screenreader doesn’t support ARIA role presentation,
- new one will still read the text node in element with the role presentation as say the aria spec : “The user agent MAY choose not to present all structural aspects of the element being repurposed. For example, for a table marked as presentation, the user agent would remove the table, td, th, tr, etc. elements from the accessibility API mapping, while preserving the individual text elements within them”.

possible solutions :
- render everything within the canvas element
- using some more accesshide text and adding some others aria role to recreate the relationship between value and heading

uhm… amazing script. I’m sure that we’ll use it soon at vizzuality! Thanks!

Excellent code.

Off the topic: Why can’t I select more than one paragraph in each comment? Weird…

Excellent work

To add a bit to the rounding error pointed out @Leo.
The vertical axis divisions are displayed differently by non-Webkit browsers

Safari4 & Chrome2 display: 0, 25, 50,… which increments in a rounded fashion whereas
Firefox3 displays: 0, 27, 54,… (above normal values)
IE8 displays: 0, 24, 48.. (below normal values)

Hope this helps..

Very cool, thanks for sharing your plugin.

This is very impressive, but if you haven’t already seen it, you might want to look at the ‘flot’ charting library? (http://code.google.com/p/flot/). It generates some very attractive charts. Rather than writing your own charting code, you could consider providing just the part needed to turn tables into usable data and then invoking flot to render the data.

I was working into something similar but did not think about a jQuery plugin, well done!

Finally, and hopefully, we could start to use:
<!--[if lt IE 9]> ...
for excanvas library, can we? :D

Very Nice!  I would love to see a Google Charts renderer as well, just so business people can right click, save chart and send it in email/attachment what have you.

Looking forwrd to watching this project.

Amazing stuff!

Flot offers various types of line and area graphs, plus bar graphs (technically, column graphs). Pie charts aren’t yet part of the main package, but it looks as if there are plugins in development that add that feature. I’d guess other types are on the roadmap for the 1.0 version.

I can see arguments both for working with current front-runners in the JS charting space (i.e. flot), and for implementing your own system so that you can offer all the functionality you need in a single package. Maybe a modular architecture would offer the best of both worlds?

Looks wonderful. I’ll probably start using this on some of my sites. Now the next step is to get some 3d charts going on ;P

Very nice. Is there a way to create horizontal bar graphs rather than vertical bar graphs?

With the line graphs, it would be nice if one of the table cells was missing a value, to not set it to zero, but basically connect the dots either side of it. If the first or last values were missing, the line graph could start with the second point / finish on the second last respectively. Only really applicable with the line graphs I think.

If it did this, I’d replace my existing server-side graphing library

nice plugin. One thing i miss are (optional) values at datapoints in line/bar/area graphs.

you did a great job

@Scott

Well just be able to link to an url would be great. Lets say I use the bar for a news by day view within one week then i would click on the bar of the day i wanted to see al the news off

Armand

Tab indexing on the grid would be awesome.

I’m not (yet) a user of JQuery but plugins like this make me think that I should be…

One thing I’d love to see is support for the Google visuliastion API query language, so that charts can be generated on the fly in the clint using data pulled in from Google spreadsheets.

My first proof of concept can be found here:
http://ouseful.wordpress.com/2009/05/22/first-steps-towards-a-generic-google-spreadsheets-query-tool/

This effect is so cool!!!
Wonderful job guys.

Great!! Thanks for sharing it!!

Up till now I only used flash charts to visualize data, but I’ll definitely need to have a closer look at the possibilities with JQuery.

The dome i downloaded from this page doesn’t work on my pc ...  but the online demo works .. did i miss some ‘important’ step when i tried to view it?

this looks fab - will test it and let you know how it goes on large datasets 60, 000 +

Amazing job! I confess: I didn´t read all comments, so my tip may be posted already. To show only the graph (pie, line etc), without the classic table above, just apply the display:none on the table through css. =D

What would be nice is the ability to specify a link for each of the points/bars/pie chunks - apart from that, this is just what I’ve been looking for…

another good thing would be that when you save the image the figures and keys are part of the image like google charts

Would be nice if it handled standard textual number treatments like %, $, − and the like.

I am using jQuery load to load a table of data, but the plugin doesn’t seem to find the loaded table (I suppose this has to do with the dom element being created after the page has been loaded, so the plugin doesn’t find it), any idea how I can solve this? Have been playing around with it for ages >.<

Sorry, dw, I got it working using a callback with the load function

Hi, As always a great work
I wanted to point you on jquery charts plugin i’ve just found earlier and that seems pretty advanced and actively developped: jqplot http://www.jqplot.com/ .
It has a lot of flot features plus pie charts too. At this time it doesn’t seems to read datas directly from table markup but i’m pretty sure it’s not too difficult to add this functionality.
I think it may at least be of interest for you regarding how it works with some of features discuss earlier in comments.
Thank’s again for your work and for sharing it with us.
cheers,
malko

How is the total percentage fix going?
Would be alot better to have a y axis showing the full 100%

Ignore the above. Have fixed this. y axis now has full height of 100%

Thank you for sharing!

great! i use it for statistiques of ads of my website

Wow, great work! This is one of the better jQuery plugins I have seen lately. Very useful. I will definitely use this one!

Is there a way to make the same bar graph you had done, but with name vertically, and value horizontally… like here : http://djhweb.co.uk/graph1.jpg

Hi, first of all I’d like to say that this is a great plugin. It looks great and is highly customizeable! I like the idea of having the seperate CSS to generate to look and fool of the charts! Well done. Also, it works perfectly and is easy to configure.

There is however one problem with MSIE that puzzles me and I was trying to fix over the weekend. For some reason MSIE will not draw one of my bars in the following example in some instances. It works perfectly in Safari, Chrome and Firefox - however MSIE will just skip one bar sometimes, on a seemingly random basis. (Sometimes the bar shows, sometimes it does not.) Any ideas where I should look?

//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$(function(){
$("#mailings").visualize({type: ‘bar’, width:620, height:300}); //.appendTo("#mailingsChart").trigger(’visualizeRefresh’);
});
})(jQuery);

<div class="spacer"></div>

<div id="mailingsChartContainer" style="padding-left:55px;">
<div id="mailingsChart"></div>
</div>

<div class="spacer"></div>

<div id="mailingsContainer">
<table id="mailings">
<caption style="color:#333">Recent Advanced SMS Mailings</caption>
<thead>
<tr>
<td></td>
<th>Apr 11th, 2009 - 19:30
Party Reminder</th>
<th>May 17th, 2009 - 14:00
Event Notification</th>
<th>Jun 12nd, 2009 - 19:30
Party Reminder</th>
<th>Jul 21st, 2009 - 19:30
Party Reminder</th>
<th>Aug 27th, 2009 - 19:30
Party Reminder</th>
</tr>
</thead>
<tbody>
<tr>
<th>Failed</th>
<td>53</td>
<td>3</td>
<td>36</td>
<td>17</td>
<td>9</td>
</tr>
<tr>
<th>Pending</th>
<td>14</td>
<td>2</td>
<td>9</td>
<td>4</td>
<td>37</td>
</tr>
<tr>
<th>Expired</th>
<td>30</td>
<td>6</td>
<td>30</td>
<td>21</td>
<td>12</td>
</tr>
<tr>
<th>Delivered</th>
<td>97</td>
<td>55</td>
<td>104</td>
<td>132</td>
<td>170</td>
</tr>
</tbody>
</table>
</div>

PS: I also noticed that MSIE will throw errors if the source table is nested in a display:none; element (or has display:none; itself) so you need to use visibility:hidden if you don’t want to display the source table.

>another good thing would be that when you save the image the figures and keys are part
>of the image like google charts

I disagree. This way it is much more customizable. Better eye candy.

Here is my quick (it wasn’t really quick) and dirty (yes it is) workaround:

MSIE for some reason was not rendering the last bar or line (see above comment) sometimes. Randomly.

Using this workaround it seems to always render it.

ctx.strokeStyle = members[h].color;
ctx.stroke();
var time = $time();
if($.browser.msie) {
if(h == (members.length-1)) {
while($time() < time+50) {
ctx.stroke();
}
}
}
ctx.closePath();

$time() is a mootools function that will return the current timestamp.

I am not happy with this workaround but at least drawing the bar/line a couple of hundred times will make sure MSIE will eventually draw it always.

Something strange I’ve noticed. (in my case anyway)

It wasn’t working at all in any version of IE. Through a process of elimination, it turns out it was a separate external style sheet which controlled other areas of the page that was causing the problem. I took out all ‘background:url (image);’ div tags and for some strange reason it now works in IE, at the expense of my background div images .

How does that work?!!

Very nice pluggin.  Looking forward to using it on my next project!!

Hi, and first of all: GREAT PLUGIN !!!

I have “found out”, that IE6 has problems with zero values.
If a row of the table contains zero values, other not zero values will not be displayed.

Here is a screenshot: http://www.russosoft.de/problem_with_zero_values.jpg

HTML-Code of the table:
<table style="width: 800px;">
<caption>Umsatz nach Partner ID (5-2009 bis 9-2009)</caption>
<thead><tr><td> </td>
<th>Mai</th>

<th>Jun</th>

<th>Jul</th>

<th>Aug</th>

<th>Sep</th>
</tr></thead><tbody><tr><th>Ohne ID</th>
<td>1050.00</td>

<td>0</td>

<td>2025.00</td>

<td>960.00</td>

<td>840.00</td>
</tr><tr><th>ABC345</th>
<td>0</td>

<td>750.00</td>

<td>0</td>

<td>0</td>

<td>0</td>
</tr><tr><th>XYZ123</th>
<td>15.00</td>

<td>50.00</td>

<td>420.00</td>

<td>0</td>

<td>0</td>
</tr><tr><th>Y0383</th>
<td>570.00</td>

<td>0</td>

<td>60.00</td>

<td>280.00</td>

<td>0</td>
</tr><tr><th>Y12345</th>
<td>0</td>

<td>1850.00</td>

<td>0</td>

<td>450.00</td>

<td>450.00</td>
</tr><tr><th>Y32156</th>
<td>0</td>

<td>1050.00</td>

<td>450.00</td>

<td>0</td>

<td>0</td>
</tr><tr><th>Y78901</th>
<td>0</td>

<td>2130.00</td>

<td>270.00</td>

<td>510.00</td>

<td>0</td>
</tr><tr><th>Y95137</th>
<td>570.00</td>

<td>570.00</td>

<td>1860.00</td>

<td>0</td>

<td>0</td>
</tr></tbody></table>

Salvatore

Hi.
Thanks for the amazing plugin, I’m using it intensively on a project of mine (http://xldb.di.fc.ul.pt/Rembrandt -> Rembrandt Pool).
I’m using graphs in tabs, but I’m having a bug where some graphs are not displayed. The canvas dimension seems allright, but the lines are not drawn, and strangely, the labels are on width/height of 0. I’m using firefox 3.5

I’ve narrowed the problems somewhere where you call canvas.width(), where in certain graphs it returns the right value, on others it returns 0! Strange is that canvas.css("width") always returns the right value, so I’ve replaced the width() and height() funciton and now it works.

I’m not a skilled programmer, and I’ve lerand jQuery in 1 month, but I thought you guys should be aware of this. The plugin is amazing, this is my way to say thanks—reporting a problem.

Hi!
Nice work:)
The script doesn’t always scale my data correctly though. I have a lot of datapoints, and sometimes the maximum and minimum doesn’t show on the graph. Also, the y-axis labels is messed up.. (using line graph). Also, is it possible to select how many x-labels there should be? With many datapoints, it would be nice to select “resolution” of the x-labels..
Please send me an e-mail if you can help

I likewise encountered the y-label inaccuracy issues described by others. It looks like it was indeed a rounding issue. The numLabels variable wasn’t rounded, resulting in the ylabels shifting whenever the numLabels variable was between integer values.

I updated line 150 of visualize.jQuery.js which was:

var numLabels = chartHeight / 30;

to be

var numLabels = Math.round(chartHeight / 30);

I believe this resolved the issue.

Thank you, Sean
I replaced the line in the for loop below that line to this:

yLabels.push((j*loopInterval).toFixed(2));

to avoid getting several labels of the same number. I also fixed my x-labels issue by replacing lines 141-143 with this:

var tbody = document.getElementsByTagName("tbody")[0];
var ths = tbody.getElementsByTagName("th");
var incr = ths.length > 9 ? Math.round(ths.length / 10) : 1;
for(var i=0; i<ths.length; i+=incr) {
xLabels.push(ths[ i ][removed]);
}

and added this below line 271:

var incr = canvas.width() / (tableData.members()[0].points.length -1);

and replaced line 281 with this:

integer+= incr;

to get maximum 10 xlabels.
This is kind of specialized for my application, but thought I should share it here anyway.

I think I found a bug(?) - when setting the parse direction to ‘y’, the colors array is not applied correctly. Instead, it just keeps repeating the first color in the array.

IE8 crashed when I tried it in that browser.

Thanks,
what version of file name “visualize.jQuery.js” in query base?

Wonderful plugin, It looks great and it’s very simple to implement!
I did a Drupal module for using this plug-in, it goes very well with Drupal Views module.

The license of that module is GNU General Public License; the same as Drupal itself and the jQuery plug-in is not included in the release, the users need to download it from here (I included a link to this page)

You can check it at http://drupal.org/project/visualize

Feel free to contact me if any doubt or comment,
Thanks!

I just tried your stuff in IE8 - that’s what crashed.

Do the charts work correctly? Check Mary in the first example. She has food:150 but the red bar is only at 135 (Firefox 3.0.13)

That’s not so good if you want to use this for more serious applications

Simple & wow!  Yet another fantastic package of jQuery goodness from Filament—THANKS!

Any pondering in the jQuery world about merging the assortment of excellent but very different charting / viz tools (Simile & Flot immediately come to mind) into one tight uber jQuery package???  Seems like a whole lot of folks working on great tools, but potentially a lot of wheels being re-invented.  Think it’d be great to sing Kumbaya, migrate towards one package, and make it a killer.

Thanks!
@jefecoon

Really amazing script! I’m gonna use it soon!

Suggestions:

- Print! - It’s almost ok, just missing the legends in FF3.0, but on ie there still work to do.
- on ie6 the pie legend don’t show.

Hello, I have created a database query to graph some data, but it doesn’t show up on the graph. The table is created with all of the data, but no graph… weird? I tried to put the JS in the bottom of the page to load after the php, but some thing. All the php shows in the source code is 3 rows with data, similar to your example.

Any ideas?

Thanks!

The top graph has the wrong numbers on the y-axis (firefox 3.5 mac)

I’ve set all the max values to 100 and the labels up the y-axis are

0, 15, 30, 45, 60, 75, 100 (15 points between each until 25 between 75 and 100)

Then when i set a value to 50 it is half way up the graph, correct, but it’s marked as 45 by the value on the y-axis.

Otherwise, excellent stuff, looks great.

matt

Great plugin, is there a way to show decimal numbers correctly?, for instance my graph only has values like 0,0.4,1.3 etc.. but it just shows 0 on a lot of the side labels.

First of all: great plugin! Thnks a lot.
My problem: When i print a bar chart in IE6 or IE8 (didnt test 7) the first bar is not printed. The problem is there when i print the demo page too. No problems with firefox. Is there a fix for this?

Thank you in advance.

Just wondering, if I use the code in static html, it shows up in IE8, however if I click on the “View this example in a new window\” for the “Live Options Configuration Demo” when using IE8, I only get the grid until such time as I chosse another grid, e.g. Line graph or I change one of the parameters under the “Global Options”.

Any idea why this happens and how to get it working in IE would be much appreciated.

Don’t worry about it, turns out I used another excanvas.js file and it worked.

Good works!
For line charts, I think being able to customize the range of the axis is a must. For example, I have many values around 200. So I need the Y axis from 190 to 210 rather than 0 to 200.

Great job!!!

There is an issue with the auto numbering of the y-axis on datasets that have small values. See the following example. The top value is correct, but that is the only data point that reflects properly on the y-axis. All of the others are not correct.

<html>
<head>

<!--[if IE]><![endif]-->

<link rel="stylesheet" href="demopage.css" type="text/css"/>
<link rel="stylesheet" href="http://www.filamentgroup.com/examples/charting_v2/visualize.jQuery.css" type="text/css"/>

$(function(){
$(’#bob’).visualize({type: ‘area’});
$(’.visualize’).css({’margin-left’:’10px’,’margin-top’:’30px’});
});

</head>
<body>
<table id="bob" style="height: 200px; margin-left: 10px;” border="1px"><caption>Data By Minute</caption>
<thead>
<tr>
<th>2009-07-15 15:55</th>
<th></th>
<th></th>
<th>2009-07-15 16:13</th>
<th></th>
<th></th>
<th>2009-07-15 16:32</th>
<th></th>
<th></th>
<th></th>
<th>2009-07-15 16:51</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>

It looks like it chopped off some of my javascript imports on the past, but the table should give you what you need to recreate the problem.

This is a great script!  I have integrated it into an ASP program that dynamically creates graphs using data from SQL queries. 

I found a critical problem, however, zero values or relatively small values can crash the script depending on the graph type.

Line and Area graphs work fine, but this data set fails for Bar and Pie graphs:

<table>
<caption>Month Compare</caption>
<thead>
<tr>
<td></td>
<th>1/09</th>
<th>2/09</th>
<th>3/09</th>
<th>4/09</th>
<th>5/09</th>
<th>6/09</th>
<th>7/09</th>
</tr>
</thead>
<tbody>
<tr>
<th>Revenue</th>
<td>44.99</td>
<td>68.85</td>
<td>784.92</td>
<td>708.77</td>
<td>913.8</td>
<td>39.99</td>
<td>0</td>
</tr>
</tbody>
</table>

Pie charts do not allow for zeros in their data set.  The smallest value allowed seems to be 0.000000000001.  With a zero, the entire chart turns to the first color in the array.  Replace the 0 with the tiny decimal number and the graph works.

Bar graphs do not allow for values that are too small relative to the scale of the y-axis.  I guess they need to draw a bar of some size rather than leave a blank. If the line is not going to be “tall enough”, no bars appear at all on the graph.  If you multiply the largest number in the data set by about 0.005, then the graph seems to work at any size.

Here are some workaround ASP functions that I am using for the problem I described above.  These won’t run for you without a little additional coding, but you can use them as template in any language to solve this problem.  Sorry If this code comes out a little hard to read because some lines “wrap around” in this format.
function GetGraphMinimumValue()
GraphMinimumFaction = 0.005
GraphMinimumValue = 0
GraphMaximumValue = 0
if( ReportGraphArray( ReportGraphTypeIndex ) = “P” ) then
GraphMinimumValue = 0.000000000001
elseif( ReportGraphArray( ReportGraphTypeIndex ) = “B” ) then
GetMaximumValue GraphMaximumValue, ReportGraphArray( ReportGraphSeries0SelectIndex )
GetMaximumValue GraphMaximumValue, ReportGraphArray( ReportGraphSeries1SelectIndex )
GetMaximumValue GraphMaximumValue, ReportGraphArray( ReportGraphSeries2SelectIndex )
GraphMinimumValue = GraphMaximumValue * GraphMinimumFaction
end if
GetGraphMinimumValue = GraphMinimumValue
end function

function GetMaximumValue( ByRef CurrentMaximumValue, Values_Select )
if( Values_Select <> “” ) then
LookUp_1_Results.Open Values_Select, ADO_DB
DO While Not LookUp_1_Results.EOF
if( LookUp_1_Results("Value") > CurrentMaximumValue ) then CurrentMaximumValue = LookUp_1_Results("Value")
LookUp_1_Results.MoveNext
Loop
LookUp_1_Results.Close
end if
end function

Looks like we have an open tag in here causing everything to italicize itself. Let’s try and fix that.

</i>

Did that work?

Anyways...this is a great plugin. The only issue I run into is if I render the chart within a floated div, I can’t get the div to recalculate its height to allow for the new contents (the chart). This is more of a CSS issue, but have yet to find a workaround for that and retain the floated container.

I ran into the same math issues as Water. I did some digging in the visualize.js and managed to make it better. Not sure if my fix is the ‘best’ solution, but here’s what I came up with:

in yLabels: function()

this line:
var loopInterval = Math.round(this.topValue() / numLabels);

can be changed to this:
var loopInterval = Math.round(this.topValue() / Math.floor(numLabels));

that makes the labels intervals a bit more accurate.

I then wanted to see if there was an exact half-way point line, which would be more obvious to notice if it was incorrect. If there is one, I use a more accurate method to get that one value (total height / 2)

// check to see if there are an even amount of labels (aside from ‘0’ being created)
var isHalfwayValue = false;
if (Math.floor(numLabels%2) == 0) {
isHalfwayValue = true;
}
for(var j=0; j<=numLabels; j++){
if (isHalfwayValue == true && j==Math.floor(numLabels)/2 ) {
yLabels.push(this.topValue()/2)
} else {
yLabels.push(j*loopInterval);
};
}
Hope that’s helpful…

I had some problems with the JQuery Visualize Plugin in IE7 and IE8.

fixed it by changing the following

to

You do great work!

I think another great feature would be the ability to ignore/hide a column or row. For example I have a table of data with a column for each month and then a summary column that contains the grand total for the year. I’d like to exclude the grand total and only chart the months.

hi i have an error. i have
<table class="refChart">
<caption>Daily Referrals</caption>
<thead>
<tr>
<th>Antes de Ayer</th>
<th>Yesterday</th>
<th>Today</th>
</tr>
</thead>
<tbody>
<tr>
<td>{$referralsAYesterdaybyPCP}</td>
<td>{$referralsYesterdaybyPCP}</td>
<td>{$referralsTodaybyPCP}</td>
</tr>
</tbody>
</table>
sometimes, these values are 0, and produce an error: in firefox 3.5
An invalid or illegal string was specified” code: “12
how i solve this problem?...thanks.. sorry but my english i speak spanish.

and.......thanks for this great plugin!!!!..

omg, i have other problem i have:
<table class="refChart">
<caption>out of network referrals</caption>
<thead>
<tr>
<th>Before Yesterday</th>
<thYesterday</th>
<th>Today</th>
</tr>
</thead>
<tbody>
<tr>

<td>5</td>
<td>0</td>
<td>0</td>
</tr>

</tbody>
</table>

in firefox and chrome, the bar for column one appear ok!, but, in IE 7 NO, nothing appears, but if i change for
<td>5</td>
<td>1</td>
<td>1</td>

now appears, what happen, please help me!!!!!!!!!!

i found something i have:
<table class="refChart">
<caption>out of network referrals</caption>
<thead>
<tr>
<th>Before Yesterday</th>
<thYesterday</th>
<th>Today</th>
</tr>
</thead>
<tbody>
<tr>

<td>5</td>
<td>0</td>
<td>0</td>
</tr>

</tbody>
</table>
if i change the column three por 1 or other number, the chart appear good, but if the last column have value 0 cause error.
<table class="refChart">
<caption>out of network referrals</caption>
<thead>
<tr>
<th>Before Yesterday</th>
<thYesterday</th>
<th>Today</th>
</tr>
</thead>
<tbody>
<tr>

<td>5</td>
<td>7</td>
<td>0</td> if here has value 0 in the last column the chart dont appear :S
</tr>

</tbody>
</table>
this dont appear in IE7
-----------------
<table class="refChart">
<caption>out of network referrals</caption>
<thead>
<tr>
<th>Before Yesterday</th>
<thYesterday</th>
<th>Today</th>
</tr>
</thead>
<tbody>
<tr>

<td>5</td>
<td>0</td>
<td>5</td>
</tr>

</tbody>
</table>
but this, yes, appear :S.:S whats happend

hello again, i have a new problem, i create the chart but into a dialog, (jquery ui dialog), in firefox and crhome, is ok all!, but in ie7 dont appear the bars.
here is the problem:
http://img269.imageshack.us/img269/6239/errorchart.jpg

please help me,

The pie chart for 100% does not render anything.
Please help.

Any help, about my problem?, pleaseeeeeeeeeeeee

is it possible to show the keys next to the slice, with the pie chart?

I am using the chart and I think its great. However, I ran into a small problem. If all the values in the table are 0, the script will crash in FF3 when using bar charts.

I have the same problem!!!!!!!!!

Oh, one other thing. I am trying to draw some charts in our Liferay environment, but that only has jQuery 1.2.6 and the excanvas script doesn’t seem to work correctly together with that jQuery version. Does anyone know if there is any way around this?

// Jp

Sweet plugin! I’d like to second the feature request for horizontal bar graphs.

How can i solve the problem for zero values please..........

Hugo...link to some working code. We can’t debug based on screen shots.

Great script, works fine in Firefox and Chrome. Unable to generate canvas in IE 8. The Y label issue still persists. When will a patched version will be released? I am looking to apply your great fine into a production application and would be great to get a stable and cross browser version in the near future.

Thanks!

I should be more clear on this, it works fine over IE8 on windows xp and fails on IE8, windows 2003

Can you fix the open em/i tag too? ;0)

Thanks for the update! Great to see it!

Awesome, I actually fixed it a few aforementioned bugs yesterday. Let me run a diff and see how you fixed them.

Thanks for the update again.

New features are great, now if we can have clickable bars I can get rid of the asp.net based one we are using now

$(’#table1’).visualize({type: ‘pie’, pieMargin: 10, title: ‘2009 Total Sales by Individual’});

<table id="table1">
<caption>2009 Individual Sales by Category</caption>
<thead>
<tr>
<td></td>
<th>colours</th>

</tr>
</thead>
<tbody>
<tr>
<th>Red</th>
<td>1</td>

</tr>
<tr>
<th>Yellow</th>
<td>2</td>

</tr>
<tr>
<th>Green</th>
<td>1</td>

</tr>
</tbody>
</table>

that results in a script not responding error, using higher values works fine how ever.

Very nice for prototyping, though I’ve modified to use parseFloat instead of parseInt to support decimal data points.

Let’s be honest. This is the best chart/visualization plugin out there, jQuery or no jQuery.

Hey guys, first off, your plugin just plain ROCKS!
I am using it in a proof of concept web app that I’m building where alot of the data is in a tight range, say 150 to 160. Is there a way I can specify ranges?
Also how about specifying a subset of rows to graph? I’ve worked around it by dynamicaly generating a new table with only the rows I want which I then visualize. A quick and dirty hack.

Thanks for this really cool plugin

i download that code , it shows table but its not editable
wats the problem?

Simply the most awesome data visualisation plugin out there imo, its simple easy to integrate and just works like a breeze :D Keep up the awesome work!

Hi Folks, If I use the accessHide class the top portion of the generated graph captions box is chopped off.

My code for this bit:

function doGraph()
{
if (document.getElementById("graphTable"))
{
//hide table
$(’#graphTable’).addClass(’accessHide’);
$(’#graphTable’).visualize({type: ‘line’, lineWeight: 1, colors: [’green’,’red’], textColors: [’green’,’red’], title: ‘Fat % comparison’});
}
}

$(document).ready(function()
{
//Code called when the document is loaded
doGraph();
});

I have altered the visualise.jQuery.js code to allow for decimal values, by changing the parseInteger(s) to parseFloat(s) . I have also made a change to enable negative values to display correctly.
Not familiar with Twitter, so if you want me to send the modified .js and .css files please email me at .

Great product so far, any help you have to offer would be appreciated.

Bill.

I don’t know what i’m doing wrong, but all i see is the graph background the labels are proper on the top right, but all the graph info like the label values for the grid and the bars itseld are either now showing up or are jumbled in the top ledt corner like a grey scribble…

I have this in a js file im including at the bottom of the page:

// VISUALIZE
$(’#1’)
.visualize({width: 900, height: 500, parseDirection: ‘x’,type: ‘bar’, appendTitle:’true’, barGroupMargin: 10, barMargin: 1, lineWeight: 1})
.appendTo(’.viz-box’);

});

Is it possible to include the tables in one tab and the visualization in another tab (using JQuery to generate the tabs)

Also, I noticed that when the tabs script is disabled the visualization shows, otherwise it does not)…

And third time’s the charm

so it seems appending .trigger(’visualizeRefresh’); took care of the problem…

Hello,

Thanks a lot for the great plugin.

I’m having a small issue though (which can be seen with your example). In IE7 and 8 i get the error “Arg: Fraction out of range (0 to 1 allowed)”. You can see this error by setting all the values of your example to 7 and one value to 0.

Best Regards, George

This is so great! I’m sometimes amazed about the progress in webdesign…

This is great, off to put it into action. I have been using FLOT but I think this has the edge!

infinite loop at line 164 if you’re not careful. here is the fix i used:

//var totalRange = this.topValue() + Math.abs(this.bottomValue());
//var loopInterval = this.topValue() + Math.abs(this.bottomValue());
var loopInterval = Math.round(this.totalYRange() / Math.floor(numLabels)); //fix provided from lab
if(loopInterval != 0){
for(var j=this.bottomValue(); j<=topValue; j+=loopInterval){
yLabels.push(j);
}
}else{
var loopInterval = this.topValue() + Math.abs(this.bottomValue());
for(var j=this.bottomValue(); j<=topValue; j+=loopInterval){
yLabels.push(j);
}
}

if(yLabels[yLabels.length-1] != this.topValue()) {
yLabels.pop();
yLabels.push(this.topValue());
}
return yLabels;

Very nice plugin. I need to do some graphic processing stuff in a while. This seems to be the most suitable graphics library for what I want to do. I’ll give it a try…

fantastic read!

There’s a problem when most of the elements are zero, or when all of them are zero, the browser gets stuck and then i only shows the table but no the chart !

about my last comment here is what i was trying

<table >
<caption>sales in the week</caption>
<thead>
<tr>
<td></td>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
</tr>
</thead>
<tbody>
<tr>
<th>3</th>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>

</tbody>
</table>
for example, the days of the week, and getting some data… but at the start of the week the data could be 0 or some value like dat, and the problem its from 0 to 3 values, whene all tha values are higher thant 3 it works prfectly

Trying to make this work in a stand alone html, so I can then get it to work inside of the web-browser in Filemaker

Copied the js code in place of the links.
Works fine on Safari on mac and pc, Firefox but nothing at all on any flavour of IE
Am I missing a trick, as the rest of it works just like a dream......

I’ve found the same bug reported in #commentNumber119 (but I’ve noticed only now that was already reported) and I’ve uploaded a fix on github where Marc Love already created the jquery-visualize project.

http://github.com/em-/jquery-visualize

Feel free to fork it or send patches. If the Filament crew prefers a different setup for collaborating I’m more than willing to follow their suggestions.

Got the basic things working now inside Filemaker, and it looks brilliant.

Have the code from the configurator working in an external html file but it won’t work inside FM10 at all. something in the js ConfiguratorThingy part really isn’t sitting very well. Any proper Java experts got any ideas??

love the hide table trick in there by the way....

trying to make this work locally for a demo and test the IE issues

what is in
script type="text/javascript\" src="editabletable.js"???

I also ran into the infinite loop bug on line 164 as described by Terran.  I fixed it by changing line 163 to:

var loopInterval = Math.max(Math.round(this.totalYRange() / Math.floor(numLabels)), 1);

@Andrew, it is exactly the fix I used (with some typographic differences) in the repository hosted on github.

Feel free to use it or to send me patches if you find other bugs (my contact info are available on my homepage linked below).

I’ve implemented horizontal bar charts for this plugin.  It still uses the ‘bar’ type, but has an additional option ‘barDirection’: if you set this to ‘horizontal’, you’ll get a horizontal bar chart.  My version is up at http://studstudy.com/visualize.jQuery.js .

@Emanuele:  Oh, sorry!  I didn’t realise you had a repository on github, or I wouldn’t have posted what I posted separately.

Andrew…
Amazing..
That has suddenly fixed my issue with it working on IE inside Filemaker on PC…

New problems.
The ‘horizontal’ doesnt work on the Mac.
On IE I have a chart where the last three values are zero, so no bars get drawn, if I change the last value to one they do…

ANd what/where is the value to shift the graph to the right inside the canvas?? Long labels are bing cut off on horizontal type....

Update on those last posts.. IE is now working fine, Mac horizontal is fine, it was a rogue Name for a CSS color rather than the # value… works a treat....

Still need the left margin value though to stop long labels being chopped…

Thank you

This is a great plug-in for chart and diagrams.. really handy and useful lib using jquery..lots of thanks, guys.

Added a choice field to pass the horizontal/ vertical to the graph, but this has introduced the missing chart in IE issue if the final value is a zero.... So when ordered in order with zeros as a middle value it is fine, when ordered by rank, with a zero at the end it stops drawing the bars in IE. Everything else works BRILLIANTLY. thank you

@John: I’ve fixed the IE issue you were talking about.  I’ve submitted a patch but if you need the file right now, you can get it from here again: http://studstudy.com/visualize.jQuery.js .

Complete success....
Whatever you did it worked. Star....

Thanks.

Thanks to Andrew I’ve updated the version hosted on github:
http://github.com/em-/jquery-visualize/blob/master/visualize.jQuery.js

I played a little with your great plugin and integrated it with another one, I’ve written some time ago.
Effect: the canvas refreshes right after value change, and you can use up and down arrows keys to modify the values, just like in Photoshop.

http://bstankowski.pl/dev/plugins/jinputvalue/visualize/en/

At the risk of sounding very amateur, I keep being told by Firebug that visualize() is not a function.

Could I have something wrong with my doctype, or what could be the deal? My jQuery on the rest of the page works fine (v 1.3.2).

Very odd, but it seems like I’m missing something obvious and I can’t place it…

Wow, I got somewhere I think…

Basically what happened was the original .js I downloaded and unzipped wouldn’t work. I figured this out by finally doing a simple $(document).ready to see if I could even get the console to .log() something. And nope, it wouldn’t. So by basically copying and pasting the same code into a new .js file and naming it the same thing (with the old one removed), it worked. Weird. Must have been something with how OSX downloaded or unzipped the package?

Anyways, I’m onto a new issue. I’m being told in Firebug:

---
An invalid or illegal string was specified” code: “12
ctx.lineWidth = strokeWidth; (line 361)
---

Thoughts?

Oops, nevermind figured that one out too. Didn’t use <th> instead of <td>.

We’re good to go, thanks!

But as a follow up, the original issue was definitely something with how OSX was reading or interpreting the original unpacked file. It was unreadable either from a perms level or a corrupt level.

This is great stuff. Thanks again. Very very good.

To add to the request logs: Gradients on the colors (specifically bar)

First, great product.  It works pretty good, and is saving me a lot of trouble trying to do my own graphing process (my customer is very report-dependant).

Issue I’m encountering:  I have a 4 column, 7 row table (1st row and column are headers, so 3x6 data).  It works ok with the default parse direction of “x”, but when I change to “y”, it breaks.  What I’ve figured out here real quickly was that the dataGroups color protery was only set for the 3 columns, so when it tries to parse in the “y” direction, it fails after 3 iterations in the Append Key section (bar graph), since there is no 4th element in the color array.

Also, via using you’re in-page demo, I’m still seeing cases where the bar-graph number indicators on the left are still off (the bars will either exceed or fall below the the for that number). I tested it by setting 1 person’s sales numbers to match the line number, using different maximum values.  Sometimes it’s dead on (max 190 worked), but other’s it’s off. I just downloaded the current version from the download link.

And one suggestion.  Maybe put in a version # in the documentation so people can easily see if they have the latest version or not? 

Thanks all for a great plug-in.  Your work is outstanding.

Is there any way to put the key paired with the label, like this mocked-up screen:

http://static.spark.net/images/pie_chart_example.png

This is important for vision-impaired users as it would be difficult to distinguish shades of grey. There will probably be some overlapping issues when a label or two are very low in value, but I’d like to still be able to test it in action with some live data. Thanks!

One more thing...here is one way to leverage google charts to match the key and label with the pie slice:

http://chart.apis.google.com/chart?chs=240x112&chd=t:44,27,16,13&cht=p&chco=6380e4,ebeff2,fad350,b13736&chl=44&#x25;%20Blue|27&#x25;%20White|16&#x25;%20Yellow|13&#x25;%20Red

It’s not ideal as the font-size cannot be increased and the chart ends up becoming rather small because there is no way to stack the text (well, it depends on how much space you have to work with). I just want to include this as an example.

Great plugin, I use it for visualizing data from performance counters - http://www.leporelo.eu/blog.aspx?id=performance-counters-series-visualize-them-in-html .

Some suggestions:
- working only with floats would be great
- if all the data are 0, the script hangs

Thank you for the plugin!

Really fantastic work, guys. We’ve put the Visualize plugin to good use on a company metrics dashboard. Just wanted to let you know that it didn’t behave friendly with the Accordion widget, though.

Thanks for sharing this great tool.

I am having trouble with zero values in pie charts on all versions of IE. I think I’ve read in previous comments that this issue has been resolved in the version on github, but i can’t seem to find that particular comment. The error I’m seeing is that IE is messing up the slice colors, though I’m not entirely sure that is what’s going on. If a table has all positive values above zero, there is no problem, but if a table has any zero values, there is a good change the pie chart will not render correctly. Here is a demonstration:

http://static.spark.net/images/visualize-pie-chart-example-ie-zero-bug/index.html

This is the github version, but the same errors occurs with the latest filament group version. Any ideas?

ok, so i hacked it out and got it working in all scenarios except when all but one value is zero. I added this js right inside the .each() function for the pie chart:

//draw the pie pieces
$.each(memberTotals, function(i){
if (memberTotals <= 0){return;}