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.

Visualize is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets that accompanies our new book, Designing with Progressive Enhancement.

How the Visualize plugin works

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.

ARIA support now included

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
  • aria-label="Chart representing data from: [table caption value]" – specifically identifies the chart’s content as belonging to the associated table

Visualize in action: a quick demo

In the example below, we have an HTML table populated with sample data of a number of employees and their sales by store department. We’ve generated 4 charts from this table, which are shown below.

Demo page of Visualize plugin with 4 charts

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.)

Alternate style: We also created a “vanilla” style for the charts: Visualize “Vanilla” style variation

How to use Visualize

First, you’ll need to create the table markup:

    <caption>2009 Employee Sales by Department</caption>
            <th scope="col">food</th>
            <th scope="col">auto</th>
            <th scope="col">household</th>
            <th scope="col">furniture</th>
            <th scope="col">kitchen</th>
            <th scope="col">bath</th>
            <th scope="row">Mary</th>
            <th scope="row">Tom</th>
        ...repetitive rows removed for brevity.

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:


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.

Finding a generated chart on the page

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.

Updating a chart

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:


Appending the chart to other areas of the page

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:


Styling the charts with CSS

Three CSS files accompany the Visualize plugin that set the overall layout, background and text colors for the key, title, grid lines, and axis labels:

  • visualize.css – sets structural properties like display and positioning that control layout and placement. This stylesheet is required for the charts to appear as they do in the demo.
  • visualize-dark.css – contains style properties for the dark look-and-feel, as shown in the demo above
  • visualize-light.css – can be used in place of visualize-dark.css for a lighter appearance. (See a demo.)

Configuring Visualize to create customized charts

The following options are available for configuring the type of chart and its visual characteristics:

  • type: string. Accepts ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.
  • width: number. Width of chart. Defaults to table width
  • height: number. Height of chart. Defaults to table height
  • appendTitle: boolean. Add title to chart. Default: true.
  • title: string. Title for chart. Defaults to text of table’s Caption element.
  • appendKey: boolean. Add the color key to the chart. Default: true.
  • colors: array. Array items are hex values, used in order of appearance. Default: [’#be1e2d’,’#666699’,’#92d5ea’,’#ee8310’,’#8d10ee’,’#5a3b16’,’#26a4ed’,’#f45a90’,’#e9e744’]
  • textColors: array. Array items are hex values. Each item corresponds with colors array. null/undefined items will fall back to CSS text color. Default: [].
  • parseDirection: string. Direction to parse the table data. Accepts ‘x’ and ‘y’. Default: ‘x’.
  • pieMargin: number. Space around outer circle of Pie chart. Default: 20.
  • pieLabelPos: string. Position of text labels in Pie chart. Accepts ‘inside’ and ‘outside’. Default: ‘inside’.
  • 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});).

Browser support

We’ve tested this plugin in the following browsers: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9.

For Internet Explorer support

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.

Download (and help us improve) the code

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.



<div id="commentNumber1" class="commentEntry">
<p>Sounds Great..

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

Krishna on 03/19  at  06:49 AM

<div id="commentNumber2" class="commentEntry">
<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 class="posted"><a href="#commentNumber2">Comment</a> by

Sven Welzel on 03/19  at  10:29 AM

<div id="commentNumber3" class="commentEntry">
<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 class="posted"><a href="#commentNumber3">Comment</a> by

Alexandre Folle de Menezes on 03/22  at  05:57 PM

<div id="commentNumber4" class="commentEntry">
<p>Great point!

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

Team Magpie on 03/23  at  07:53 PM

<div id="commentNumber5" class="commentEntry">
<p>I added a new option because my tables are being loaded using jquery grid with formatting.

stripFormatting: false // this removes the currency and other text from the header
myTd = “$ -23,333.05”;
changed the for each td loop to something like this

x = stripformatting ? $(this).find(’td’).eq(i).text().match(/[^\d\.-]):$(this).find(’td’).eq(i).text();
dataGroups.points.push( x*1 );

Just an idea

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

Graham Wallis on 03/25  at  11:56 PM

<div id="commentNumber6" class="commentEntry">
<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 class="posted"><a href="#commentNumber6">Comment</a> by

chuck Pearson on 03/26  at  11:20 AM

