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.
Where can I download it?
If you've already purchased Designing with Progressive Enhancement, you can download all twelve widgets at the code examples download page.
For the Visualize plugin and all others that have been released publicly as open source, download the zip.
To learn more, check out Designing with Progressive Enhancement's open-source plugin Google Code repository: http://code.google.com/p/dwpe/.
Help us improve the code
Over the past year, we've received lots of great suggestions about ways to improve Visualize. We've kept track of those comments and have posted them as issues in the DWPE Google Code site. Please take a look at our list, and feel free to add to it if you find a bug or have a specific idea about how to improve the Visualize plugin that we haven't identified: http://code.google.com/p/dwpe/issues/list. If you think you can help on a particular issue, please attach a patch and we'll look at it as soon as possible.
Thoughts? Feedback?
We'd love to hear what you think of this plugin. Please leave us a comment below!
Enjoy our blog? You'll love our book.
For info and pre-order: Visit the book site
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