menu

Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement

Posted by Maggie on 03/12/2010

A while ago, we came up with a technique for creating accessible charts
and graphs that uses JavaScript to scrape data from an HTML table and
generate bar, line, area, and pie chart visualizations using the HTML5
canvas element. This technique provides a simple way to generate charts,
but more importantly, because it bases the chart on data already in the
page in an HTML table element, it is accessible to people who browse the
web with a screen reader or other assistive technology, or with browsers
that don’t fully support JavaScript or HTML5 Canvas. We packaged it as a
downloadable jQuery plugin called Visualize.

We’ve updated the Visualize plugin — adding ARIA attributes to clarify
the chart’s role to screen reader users, so they’re better informed
about which elements contain useful data; and providing two style
variations to demonstrate how you can use CSS to customize the charts’
appearance.

Accessible data visualization in HTML has always been tricky to achieve:
people commonly use image elements for static charts, which provide only
the most basic textual information to non-visual users; or proprietary
plugins for interactive charts, which require downloads and updates by
the user and don’t always fully address accessibility issues.

The HTML5 canvas element provides an important breakthrough compared
with those traditional methods: its native JavaScript drawing API allows
us to dynamically draw bitmap images on the page, meaning we can use
Canvas to generate charts and graphs based on data that’s already
available in the HTML.

The Visualize plugin parses key content elements in a well-structured
HTML table, and leverages that native HTML5 canvas drawing ability to
transform them into a chart or graph visualization. For example, table
row data values serve as chart bars, lines or pie wedges; table headers
become value and legend labels; and the title and caption values provide
title labels within the image. Visualize also automatically checks for
the highest and lowest values in the chart and uses them to calculate
x-axis values for line and bar charts. Finally, the plugin includes two
different CSS styles — one light and one dark — that can be used as is,
or can serve as a starting point to customize chart and graph
presentation to match any application style.

Though this approach to creating charts and graphs is inherently
accessible — the table data remains in the page markup for screen
readers and browsers that don’t support JavaScript — we realized that
the canvas element needed ARIA attributes to better identify it as a
visualization. In the latest update to Visualize, we edited the plugin
to automatically assign two ARIA attributes to the chart container to
more clearly identify its purpose to screen readers:

role=“image” – tells screen readers that the chart is purely
visual, and can therefore be skipped

NOTE on the “View low bandwidth” link: This demo runs on our
EnhanceJS framework, which
applies progressive enhancement based on browser capabilities, and adds
a “View low-bandwidth version” link to allow users to toggle from a
basic to enhanced view, dropping a cookie on change to record the user’s
preference. If you click the link to view the low-bandwidth version of
the demo, just remember that you’ll need to click it again to view the
enhanced version of this site on future views. (You can read more about
EnhanceJS at the following article: Introducing EnhanceJS: A smarter,
safer way to apply progressive
enhancement.)

Note that we’ve used a caption element to summarize the table data.
This will be used by the Visualize plugin to create a title on your
graph. We’ve also defined our table headings using th elements,
letting the script know which cells it should use as the titles for a
data set.

Now that we have our HTML table, we can generate a chart. Just attach
jQuery and our Visualize plugin’s
JavaScript and CSS files to your page, and call the visualize() method
on the table, like this:

$('table').visualize();

That’s it! By default, the Visualize plugin will generate the first bar
chart shown above and append it to your page directly after the table.

Once you call the visualize() method on a table, the new chart element
will be returned to the method, allowing you to continue your jQuery
chain acting upon the chart instead of the table. Charts generated by
this plugin are contained within a div element with a class of
“visualize” as well as a class of the chart type, such as
“visualize-pie”. These classes make it easy to find your chart after
it’s generated, for additional presentation and behavioral
modifications. Another nice way to do this is to store your generated
chart in a variable, like this: var myChart = $('table').visualize();.
Then you can simply reference myChart later on in your script to make
any modifications to it, or to remove it from the page.

Every chart generated by the Visualize plugin has a custom event that
can be used to refresh itself using its original settings, including
which table it should pull data from. This is handy for dynamic pages
with charts that can update frequently. In fact, we made use of this
event when creating the editable table example above. To refresh an
existing chart, simple trigger the visualizeRefresh event on the
generated chart element, like this:

Since calling the visualize() method returns the new chart element,
it’s easy to immediately append the chart to another area of the page
using jQuery’s appendTo method. However, once you move the chart to
another area in the DOM, you must trigger the visualizeRefresh method
on it in order for it to display properly in Internet Explorer 6 and 7.
The following code demonstrates appending the chart to the end of the
page, and then triggering the visualizeRefresh method on it:

lineWeight:number. Stroke weight for lines in line and area
charts. Default: 4.

barGroupMargin:number. Space around each group of bars in a
bar chart. Default: 10.

barMargin: number. Creates space around bars in bar chart (added
to both sides of each bar). Default: 1