<div id="commentNumber7" class="commentEntry">
<p>Sorry meant .replace not match

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

Graham on 03/26  at  01:12 PM

<div id="commentNumber8" class="commentEntry">
<p>The plugin sounds really great, I think I´ll download it, it´s very needful, thanks a lot.

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

Dave on 03/27  at  05:37 AM

<div id="commentNumber9" class="commentEntry">
<p>Superb work - a clean script with many applications!

However, I’m hoping to display the graphs alone with the table of data hidden, any thought on how to accomplish that?

Thanks, Reed

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

Reed on 03/27  at  01:10 PM

<div id="commentNumber10" class="commentEntry">
<p>sorry I meant what lol

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

yournetbiz on 03/27  at  02:46 PM

<div id="commentNumber11" class="commentEntry fg">
<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!

@Chuck: Sounds like a bug. Would you mind filing an issue in the tracker? Then we or perhaps someone else can take a look. Thanks! http://code.google.com/p/dwpe/issues/list

@Reed: After you create your chart, just give the table a class of “accessHide” and it will be accessibly hidden from view. Try this:

var myTable = $(’table#mydata’);


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

Scott (Filament) on 03/30  at  10:17 AM

<div id="commentNumber12" class="commentEntry">
<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%

Language: Spanish
Number of citizen: 800 000
Percentage of citizen: 20%

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

Laurent Goderre on 03/30  at  01:26 PM

<div id="commentNumber13" class="commentEntry fg">
<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…

    <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??

    <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.

    <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.

    <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;

    <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.

Huh? Opera supports it since ages.

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

Jos Hirth on 03/31  at  05:26 PM

<div id="commentNumber19" class="commentEntry fg">
<p>@Jos: Thanks for the correction. The article is updated.

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

Scott (Filament) on 04/01  at  08:55 AM

<div id="commentNumber20" 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 class="posted"><a href="#commentNumber20">Comment</a> by

Alexandre Folle de Menezes on 04/01  at  09:38 AM

<div id="commentNumber21" class="commentEntry fg">
<p>@Alexandre: hmm interesting. We’re you signed in to google when you tried adding an issue? We’re trying to find any info on Google code about the problem.

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

Scott (Filament) on 04/01  at  09:47 AM

<div id="commentNumber22" class="commentEntry">
<p>I’m having the same issue Chuck described above with Pie charts in IE, but with Line and Bar charts with a single set of data points. I’ve added my comments to this issue:


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

Brandon Satrom on 04/01  at  04:45 PM

<div id="commentNumber23" class="commentEntry">
<p>Excellent plugin thank you. 2 Questions:

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?



    <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.

Thanks for your attention, and keep doing this amazing stuff.

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

Alexandre Folle de Menezes on 04/09  at  11:02 AM

<div id="commentNumber25" class="commentEntry">
<p>Its great ie rendering graphs, but why in pie chart total percentage is 101%

    <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.

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

Ollie on 04/16  at  03:09 AM

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

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 class="posted"><a href="#commentNumber27">Comment</a> by

mrlucas on 04/19  at  12:36 PM

<div id="commentNumber28" class="commentEntry fg">
<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.

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

@Brandon: Thanks. We’re working on that one.

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

Scott (Filament) on 04/19  at  04:20 PM

<div id="commentNumber29" class="commentEntry">
<p>@Scott (Filament): Ok, no problem, added an issue <a href="http://code.google.com/p/dwpe/issues/detail?id=20" rel="nofollow">http://code.google.com/p/dwpe/issues/detail?id=20</a> :)

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

Ollie on 04/20  at  01:30 AM

<div id="commentNumber30" class="commentEntry">
<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?

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

ixio on 04/20  at  11:00 AM

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

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!


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

Audun Kjelstrup on 04/21  at  05:30 AM

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

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.

My initial work was implement dots on the line and area graphs.

Code is here: http://github.com/irae/jquery-visualize/commit/fe26bcdf1e1b11643f834bf181fe15b7a1e532d9

Demo is here: http://irae.pro.br/code/jquery.visualize/

Sory for not using SNV on Google Code.
It’s not agile enough for the timeframe I have.

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

Iraê on 04/21  at  08:21 PM

<div id="commentNumber33" class="commentEntry">
<p>Hi, I started using this plugin is very good, but I have a problem with the pie chart when a single element has 100% in IE not placed 100% to the corresponding element, eg color:

Red - 100%
purple - 0%
Blue - 0%.
But the pie chart shown in IE:
Red - 0%
purple - 0%
-100% blue.
I need to use this chart, and the only problem I have is this.
Help please!

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

Erubire on 04/29  at  11:25 AM

<div id="commentNumber34" class="commentEntry">
<p>Just a correction:

Red - 100%
purple - 0%
Blue - 0%.
But the pie chart shown in IE:
Red - 0%
purple - 0%
blue - 100%.

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

Erubire on 04/29  at  11:28 AM

<div id="commentNumber35" class="commentEntry">
<p>very nice cod. Thanks.

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

Astematur on 05/13  at  01:29 PM

<div id="commentNumber36" class="commentEntry">
<p>suspented code.. thanks..

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

red pepper on 05/24  at  06:48 AM

<div id="commentNumber37" class="commentEntry">
<p>I’m working a lot to enhance this plugin for interaction and to support some new features. I’ve uploaded a demo with my latest code here:


My code is on github. There is a few people colaborating there.

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.

Hope everyone likes it! =)

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

