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:

<table>
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <td></td>
            <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>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <td>190</td>
            <td>160</td>
            <td>40</td>
            <td>120</td>
            <td>30</td>
            <td>70</td>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <td>3</td>
            <td>40</td>
            <td>30</td>
            <td>45</td>
            <td>35</td>
            <td>49</td>
        </tr>
        ...repetitive rows removed for brevity.
    </tbody>
</table>

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.

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:

$('.visualize').trigger('visualizeRefresh');

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:

$('table')
   .visualize()
   .appendTo('body')
   .trigger('visualizeRefresh');

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.

600

Comments

Sounds Great..

Comment by Krishna on 03/19  at  06:49 AM

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

Comment by Sven Welzel on 03/19  at  10:29 AM

Nice library.  I’m looking for a library to replace PlotKit, this is almost perfect.  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!

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

Great point!

Comment by Team Magpie on 03/23  at  07:53 PM

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

Comment by Graham Wallis on 03/25  at  11:56 PM

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

Comment by chuck Pearson on 03/26  at  11:20 AM

Sorry meant .replace not match

Comment by Graham on 03/26  at  01:12 PM

The plugin sounds really great, I think I´ll download it, it´s very needful, thanks a lot.

Comment by Dave on 03/27  at  05:37 AM

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

Comment by Reed on 03/27  at  01:10 PM

sorry I meant what lol

Comment by yournetbiz on 03/27  at  02:46 PM

@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’);
myTable.visualize();
myTable.addClass(’accessHide’);

or…
$(’table#mydata’).visualize().prev().addClass(’accessHide’);

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

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%

Comment by Laurent Goderre on 03/30  at  01:26 PM

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

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

Any thoughts on how to fix our issue??

Comment by chuck pearson on 03/30  at  02:40 PM

@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. http://code.google.com/p/dwpe/issues/list
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.

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

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.

Comment by chuck Pearson on 03/30  at  06:23 PM

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

Comment by geraldo on 03/31  at  05:05 PM

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

Huh? Opera supports it since ages.

Comment by Jos Hirth on 03/31  at  05:26 PM

@Jos: Thanks for the correction. The article is updated.

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

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.

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

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

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

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:

http://code.google.com/p/dwpe/issues/detail?id=11

Comment by Brandon Satrom on 04/01  at  04:45 PM

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?

Cheers,

Bazmo

Comment by Bazmo on 04/08  at  09:34 PM

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

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

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

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

Comment by Ganesh Kolli on 04/15  at  01:17 AM

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.

Comment by Ollie on 04/16  at  03:09 AM

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

Cheers.

Comment by mrlucas on 04/19  at  12:36 PM

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

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

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

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

@Scott (Filament): Ok, no problem, added an issue http://code.google.com/p/dwpe/issues/detail?id=20 :)

Comment by Ollie on 04/20  at  01:30 AM

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?

Comment by ixio on 04/20  at  11:00 AM

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!

Regards,
Audun

Comment by Audun Kjelstrup on 04/21  at  05:30 AM

Hi,

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.

Comment by Iraê on 04/21  at  08:21 PM

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!

Comment by Erubire on 04/29  at  11:25 AM

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

Comment by Erubire on 04/29  at  11:28 AM

very nice cod. Thanks.

Comment by Astematur on 05/13  at  01:29 PM

suspented code.. thanks..

Comment by red pepper on 05/24  at  06:48 AM

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:

http://irae.pro.br/code/jquery.visualize/interactive.html

My code is on github. There is a few people colaborating there.
http://github.com/irae/jquery-visualize

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

Comment by Iraê on 05/24  at  09:57 PM

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?

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

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

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

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

Comment by Iraê on 05/27  at  09:34 AM

@Iraê, @Scott—I’m really impressed with the Visualize plugin so far.  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?

Comment by David Eads on 05/27  at  11:44 AM

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

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

@Scott—I suspected as much.  The big win for me is the x-axis scaling and manipulation that is going in (all of which is freakishly recent).  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).  In all events, features like scaling on the x axis are going to wind up being important for me. 

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.

Comment by David Eads on 05/27  at  12:31 PM

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

Comment by Iraê on 05/27  at  02:57 PM