To use the options, simply pass them as an argument to the visualize()
method using object literal notation, just like most other jQuery
plugins you’re used to (for example:
visualize({ optionA: valueA, optionB: valueB});).

This plugin uses the HTML5 canvas element, which is not supported in
Internet Explorer at this time. Fortunately, Google maintains a library
that translates canvas scripting into VML, called excanvas.js, which we
used to extend Visualize support to IE browsers. We’ve included a
slightly modified version of excanvas.js with the Visualize plugin’s
code zip that’s also compatible with
EnhanceJS,
our capabilities testing library.

The Visualize plugin code is open source and available in a git
repository,
jQuery-Visualize.
If you think you can help on a particular issue, please submit a pull
request and we’ll review it as soon as possible.

If you’ve already purchased Designing with Progressive Enhancement,
you can download all twelve widgets at the code examples download
page.

<p>Great breakdown - let’s hope that IE9’s support of canvas etc will allow clean upgrade so that the code will migrate upward without the need for tweaks or modifications. Enhance.js is a good stop-gap to facilitate VML fixes, but don’t we all long for a time of “write once, use always"…

<p>Nice library.&nbsp; I’m looking for a library to replace PlotKit, this is almost perfect.&nbsp; Things that I miss:

- Ability to set the y-range of the line chart, right now it seems to be fixed 0-max value (the variation in my data is in the top 5%, the generated charts are practically useless for me);
- Ability to hide the x- or y- labels of the line chart (my charts have lots of months, the month names pile up and ruin the layout);
- Ability to replace the table with the chart (I don’t need the table in my page, only the chart. I managed to hide the table, but it would be nice to have it as an automatic option);
Keep up the nice work!

<p>we’re checking out this script and it’s quite impressive! however, we did find an issue. using a pie chart, for example, if you are comparing 4 sets of data and in one example you only have 1 set that is 100% of the pie, in safari and FF it shows up correctly. we see a full pie with 100% in it. however, in IE, we get a blank page. this is an issue if you want load customer data into a chart b/c sometimes you won’t have other data points yet, and you may have only 1. is there something we can do to fix this??

<p>@Sven: thanks. Glad you like it. As long as a future IE’s canvas API follows the standard, it should be a clean transition. You never know with IE though… :)