Iraê on 05/24  at  09:57 PM

<div id="commentNumber38" class="commentEntry">
<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 class="posted"><a href="#commentNumber38">Comment</a> by

Batıkent Kreş on 05/27  at  07:22 AM

<div id="commentNumber39" class="commentEntry fg">
<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.

    <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 class="posted"><a href="#commentNumber40">Comment</a> by

Iraê on 05/27  at  09:34 AM

<div id="commentNumber41" class="commentEntry">
<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 class="posted"><a href="#commentNumber41">Comment</a> by

David Eads on 05/27  at  11:44 AM

<div id="commentNumber42" class="commentEntry fg">
<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.

    <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 class="posted"><a href="#commentNumber43">Comment</a> by

David Eads on 05/27  at  12:31 PM

<div id="commentNumber44" class="commentEntry">
<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 class="posted"><a href="#commentNumber44">Comment</a> by

Iraê on 05/27  at  02:57 PM

<div id="commentNumber45" class="commentEntry">
<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.

@Scott, @Iraê: Thanks again, both of you.

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

David Eads on 05/27  at  03:21 PM

<div id="commentNumber46" class="commentEntry">
<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.

    <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 class="posted"><a href="#commentNumber47">Comment</a> by

David Eads on 06/02  at  08:55 AM

<div id="commentNumber48" class="commentEntry">
<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.


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

Bob Meetin on 06/04  at  12:10 PM

<div id="commentNumber49" class="commentEntry">
<p>Hello :) and thanks for that great code

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

    <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..

    <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!

    <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(){

topValue = Math.ceil(topValue);


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

Richard on 07/04  at  02:19 PM

<div id="commentNumber53" class="commentEntry">
<p>I liked it better here these:


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

dima on 07/20  at  02:45 AM

<div id="commentNumber54" class="commentEntry">
<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.

    <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 class="posted"><a href="#commentNumber55">Comment</a> by

Iraê on 07/27  at  10:34 PM

<div id="commentNumber56" class="commentEntry">
<p>Hey this is awesome, too simple to use :-)

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

Anuja Satardekar on 07/27  at  11:52 PM

<div id="commentNumber57" class="commentEntry">
<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 class="posted"><a href="#commentNumber57">Comment</a> by

rOdOpIn on 07/28  at  11:02 AM

<div id="commentNumber58" class="commentEntry">
<p>Thanks for the jquery. its excellent :)

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

Nauman Akhtar on 08/04  at  12:24 AM

<div id="commentNumber59" class="commentEntry">
<p>thanks for this nice chart. Just got bit of issue on firefox. My graph’s bar image getting displaced. It is only happening on firefox. IE, chrome, safari all browser displaying it ok.

please check this link: http://www.biplab.net/charting.jpg

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

bip on 08/16  at  06:32 AM

<div id="commentNumber60" class="commentEntry">
<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?

    <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?

    <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:


now every value within a link on the <td> will create same link on the perceptual printed over the graphic.

tested on piecharts and barcharts as well.

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