@Iraê:  For me, the table subset is not an important piece of functionality.  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.

Comment by David Eads on 05/27  at  03:21 PM

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.

Comment by E Turner on 05/28  at  02:39 AM

I started working on this, but then I found Flot (http://code.google.com/p/flot/).  Flot is already architected the way I was starting to re-architect this plugin…

Comment by David Eads on 06/02  at  08:55 AM

Hello, I’m not JavaScript educated and could use a working example.  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. 

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

Thx

Comment by Bob Meetin on 06/04  at  12:10 PM

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
Pat

Comment by pat on 06/15  at  10:45 PM

Thank you so much… that the great plug code..

Comment by karim on 06/17  at  09:21 PM

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!

Comment by Richard on 07/04  at  02:04 PM

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

:)

Comment by Richard on 07/04  at  02:19 PM

I liked it better here these:
http://www.jscharts.com/home

Comment by dima on 07/20  at  02:45 AM

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.

Comment by rOdOpIn on 07/27  at  06:06 PM

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

Comment by Iraê on 07/27  at  10:34 PM

Hey this is awesome, too simple to use :-)

Comment by Anuja Satardekar on 07/27  at  11:52 PM

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.

Comment by rOdOpIn on 07/28  at  11:02 AM

Thanks for the jquery. its excellent :)

Comment by Nauman Akhtar on 08/04  at  12:24 AM

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

Comment by bip on 08/16  at  06:32 AM

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?

Comment by Alysson Franklin on 08/18  at  01:49 PM

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

Comment by Tom on 08/20  at  04:57 PM

Hi all;

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

http://code.google.com/p/dwpe/issues/detail?id=33

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.

Comment by Alysson Franklin on 08/23  at  08:40 AM

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.

Regards,
V.Karuna.

Comment by karuna on 09/01  at  08:50 AM

@Alysson Franklin: Specifying a specific source is possible. Just add an id to your source data table like this:

<table id="stats">
...
</table>

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.

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

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

ex>
<%
for (){
%>
<td><%=list.sum%>
<%
}
%>

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

Comment by brown on 09/04  at  01:23 AM

thank’s

Comment by kampret on 09/04  at  11:16 PM

I’ve nested tables in a tab as:

<div id="Tab1">
<table>
<tr>
<td>
<table id="data">
<caption>#caption</caption>

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 ?

Comment by Arun Gupta on 09/14  at  04:43 PM

Hi,

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?

Comment by Laurent Goderre on 09/15  at  11:25 AM

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

Comment by Laurent Goderre on 09/15  at  11:57 AM

Real handy plugin, thanks!

Comment by Edwin Steenwinkel on 09/21  at  04:29 PM

nice chart script, it’s useable for me..thx a lot of.

Comment by mobuhai on 09/25  at  03:34 AM

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

Comment by mika on 10/04  at  07:01 PM

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

Comment by peter on 10/08  at  07:50 AM

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.

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

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.  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.  We are using this in the most vanilla way.  Does this ring any bells?

Comment by interglossa on 10/15  at  12:01 PM

Please ignore last comment.  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.

Comment by interglossa on 10/19  at  01:45 PM

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

Comment by aditya on 10/23  at  09:20 AM

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.

Comment by basur on 11/02  at  03:59 AM

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.

Comment by Tim on 11/15  at  11:15 AM

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?

Comment by Andrew Philpott on 11/17  at  11:51 AM

Weird… The table I’m working with only has one row of data. If I add a second row, the graph shows up.

Comment by Andrew Philpott on 11/17  at  11:56 AM

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.

Comment by tim on 11/17  at  07:26 PM

First of all...GREAT plug-in.  Very easy to use, customize an deploy.  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:

http://d2burke.com/images/chartDashBoard.png

Comment by Daniel Burke on 11/18  at  03:23 PM

Hi Guys, I just have a quick question about the how the charts would handle <tfoot> 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..

Comment by David Lewendon on 11/25  at  09:45 AM

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.

Comment by David Lewendon on 11/25  at  10:56 AM

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.

Comment by David Lewendon on 11/25  at  11:45 AM

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.

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

David, I’ve faced the same issue. Here’s an option for enhance.js:

enhance({
appendToggleLink: false, // default is true. see enhance.js
loadScripts: [
... snip ...
});

Comment by Nobu on 12/01  at  04:29 PM

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…

Comment by tuz on 12/04  at  01:07 PM

Hi Nobu, thanks I’ll give that a go.

Comment by David on 12/06  at  04:06 AM

Hi team, just tried this for our new project and it works very good. Many Thanks given

Comment by Parfum on 12/20  at  09:50 AM

Is it possible to create horizontal bar charts?

Comment by Chad on 01/03  at  08:03 PM

Thats so cool. I was looking for this kind of JQuery plugins for a long time. I fpund the best information here. Thanks

Comment by Davetiye on 01/13  at  06:40 PM

Hi,
nice jQuery plugin!!

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

Thanks!

Comment by bzero on 01/14  at  09:52 AM

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

Comment by nandaka on 01/24  at  03:29 AM

@nandaka

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

Comment by theo on 01/24  at  05:59 AM

use the included jquery inside the _shared folder from the zipped source. That one worked.

Comment by nandaka on 01/24  at  06:47 AM

@nandaka, @theo

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

Comment by zerocool on 01/24  at  09:47 AM

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.

Comment by TassKaff on 01/26  at  06:49 PM

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.

Alex

Comment by Alex on 01/28  at  06:18 AM

thanks very good ordu

Comment by izmir nakliyat on 01/31  at  03:46 AM

thanks very good hok

Comment by izmir nakliyat on 01/31  at  04:09 AM

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.

Comment by Christopher Miller on 01/31  at  02:56 PM

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.

Comment by Matt on 02/03  at  08:19 PM

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.

Comment by Petra on 02/06  at  04:03 PM

greate work, please check web designing company website.

Comment by Ishtiaque on 02/15  at  03:38 PM

I’m using this and it works great, but I have one question. If I set up a table, and only use one <tr>, I only have 1 line I want to show in my line chart, and if I use only one <tr>...</tr> 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.

Comment by Stefan Konno on 02/16  at  11:22 AM

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.

Comment by Stefan Konno on 02/17  at  03:23 AM

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

Comment by Mujahid on 02/24  at  04:55 AM

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

Comment by Brant Watson on 03/14  at  02:25 PM

How can we configure tooltips for a bar chart?

Comment by vvm on 03/15  at  08:50 AM

Can i make a circle mark on graph

Comment by Ayyappadas on 03/17  at  04:25 AM

After week of debugging your code, I found that it relies on the result of .find(” “), which is undefined. See http://bugs.jquery.com/ticket/8609 !

Comment by Per Lindberg on 03/23  at  09:47 AM

I like to try this out.  But your download package confuses me.  And looks like it is heavy weight.

Comment by bach on 03/24  at  01:59 PM

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

Comment by christian on 04/06  at  03:01 AM

Great tool, love to have this in my tool kit thanks!

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

thanks, this is what I was looking for.

Comment by omarxp on 04/26  at  11:03 AM

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

Thank you very much.

Comment by Dustito on 04/29  at  05:23 AM

Guati Guati!!

Comment by Abraham on 04/29  at  06:46 AM

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.

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

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

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

hey again,

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

thanks :)

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

Yes! that’s what I mean.
hopefully the developers explain how it would be possible, or implement some control soon.

Greetings

Comment by Dustito on 05/05  at  03:21 AM

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.  The charts appear, but there are no lines. I’m also receiving an error “permission denied” URI: http://dwpe.googlecode.com/svn/trunk/charting/index.html?noheader

Comment by Kevin Ackley on 05/12  at  09:19 AM

role="image" should be role="img"

Comment by jace on 05/22  at  10:17 AM

Exceptional work.

Comment by SorinNedelcu on 06/04  at  03:36 PM

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.

Comment by NetCrack on 06/04  at  09:02 PM

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: http://code.google.com/p/dwpe/issues/detail?id=8#c6

Comment by NetCrack on 06/05  at  05:16 PM

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!

Comment by justclint on 06/17  at  05:20 PM

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?

Comment by Vyas on 06/24  at  02:26 AM

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

Comment by Matt on 06/24  at  09:00 AM