@Alexandre: Thanks for the feedback. I think your first suggestion is already in the issue tracker (http://code.google.com/p/dwpe/issues/detail?id=8). For your second issue, you might be able to use the yLabelInterval option to get what you need, but you may be able to change the parseDirection as well depending on your dataset. Your idea for an xLabelInterval is a good one. Would you mind adding it to the issue tracker as an enhancement issue? Lastly, actually removing the table from the page is not recommended, because even when the chart is present, the table provides an accessible version of the data for blind users. That said, if you’re just asking for an option to automatically add the “accessHide” class to the table, which hides it off the page, that sounds like fine idea, and would be easy to implement. Would you mind adding an issue to the tracker for that? Thanks!

@Graham: Nice idea. If you can enter that in the issue tracker and attach a patch, we’ll take a look and try incorporate it into the source if it meets a common use case. Even if we don’t incorporate it into the source, someone else may find your patch useful there. Thanks!

<p>This looks really promising! It’s great that it uses a table on the page to generate the graphs. This was one of my requirement when considering jQuery graphs plugins. However, I have a concern regarding one of the examples; The pie chart example provides aggregated information that is not available if javascript is turned off. The plugin compiles the number and generate a percentage which might be hard for some user to do. It would be better to have a second table with the compiled information that would be used for the pie chart.

The pie chart could also be used to present a number and a percentage at the same time from a table. Consider this fictive example about a country’s population first language representation. Here is what the table could look like:

First Language of citizens in FictiveLand

Language: English
Number of citizen: 2 000 000
Percentage of citizen: 50%

Language: French
Number of citizen: 1 200 000
Percentage of citizen: 30%

<p>@Laurent: Nice idea. That would be a nice way to provide an accessible version of the pie percentages. We’re currently working out a way to chart a subset of a table’s columns or rows, which would allow you to visualize that second table as a pie, telling it to simply ignore the % column data. With the current script, you might consider adding the % inside the TH with the Language name (Language: French (30%)). It wouldn’t be as nice as having a separate column, but it might provide a workaround until we implement the new feature…

</div>
<p class="posted"><a href="#commentNumber13">Comment</a> by

Scott
(Filament) on 03/30 at 01:42 PM

<div id="commentNumber14" class="commentEntry">

<p>Any thoughts on how to fix our issue??

</div>
<p class="posted"><a href="#commentNumber14">Comment</a> by

chuck pearson
on 03/30 at 02:40 PM

<div id="commentNumber15" class="commentEntry fg">

<p>@chuck: in an early comment, I’d asked if you wouldn’t mind filing an issue in the tracker for this issue. Sorry if it was buried among other responses. It’s easier to correspond about particular bugs over there. <a href="http://code.google.com/p/dwpe/issues/list" rel="nofollow">http://code.google.com/p/dwpe/issues/list</a>

Please specify if the issue occurs with cells that have 0 for a value, or if you’re talking about cells that have no value at all. Attaching or linking to a test page would be a big help as well. Thanks.

</div>
<p class="posted"><a href="#commentNumber15">Comment</a> by

Scott
(Filament) on 03/30 at 02:50 PM

<div id="commentNumber16" class="commentEntry">

<p>Oh great, I didn’t see it. We’ll do that and I appreciate you guys taking a look. I think our lead developer Lance is going to post it tomorrow.

</div>
<p class="posted"><a href="#commentNumber16">Comment</a> by

chuck Pearson
on 03/30 at 06:23 PM

<div id="commentNumber17" class="commentEntry">

<p>So far I used protovis and flotr for visualizing web charts but my first tests with your plugin looks promising as it really speeds up development. What would it need to introduce a third dimension using stacked chart approach? Saw that adding a value to a cell separating it by coma (like 190,10) doesn’t break the chart but do you think your code is a good staring point for implementing that? Thanks Scott&amp;filament;

</div>
<p class="posted"><a href="#commentNumber17">Comment</a> by

geraldo
on 03/31 at 05:05 PM

<div id="commentNumber18" class="commentEntry">

<p>&gt;This plugin uses the HTML5 canvas element, which is not supported in [...] Opera at this time.

1. When and how should I add the canvas.js for ie? Is this done automatically?
2. I’m trying to append this to a dialog ie. $(’table’).visualize().dialog(); which displays the dialog, however the graph css is broken. Can you look into this or is it out of the scope of the project?

Cheers,

Bazmo

</div>
<p class="posted"><a href="#commentNumber23">Comment</a> by

Bazmo
on 04/08 at 09:34 PM

<div id="commentNumber24" class="commentEntry">

<p>I opened issues 14 and 15 about the xLabelInterval and autohide table, respectively.&nbsp; I also added comments to issue 8, which covers my problem with y-range.

<p>Its great ie rendering graphs, but why in pie chart total percentage is 101%

</div>
<p class="posted"><a href="#commentNumber25">Comment</a> by

Ganesh Kolli
on 04/15 at 01:17 AM

<div id="commentNumber26" class="commentEntry">

<p>Hi, it’s quite good, but may I suggest two enhancements for line charts?

1. I have a chart with a lot of lines (like 30) and I can only use a limited amount of colors, could you add support for line styles? Can the line style show in the key legend? This way it’s easier to identify what line corresponds with what key.

2. If that’s too clumsy, would it be possible to add key legends at the end of the lines? And when you hover over/click the legend, it might make the line bolder :).

If this is not clear enough, I can provide more info and screenshots via e-mail.
Thanks, Ollie.

</div>
<p class="posted"><a href="#commentNumber26">Comment</a> by

Ollie
on 04/16 at 03:09 AM

<div id="commentNumber27" class="commentEntry">

<p>Hello,

Very nice plugin, especially pie chart type:)

Btw: In pie chart type, if we sum all of pieces we get 101%… I check the code and i find an issue, maybe You should use double percentage values i.e one digit after decimal point, I tested this, and results are great:)

<p>@Ganesh and @mrlucas: Thanks for the info. I filed a bug and we’re taking a look. <a href="http://code.google.com/p/dwpe/issues/detail?id=19" rel="nofollow">http://code.google.com/p/dwpe/issues/detail?id=19</a>

@Ollie: Great idea for line fills. It doesn’t sound like a simple addition, but we agree that it’d be useful. Your second suggestion sounds more immediately feasible. Would you mind filing an enhancement ticket in the tracker?

@ Bazmo: I was glad to see that you found a workaround on the Dialog issue, and I closed the ticket. As for adding excanvas, you just need to include it in your page before visualize, within a conditional comment. Keep in mind that we’ve modified our copy of excanvas slightly to work better when dynamically inserted into the page. Here are the basic usage instructions.
http://code.google.com/p/explorercanvas/wiki/Instructions

@Alexandre: Thanks for adding it to the tracker. We’ll take a look when we can!

<p>hi!!, this is my question how many chars in one web it’s possible to visualize, because i tried to used on IE and it maked it but show me msj: the script on this page cause that IE run slowly do you want running this script?

i dont know how can i fix?
can u help me?

</div>
<p class="posted"><a href="#commentNumber30">Comment</a> by

ixio
on 04/20 at 11:00 AM

<div id="commentNumber31" class="commentEntry">

<p>Hi!

First of all, thank you for an excellent graphing library! It has already solved a lot of my needs, but unfortunately, I’m stuck at a rendering issue in IE.

I’m using the graph library to render stats for days in a given month. If I have stats for just one of the days, and 0 for all the others, IE will not show any bars. If I replace ‘0’ with ‘null’ or an ‘nbsp’ for the days without stats, I’m getting a bar that’s starting correct, but ending as a diagonal bar towards the bottom right corner.