Alysson Franklin on 08/23  at  08:40 AM

<div id="commentNumber63" class="commentEntry">
<p>Hi All,

I want to use this framework in my iphone application. I want to know how do I pass dynamic data into this framework and generate graph accordingly.

I am very new to this HTML, CSS and also to Javascript so help me to go ahead.
Thanks in advance.


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

karuna on 09/01  at  08:50 AM

<div id="commentNumber64" class="commentEntry">
<p>@Alysson Franklin: Specifying a specific source is possible. Just add an id to your source data table like this:

<table id="stats">

then, instead of: $(’table’).visualize();
use: $(’#stats’).visualize();

With multiple tables use the same trick with classes.


Now as for my question:

Is it possible to add vertical lines as a visual aid?

Especially for line diagrams this would be desirable.

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

Johan van den Broek on 09/03  at  09:56 AM

<div id="commentNumber65" class="commentEntry">
<p>All hi, I’m korean student, I have one question for useing your project,

I’ll take your soruce for my java web project,
My java envirence (jdk1.6 and tomcat was)

q) how to use dynamic data, not made table //
Ill get my database postgresql -> call -> chart.jsp (response for vector list)
->make table -> call jqeury chart refresh function

for (){

so dynamic table feature like bottom
time | sum
09:00 10000
10:00 20000
20:00 40000

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

brown on 09/04  at  01:23 AM

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

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

kampret on 09/04  at  11:16 PM

<div id="commentNumber67" class="commentEntry">
<p>I’ve nested tables in a tab as:

<div id="Tab1">
<table id="data">

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 ?

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

Arun Gupta on 09/14  at  04:43 PM

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

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?

    <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.

Here’s how it would look like

Main CSS:
/*plugin styles*/
.visualize { border: 1px solid #888; position: relative; background: #fafafa;font-size:75%; }
.visualize canvas { position: absolute; }
.visualize ul,.visualize li { margin: 0; padding: 0;}

/*table title, key elements*/
.visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; top: -20px; right: 10px; opacity: .8; }
.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px; font-size: 1.1em; }
.visualize ul.visualize-key { list-style: none; }
.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px; }
.visualize ul.visualize-key .visualize-key-label { color: #000; }

/*pie labels*/
.visualize-pie .visualize-labels { list-style: none; }
.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute; margin: 0; padding:0; }
.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }

/*line,bar, area labels*/
.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; }
.visualize-labels-x li span.line, .visualize-labels-y li span.line { position: absolute; border: 0 solid #ccc; }
.visualize-labels-x li { height: 100%; }
.visualize-labels-x li span.label { top: 100%; margin-top: 5px; }
.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
.visualize-labels-y li { width: 100%; }
.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }

/*main styles */
.visualize { margin: 60px 0 0 30px; padding: 70px 40px 90px; border: 1px solid #000; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; }
.visualize canvas { border: 1px solid #000; margin: -1px;; }
.visualize-labels-x, .visualize-labels-y { top: 70px; left: 40px; z-index: 100; }
.visualize-pie .visualize-labels { position: absolute; top: 70px; left: 40px; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { font-size: 1.3em; padding-right: 5px; }
.visualize .visualize-info { border: 0; position: static; }
.visualize .visualize-title { position: absolute; top: 20px; margin-bottom: 0; left: 20px; font-size: 2.1em; font-weight: bold; }
.visualize ul.visualize-key { position: absolute; bottom: 15px; z-index: 10; padding: 10px 0; width: 100%; left: 0; }
.visualize ul.visualize-key li { font-size: 1.2em; margin-left: 20px; padding-left: 18px; }
.visualize ul.visualize-key .visualize-key-color { width: 10px; height: 10px; margin-top: -4px; }

Dark CSS:
.visualize {background: #222 url(../images/chartbg.png) top repeat-x; border-color:#000;}
.visualize canvas { border-color:#888; background: #222; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { color: #aaa; }
.visualize-labels-y li span.line { border-style: dotted; opacity: .6; }
.visualize .visualize-title { color: #fff; }
.visualize ul.visualize-key { background: #444;color: #aaa; }
.visualize ul.visualize-key .visualize-key-label { color: #fff; }

Light CSS:
.visualize { background:#ccc url(../images/chartbg-vanilla.png) top repeat-x; border-color:#ddd; }
.visualize canvas { border-color:#aaa; background: #fff; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { color: #444; }
.visualize-labels-y li span.line { border-style: solid; opacity: .7; }
.visualize .visualize-title { color: #333; }
.visualize ul.visualize-key { background:#eee; color: #aaa;}
.visualize ul.visualize-key .visualize-key-label { color: #333; }

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

Laurent Goderre on 09/15  at  11:57 AM

<div id="commentNumber70" class="commentEntry">
<p>Real handy plugin, thanks!

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

Edwin Steenwinkel on 09/21  at  04:29 PM

<div id="commentNumber71" class="commentEntry">
<p>nice chart script, it’s useable for me..thx a lot of.

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

mobuhai on 09/25  at  03:34 AM

<div id="commentNumber72" 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?

    <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

    <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 class="posted"><a href="#commentNumber74">Comment</a> by

Johan van den Broek on 10/08  at  08:32 AM

<div id="commentNumber75" class="commentEntry">
<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?

    <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.

    <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?

    <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 class="posted"><a href="#commentNumber78">Comment</a> by

basur on 11/02  at  03:59 AM

<div id="commentNumber79" class="commentEntry">
<p>NEED HELP PLEASE, everything works great, but when i made some adjustments i get a problem in IE7, black circles appear above my circle diagrams. Would appreciate some help. i’m dutch btw.

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

Tim on 11/15  at  11:15 AM

<div id="commentNumber80" class="commentEntry">
<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 class="posted"><a href="#commentNumber80">Comment</a> by

Andrew Philpott on 11/17  at  11:51 AM

<div id="commentNumber81" class="commentEntry">
<p>Weird… The table I’m working with only has one row of data. If I add a second row, the graph shows up.

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

Andrew Philpott on 11/17  at  11:56 AM

<div id="commentNumber82" class="commentEntry">
<p>Andrew if you look on the url under my previous post you can try my circlediagram in your browsers, because at my end everything is just working fine.

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

tim on 11/17  at  07:26 PM

<div id="commentNumber83" class="commentEntry">
<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:

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 class="posted"><a href="#commentNumber83">Comment</a> by

Daniel Burke on 11/18  at  03:23 PM

<div id="commentNumber84" class="commentEntry">
<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 class="posted"><a href="#commentNumber84">Comment</a> by

David Lewendon on 11/25  at  09:45 AM

<div id="commentNumber85" class="commentEntry">
<p>sorry one more thing some of the data Im working with has £(£) inthe table cells as it is financial data but this seems to breack the chart.

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

David Lewendon on 11/25  at  10:56 AM

<div id="commentNumber86" class="commentEntry">
<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 class="posted"><a href="#commentNumber86">Comment</a> by

David Lewendon on 11/25  at  11:45 AM

<div id="commentNumber87" class="commentEntry">
<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.

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

sigara bırakma on 12/01  at  05:59 AM

<div id="commentNumber88" class="commentEntry">
<p>David, I’ve faced the same issue. Here’s an option for enhance.js:

appendToggleLink: false, // default is true. see enhance.js
loadScripts: [
... snip ...

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

Nobu on 12/01  at  04:29 PM

<div id="commentNumber89" 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…

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

tuz on 12/04  at  01:07 PM

<div id="commentNumber90" class="commentEntry">
<p>Hi Nobu, thanks I’ll give that a go.

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

David on 12/06  at  04:06 AM

<div id="commentNumber91" class="commentEntry">
<p>Hi team, just tried this for our new project and it works very good. Many Thanks given

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

Parfum on 12/20  at  09:50 AM

<div id="commentNumber92" class="commentEntry">
<p>Is it possible to create horizontal bar charts?

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

Chad on 01/03  at  08:03 PM

<div id="commentNumber93" class="commentEntry">
<p>Thats so cool. I was looking for this kind of JQuery plugins for a long time. I fpund the best information here. Thanks

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

Davetiye on 01/13  at  06:40 PM

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

nice jQuery plugin!!

Maybe you want to remove the .svn folders in the ZIP files? That way it is easier to copy the files.


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

bzero on 01/14  at  09:52 AM

<div id="commentNumber95" class="commentEntry">
<p>there bug with the latest jQuery (1.4.4), if you only have 1 series of data, the graph won’t show up. It was fine if you use the packed jquery.

|Months +Counts |
|1 |123 |
|2 |333 |

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

nandaka on 01/24  at  03:29 AM

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

I have the same problem, have you find any solutions? i tried the JQuery 1.4.3 but it’s the same.
( it works in safari or chrome but not in firefox ( the one i need ).

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

theo on 01/24  at  05:59 AM

<div id="commentNumber97" class="commentEntry">
<p>use the included jquery inside the _shared folder from the zipped source. That one worked.

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

nandaka on 01/24  at  06:47 AM

<div id="commentNumber98" class="commentEntry">
<p>@nandaka, @theo

Same problem here with jQuery v1.4.4. jQuery v1.4.2 works. (using jquery-1.4.2.min.js)

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

zerocool on 01/24  at  09:47 AM

<div id="commentNumber99" class="commentEntry">
<p>Hi, i just started learning jQuery and now i’ve my first problem:

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.

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

TassKaff on 01/26  at  06:49 PM

<div id="commentNumber100" class="commentEntry">
<p>Hello All,

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.


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

Alex on 01/28  at  06:18 AM

<div id="commentNumber101" class="commentEntry">
<p>thanks very good ordu

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

izmir nakliyat on 01/31  at  03:46 AM

<div id="commentNumber102" class="commentEntry">
<p>thanks very good hok

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

izmir nakliyat on 01/31  at  04:09 AM

<div id="commentNumber103" class="commentEntry">
<p>First off, awesome plugin!

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.

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

Christopher Miller on 01/31  at  02:56 PM

<div id="commentNumber104" class="commentEntry">
<p>I’ve started using visualize for a couple of calculators. I’m also playing around with Iraê’s version.

I do like the interaction but I’m having trouble getting everything styled. I’ll probably play around with it and contact Iraê about submitting any meaningful changes.

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

Matt on 02/03  at  08:19 PM

<div id="commentNumber105" class="commentEntry">
<p>That is soo cool!

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 class="posted"><a href="#commentNumber105">Comment</a> by

Petra on 02/06  at  04:03 PM

<div id="commentNumber106" class="commentEntry">
<p>greate work, please check <a href="http://www.iespro.com" rel="nofollow">web designing company</a> website.

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

Ishtiaque on 02/15  at  03:38 PM

<div id="commentNumber107" class="commentEntry">
<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

An invalid or illegal string was specified” code: “12
[Stanna vid fel] ctx.translate(0,zeroLoc);

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.

    <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.

    <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

    <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?

    <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?

    <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

    <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> !

    <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.

    <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?

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

christian on 04/06  at  03:01 AM

<div id="commentNumber116" class="commentEntry">
<p>Great tool, love to have this in my tool kit thanks!

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

Webdesign den haag on 04/19  at  03:38 AM

<div id="commentNumber117" class="commentEntry">
<p>thanks, this is what I was looking for.

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

omarxp on 04/26  at  11:03 AM

<div id="commentNumber118" class="commentEntry">
<p>hello, great job.

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

Thank you very much.

    <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!!

    <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.

    <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.

    <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 :)

    <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.


    <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 class="posted"><a href="#commentNumber124">Comment</a> by

Kevin Ackley on 05/12  at  09:19 AM

<div id="commentNumber125" class="commentEntry">
<p>role="image" should be role="img"

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

jace on 05/22  at  10:17 AM

<div id="commentNumber126" class="commentEntry">
<p>Exceptional work.

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

SorinNedelcu on 06/04  at  03:36 PM

<div id="commentNumber127" class="commentEntry">
<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.

    <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>

    <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:

/* page styles */
body { font-size:62.5%; }

/*demo styles*/
table {width: 500px; height: 200px; margin-left: 30px; }
table.accessHide { position: absolute; left: -999999px; }
td, th { font-size: 1.2em; padding: 2px; width: 13%; }
th { background-color:#f4f4f4; }
caption { font-size: 1.5em; }

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!

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

justclint on 06/17  at  05:20 PM

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

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?

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

Vyas on 06/24  at  02:26 AM

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

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

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

Matt on 06/24  at  09:00 AM