This issue is not a problem in the browsers that supports the canvas element. If you have suggestion for a solution, I would be very grateful!

I started working on this graphs and I must congratulate you on the clean and concise code. Amazing plugin.

I’ll be working on more features, and I pretend to add an interaction layer also. I don’t know yet, but I think this shoud be made as a separete plugin. Or at least as a separate layer, so one could use it whithout interaction and gain on byte size.

I’d like to here some feedback (via github message or comment is fine) and specially from fillament group itself. I’ve made some architectural choices on my own and a lot of code rewriting to enhance performance, better code reuse and to support plugins to enhance the jquery visualize itself (not to mention the interaction itself). If the changes I’ve made are not welcome, I can rewrite them or I can rename my fork to use another plugin name and namespace. Just let me know.

<p>hello, this is my question how many chars in one web it’s possible to visualize, because i tried to used on IE and it maked it but show me msj: the script on this page cause that IE run slowly do you want running this script?

<p>@Irae: awesome work! We love what you’ve done with the script. We haven’t had the time to fully look through your changes, but the demos look excellent. Any chance you’d like to collaborate further on some of the other features/bugs in our tracker? In the near future, we may move the official development of this plugin over to Github as projects seem to attract more contributors there. Thanks again and we’ll be sure to take a deeper look at the code very soon.

@Batıkent: We’re not sure on the upper limit of rows that Visualize can handle in a reasonable amount of time in IE. If you’re seeing some performance problems, you might consider checking out @Irae’s fork on Github, as it looks like he’s made a number of performance improvements.

</div>
<p class="posted"><a href="#commentNumber39">Comment</a> by

Scott
(Filament) on 05/27 at 08:52 AM

<div id="commentNumber40" class="commentEntry">

<p>@Scott: Most of the enhancements I’ve made are for one project at work. I’ve reached our current milestone and will have to stop developing for some time. Later this year I will have another milestone that will need further development on the plugin, I plan to fix some of the issues on your bug tracker at that time. Also, Github is awesome for code collaboration, if you migrate your code, I can update my fork to point to yours, so my changes could apear on your fork queue.

@Batıkent: My improvements to performance are most focused on less DOM querying, witch is part of IE’s performance issue. The second part is that the whole querying, html insertion and graph drawing are done in one take. I’ve optimized the code so this steps can be separated, but I haven’t the time yet to separate them. I intend to do so and provide a loading message to the user. This can be done with postMessage in browsers that support it (IE8, FF3+, etc), and setTimout on the older ones, but I can’t promisse when I will have time to do so.

<p>@Iraê, @Scott—I’m really impressed with the Visualize plugin so far.&nbsp; I’m working on a pretty big Drupal project that I’d love to and am planning on using Visualize with, and would love to contribute whatever I can coming out of the work on that project.

But now I’m faced with a conundrum—which version to use and contribute back to?

<p>@David: It sounds like @Irae has made some great improvements, and from a quick a glance, the code organization appears to optimized as well. If that version has all the features you need (does it have charting of table subsets yet, for instance?), it might be a better starting point for you. We’ll keep track of updates on Git and at some point, merge all the good bits into the official source.

In short, grab whichever one appears to be best for you and contribute away! We appreciate the help.

</div>
<p class="posted"><a href="#commentNumber42">Comment</a> by

Scott
(Filament) on 05/27 at 12:12 PM

<div id="commentNumber43" class="commentEntry">

<p>@Scott—I suspected as much.&nbsp; The big win for me is the x-axis scaling and manipulation that is going in (all of which is freakishly recent).&nbsp; My application is a lot more “number-y” than the current version of Visualize would allow (as far as I can tell… I’m just getting started).&nbsp; In all events, features like scaling on the x axis are going to wind up being important for me.&nbsp;

I just don’t want to contribute to a split between the code bases, especially given how much I appreciate the work everyone has done to date—conceptually, visualize works exactly as I hoped.

<p>@Scott, David: The only thing I’ve not merged so far was the table subsets. I’ve not merged it because the selector was being run even for full tables. It’s really straight forward to re-add this feature using some conditionals, specially now that I’ve moved all the DOM querying to a single place on the code. The other bugfixes and features are already merged into my version.

@David: Great to hear that you are willing to contribute. I second Scott here. Pick the version you think it more like to work to you. I’ve not commented much on the code and not documented all new features. If you have any questions regarding my code, just send me a private message at Github and I will gladly help. I’ll try to update the documentation and add one or two more examples to better illustrate the features.

<p>@Iraê:&nbsp; For me, the table subset is not an important piece of functionality.&nbsp; On the other hand, being able to add a scatter plot chart type and use numerical values and control x-axis scaling and other properties is a very important piece of functionality.

<p>Thanks for this plugin - so far it’s been fantastic in the compatibility and customisation stakes (as far as styling goes). There are a couple of things that seem like they’d be relatively simple to fix, but would make a huge difference to functionality for me:

1) The ability to specify the width of the canvas in the stylesheet instead of inline CSS as generated by the js:

- I have a necessarily fluid layout - very wide tables with width set at 100% - it would be fantastic if I could have a fluid-widthed graph/canvas as well.

- As a compromise, I’ve made my canvas ~900px wide to optimise in 1024x768 resolutions, but this means printing in IE is broken - the graphs are too wide/cut off.

&

2) The ability to either customise the legend in the stylesheet, or at very least changing the legend from being displayed by a background colour to a border or somesuch (eg make it 1px #000 background, with border:6px solid #000?)

- My need for this is in the nearly-perfect rendering of the graphs when I print - the only thing missing is the legend, as background colours are by default turned off for printing in most browsers. CSS borders, however, still show up. So, a legend that looks practically the same but constructed of a very thick border around a single pixel would work wonders for me (just an idea - would gladly submit to any other solution that worked!).

Thanks again.

</div>
<p class="posted"><a href="#commentNumber46">Comment</a> by

E Turner
on 05/28 at 02:39 AM

<div id="commentNumber47" class="commentEntry">

<p>I started working on this, but then I found Flot (<a href="http://code.google.com/p/flot/" rel="nofollow">http://code.google.com/p/flot/</a>).&nbsp; Flot is already architected the way I was starting to re-architect this plugin…

<p>Hello, I’m not JavaScript educated and could use a working example.&nbsp; tried copying the code locally including all the .js and .css files and updating the paths but no data is showing up in the first three examples and only the numbers with percent are displaying on the piechart.&nbsp;

Can you email me a text file working example? All I need at this time is the bar graph, but all will be useful.

a question : is there a minimum data figure for the JS not to run stupid ?
just made an simple stupid familial application for the Mundial “Bets” here in Peru : all is fine fine : 13 players
trying to make an European version for my friends back there in Belgium : under 8 (if I do remember well) just turn FF to run in the deep emptiness ...
any issue ? advice ?
thanks any way
Pat

</div>
<p class="posted"><a href="#commentNumber49">Comment</a> by

pat
on 06/15 at 10:45 PM

<div id="commentNumber50" class="commentEntry">

<p>Thank you so much… that the great plug code..

</div>
<p class="posted"><a href="#commentNumber50">Comment</a> by

karim
on 06/17 at 09:21 PM

<div id="commentNumber51" class="commentEntry">

<p>I’m using percentages as the values and they’re generally between 2% and 5%, if the top value for the y-axis is 1.91%, I get y-axis labels of 0, 1 and 1.91. Is there any way of rounding off the top y-axis value to 2 in this case. So the bar graph for the 1.91% level wouldn’t go all the way to the top as the top y-axis label would not be 2?

Thanks for a really great plug-in!

</div>
<p class="posted"><a href="#commentNumber51">Comment</a> by

Richard
on 07/04 at 02:04 PM

<div id="commentNumber52" class="commentEntry">

<p>Never mind, i figured it out thanks,

I added the following to line 91 of visualize.jQuery.js within the topValue: function(){

<p>Hi, I have been using this supplement for a couple of months and I noticed that the bar graphs there is a BUG. Because if the last value is 0 (zero), the graphics simply not shown. I hope I can help with this little problem, Greetings.

</div>
<p class="posted"><a href="#commentNumber54">Comment</a> by

rOdOpIn
on 07/27 at 06:06 PM

<div id="commentNumber55" class="commentEntry">

<p>@rOdOpIn if i’m not mistaken, if you grab the last code from the SVN this issue has been fixed.

Also, if you want to try my fork on github, I’ve rewritten this part of the code, and I believe you’ll not hav this problem with my version. (urls in my previous comments)

<p>I think I did not understand my previous comment when you download the zip of the page, without making any other changes in the folder “Charting”, modify the index file in the column “BATH”, leaving all rows 0, and when refrecar the page, and no graphics, according to your comment, download the latest version and still the same problem, anyway thank you, Irae. Greetings.

<p>Is there a way to display some tables across a page and creates the graphic just to a specific table?

I have a page with 3 diff tables and only the last one should load values to the charts but currently I’m getting the graphic for all 3 tables. So is there a way or even an attrib that I can call to tell the jQuery to do not consider that table in particular?

</div>
<p class="posted"><a href="#commentNumber60">Comment</a> by

Alysson Franklin
on 08/18 at 01:49 PM

<div id="commentNumber61" class="commentEntry">

<p>Is there a way to start the graph from a number which isn’t 0?

</div>
<p class="posted"><a href="#commentNumber61">Comment</a> by

Tom
on 08/20 at 04:57 PM

<div id="commentNumber62" class="commentEntry">

<p>Hi all;

I’ve implemented some changes over the plugin so now the data points can also pass URL values to the charts:

If the #data table is moved to the top level then $(’#data’).visualize() renders the chart correctly. However with the above code fragment, $(’table #data’) or $(’#data’) seems to show no results. <div> is rendered into a tab.

Any idea on how I can use the visualize plugin to render charts for nested tables ?

The plugin is working fine in Firefox but it acts really weird. First it didnt show up at all because I forgot the excanvas.js file but when I added it, it rendered it without colors and in a small corner of the graph. Has anyone ever encountered this problem before?

</div>
<p class="posted"><a href="#commentNumber68">Comment</a> by

Laurent Goderre
on 09/15 at 11:25 AM

<div id="commentNumber69" class="commentEntry">

<p>Another comment I would make is about the optimization of the CSS. It would be easier to maintain and to change the style if most of the styles were move from the dark and light CSS to the main CSS and have the dark and light them only specify the color. Currently, if you use either the dark nor the light, it looks really weird.

<p>Y axis label size doesn’t seem to be automatically determined for the background.&nbsp; When you have labels that are longer - for example 100,000, about 1/3 of it runs off the left size of the chart.&nbsp; How do you adjust the left border of the background behind the Y axis labels?

</div>
<p class="posted"><a href="#commentNumber72">Comment</a> by

mika
on 10/04 at 07:01 PM

<div id="commentNumber73" class="commentEntry">

<p>Don’t use a selector like $(’table#target’).visualize(); like Johan van den Broek suggested.

It won’t work in IE 7 / IE 8. At least this is the case with my Setup (using IE9 beta).
Rather use something like $(’table:last’).visualize(); or the nth-child()-Selector

</div>
<p class="posted"><a href="#commentNumber73">Comment</a> by

peter
on 10/08 at 07:50 AM

<div id="commentNumber74" class="commentEntry">

<p>We tested it in IE6,7,8 and had no problems. Make sure your markup is valid. Especially ensure that id names are unique for the entire page.

<p>We noticed that when we create a bar graph, the little square boxes of color appearing next to the labels on the very bottom of the bar graph are not output when we print to file from filefox 3.5 or IE 6, or opera 9.&nbsp; They all were rendered well within the layout engine of the browser, the problem just appeared when we tried to save it as postscript within each browser.&nbsp; We are using this in the most vanilla way.&nbsp; Does this ring any bells?

</div>
<p class="posted"><a href="#commentNumber75">Comment</a> by

interglossa
on 10/15 at 12:01 PM

<div id="commentNumber76" class="commentEntry">

<p>Please ignore last comment.&nbsp; If you print the page to a file in firefox you have to go into print options and select ‘print background colors’ and ‘print background images’ to get everything.

</div>
<p class="posted"><a href="#commentNumber76">Comment</a> by

interglossa
on 10/19 at 01:45 PM

<div id="commentNumber77" class="commentEntry">

<p>Y axis label size doesn’t seem to be automatically determined for the background.&nbsp; When you have labels that are longer - for example 100,000, about 1/3 of it runs off the left size of the chart.&nbsp; How do you adjust the left border of the background behind the Y axis labels?

</div>
<p class="posted"><a href="#commentNumber77">Comment</a> by

aditya
on 10/23 at 09:20 AM

<div id="commentNumber78" class="commentEntry">

<p>I tried to add my 2 issues to the tracker, but I got the following message: .

403 Forbidden
Your client does not have permission to get URL /p/dwpe/issues/entry from this server. .
I was able to comment on issue #8 though.

<p>For some reason, I can only get this plugin to work in Webkit browsers. In IE and Firefox, the canvas is created and everything looks fine, except the actual graph doesn’t appear. Has anybody else encountered this issue?

<p>First of all...GREAT plug-in.&nbsp; Very easy to use, customize an deploy.&nbsp; I am using this in a reporting tool I’ve built at work and it’s going to work out very well.

I did, however find the need for more control over styling when trying to use multiple charts on the same page. I added a bit of code to the plug-in to essentially add a class to the generated chart. I called the variable ‘chartName’ which would serve as an identifier as well as a class for CSS styling. There may already be method built into this project that allows for this, but I was unable to find it, so if anyone has any other suggestions then i’d be happy to hear them. Otherwise, I’ve found this to grant me a fair amount of control and I’m seeing success so far. Here are the steps I took:

In the “visualize.jQuery.js” file:

Add this option to ‘o’ (options) variable near the beginning of the plug-in:
`chartName: null,`

Add this to each chart type function in the ‘createChart’ variable:
`canvasContain.addClass(o.chartName);`

Then add the ‘chartName’ option to the call to the chart when you instantiate the plug-in:
`$(’#rateTrend’).visualize({chartName:’rateTrend’, type:...`

I’ve been at this for just a few hours this morning and here is a sample of what I have so far:

<p>Hi Guys, I just have a quick question about the how the charts would handle &lt;tfoot&gt; data wounf this be added in as a footnote to the chart? as you can probably tell i haven’t tried this yet but thought id ask as the sit i am planning to use this on has lots of data tables and may have important footnotes. many thanks for sharing all your hard work with us

Thanks David
ps if i have missed somthing please feel free to correct me..

<p>OK one last think promise Where are you hiding the links “View low-bandwidth version” in the code as i have many tables on the one page and the text in the link is not meaningful when taken out of the context of the page. Thanks for putting up with me.

<p>This was one of my requirement when considering jQuery graphs plugins. However, I have a concern regarding one of the examples; The pie chart example provides aggregated information that is not available if javascript is turned off.

I’m looking for the possibility to show the values on top of a bar, similar to the percent on a pie, but just the value from the table. If there is a 12 in the table it should be the same on top of the bar. Please, can somebody explain (and perhaps demonstrate) how to realize it.

Is it possible to give a “fluid” width to charts? I mean, i’ve got an admin panel with two columns, and widgets into them… Depending on the screen width of the client, these two columns can be very large or very small… And I need to put charts into widgets… So, how can I tell Visualize to adapt width ?
Thanks in advance for your answers.

FWIW, I was able to successfully implement this plugin for a project I am working on once I changed every reference from “canvas.width()” to “canvas.attr(’width’)” and the same for height. Without this fix, the chart background and title would render, but all data and labels were stacked on top of each other due to the “bottom” CSS attributes all being 0 (which stemmed from the canvas width error).

If anyone could provide insight as to why this occurred or if anyone wants screenshots, let me know.

I wish there was a wordpress plugin which could do this straight from tables.
Does anybody know if there is any?
All my search attemps have been unsuccesful, leading me only to this page but not a single plugin which can do this.

<p>I’m using this and it works great, but I have one question. If I set up a table, and only use one &lt;tr&gt;, I only have 1 line I want to show in my line chart, and if I use only one &lt;tr&gt;...&lt;/tr&gt; in my tbody, I get this error

if I add a second <tr> with data it works perfectly. I guess this have been covered before or I’m missing something but I can’t find any information and all the comments here are just overwhelming to read.

</div>
<p class="posted"><a href="#commentNumber107">Comment</a> by

Stefan Konno
on 02/16 at 11:22 AM

<div id="commentNumber108" class="commentEntry">

<p>Update on my previous comment, apparantly this only happens in Firefox, the version is Firefox/3.6.13 on Windows Vista. It works in Chrome, Safari and IE8. If I console.log(zeroLoc); it returns NaN when I only have 1 set of data, it returns the highest node value if I use more than 1 set of data.

</div>
<p class="posted"><a href="#commentNumber108">Comment</a> by

Stefan Konno
on 02/17 at 03:23 AM

<div id="commentNumber109" class="commentEntry">

<p>Hi, Its a great plugin, but I got some issue, I tried to load data dynamically with PHP, the result is showing perfectly fine in Google chrome browser, but in firefox, its not working when load dynamically data, otherwise, it works perfect

</div>
<p class="posted"><a href="#commentNumber109">Comment</a> by

Mujahid
on 02/24 at 04:55 AM

<div id="commentNumber110" class="commentEntry">

<p>I’ve noticed that it kind of messes up a few things.&nbsp; I use yztooltips and it makes them gigantic.&nbsp; I’m not really certain why.&nbsp; Perhaps something I’m doing incorrectly with one of the css sheets?

</div>
<p class="posted"><a href="#commentNumber110">Comment</a> by

Brant Watson
on 03/14 at 02:25 PM

<div id="commentNumber111" class="commentEntry">

<p>How can we configure tooltips for a bar chart?

</div>
<p class="posted"><a href="#commentNumber111">Comment</a> by

vvm
on 03/15 at 08:50 AM

<div id="commentNumber112" class="commentEntry">

<p>Can i make a circle mark on graph

</div>
<p class="posted"><a href="#commentNumber112">Comment</a> by

Ayyappadas
on 03/17 at 04:25 AM

<div id="commentNumber113" class="commentEntry">

<p>After week of debugging your code, I found that it relies on the result of .find(” “), which is undefined. See <a href="http://bugs.jquery.com/ticket/8609" rel="nofollow">http://bugs.jquery.com/ticket/8609</a> !

</div>
<p class="posted"><a href="#commentNumber113">Comment</a> by

Per Lindberg
on 03/23 at 09:47 AM

<div id="commentNumber114" class="commentEntry">

<p>I like to try this out.&nbsp; But your download package confuses me.&nbsp; And looks like it is heavy weight.

</div>
<p class="posted"><a href="#commentNumber114">Comment</a> by

bach
on 03/24 at 01:59 PM

<div id="commentNumber115" class="commentEntry">

<p>is it possible to select the rows and columns of an existing table, which should be shown in the chart?

I wonder if there is any way of using a checkbox to hide and show columns ...

Thank you very much.

</div>
<p class="posted"><a href="#commentNumber118">Comment</a> by

Dustito
on 04/29 at 05:23 AM

<div id="commentNumber119" class="commentEntry">

<p>Guati Guati!!

</div>
<p class="posted"><a href="#commentNumber119">Comment</a> by

Abraham
on 04/29 at 06:46 AM

<div id="commentNumber120" class="commentEntry">

<p>hey, I’ve noticed that if a cell contains anything other than pure numbers, the output gets scrambled up.

it’d be nice if we could add markup to prevent that, eg.:

<span class="number"> 38 </span> <span class="symbol"> % </span>

and then tell the plugin to look for such markup when building its charts. :) hope you find this useful.

</div>
<p class="posted"><a href="#commentNumber120">Comment</a> by

Luciano Cossich Sales
on 05/01 at 12:04 PM

<div id="commentNumber121" class="commentEntry">

<p>@Dustito you mean a control for hiding Mary’s line/bar and then only Tom’s, Brad’s and Kate’s would be visible?

that would be great. I can see the application for it. I’d like that too ;D

also the pie could have controls for “blending” certain slices in order to give relevance to a single one.

eg. you de-select Tom, Brad and Kate and it only shows Mary X the whole team.... that’d be cool! hope the developers hear us. I can test alpha versions if they like.

</div>
<p class="posted"><a href="#commentNumber121">Comment</a> by

Luciano Cossich Sales
on 05/01 at 12:11 PM

<div id="commentNumber122" class="commentEntry">

<p>hey again,

how do I make a pie out of COLUMNS and not ROWS, for when I have only a single row?

thanks :)

</div>
<p class="posted"><a href="#commentNumber122">Comment</a> by

Luciano Cossich Sales
on 05/01 at 11:54 PM

<div id="commentNumber123" class="commentEntry">

<p>Yes! that’s what I mean.

hopefully the developers explain how it would be possible, or implement some control soon.

Greetings

</div>
<p class="posted"><a href="#commentNumber123">Comment</a> by

Dustito
on 05/05 at 03:21 AM

<div id="commentNumber124" class="commentEntry">

<p>I’m not sure if something has changed recently, but when I view the above charts in IE6, IE7 or IE8, all the charts are blank.&nbsp; The charts appear, but there are no lines. I’m also receiving an error “permission denied” URI: <a href="http://dwpe.googlecode.com/svn/trunk/charting/index.html?noheader" rel="nofollow">http://dwpe.googlecode.com/svn/trunk/charting/index.html?noheader</a>

<p>i love the plugin. but what i would love even more would be a parameter representing a range for the x and y values. When you visualize a table with only high values which don’t vary much you get mostly free space until the actual graphs.

The best would be to implement x/yRange parameters which allow specific values for the range and dynamic ones would be nice too. So if I have values from let’s say 80 - 100, you could say yRange[ 75,105 ] and the graph would start at 75 and not 0, thus providing more detailed graphs due to lack of the whole free space.
Even better would be the option to say yRangeDynamic: 10% and it leaves 10% space above and below the graph.

</div>
<p class="posted"><a href="#commentNumber127">Comment</a> by

NetCrack
on 06/04 at 09:02 PM

<div id="commentNumber128" class="commentEntry">

<p>during further research i stumpled uppon the issue on the google code issue tracker, where a guy called mr.teecee posted a nice snippet to solve the problem, thank him very much btw: <a href="http://code.google.com/p/dwpe/issues/detail?id=8#c6" rel="nofollow">http://code.google.com/p/dwpe/issues/detail?id=8#c6</a>

</div>
<p class="posted"><a href="#commentNumber128">Comment</a> by

NetCrack
on 06/05 at 05:16 PM

<div id="commentNumber129" class="commentEntry">

<p>Awesome work!

I noticed in both visualize-dark.css and visualize-lite.css files have styles being applied to global elements like so:

No big deal as this can be edited down to only effect the charts but recently got the updated version and the above styles had to be edited again.

Just wondering if body is neccessary and if it would be possible to edit the source files so that all the table stlyes apply to only classes and ids used on chart elements.

This way it wouldnt be necessary to edit this css on every update.

Other than that Great work!

</div>
<p class="posted"><a href="#commentNumber129">Comment</a> by

justclint
on 06/17 at 05:20 PM

<div id="commentNumber130" class="commentEntry">

<p>Guyz,

Im new to jQuery, so please forgive my noob question. Can someone tell me how to apply graph to a single table? My page consists of several tables, among them I want to chart a specific table by providing ID. Can someone help me plz?

</div>
<p class="posted"><a href="#commentNumber130">Comment</a> by

Vyas
on 06/24 at 02:26 AM

<div id="commentNumber131" class="commentEntry">

<p>@Vyas:

Add an ID to your <table ID=’HTMLTable’> and then use the ID when calling visualize()
$(’#HTMLTable’).visualize()