fgCharting

fgCharting is a jQuery script for visualizing HTML table data with the canvas element.

Data visualization in HTML has long been tricky to achieve. Past solutions have involved non-standard plugins, proprietary behavior, and static images. But this has changed with the recent growth in support for the new HTML Canvas element, which provides a native drawing API that can be addressed with simple Javascript. This script is a proof of concept for visualizing HTML table data with the canvas element.

Just like tableToChart, fgCharting creates charts using <canvas> in real time based on a HTML table. This promotes accessibility, since the table data is fully accessible in browsers without javascript. Canvas is not natively supported in Internet Explorer, but lucky for us, the smart folks at Google have made a patch that uses purely javascript to port Canvas support to IE and can be downloaded here: ExplorerCanvas.

fgCharting provides several types of graphs, such as Pie, Line, Area, and Bar.

Download fgCharting

Related categories:

Comments? Need help with a component? Use our forums for further discussions.

Posted on the 27th of March at 9:30 am

From the blog RSS

Design Inspiration: European Graphic Design from 1950-1970
30th of May at 5:08 pm
Parsing Strings With jQuery
28th of May at 12:21 pm
Modalpreview - Preview Your Comment in a Modal Window
19th of May at 8:32 pm
Milestone 01 - 70+ High-End Components for Web Designers and Developers
13th of May at 9:52 pm
Tripoli Beta
8th of May at 7:08 pm
The Visual Active State: Popular Techniques and Examples
2nd of May at 7:34 pm
Introducing the Lab
29th of April at 1:58 pm
Useful jQuery: a Compilation of jQuery Utilities
23rd of April at 7:49 pm

DevKick News RSS

24 Kick Ass Portfolio Designs
exactly.
 17th of June at 9:07 pm
Using CSS to Fix Anything
Noupe shares some quick tips on how to avoid easy pitfalls when creating your CSS layout.
 17th of June at 11:14 am
2008 Design Trends
So what's hot now' Pencil sketches, handwritten notes, card stocks, watercolor effects, collage art, script fonts, grungy and splatter ink backgrounds etc... Some nice visual examples.
 16th of June at 10:04 am
10 Video Tutorials for Learning Basic Web Design Skills
Some people can read instructions on how to do things and can immediately go out and do them without any problems. But others need to see things done before they fully grasp how to do them.
 16th of June at 10:03 am
UTF-8: The Secret of Character Encoding
Character encoding and character sets are not that difficult to understand, but so many people blithely stumble through the worlds of programming without knowing what to actually do about it.
 12th of June at 11:17 am
jQuery UI v1.5 Released
"When we first started with the UI project, we set out to build a generic, basic, and simple way of adding and extending core interaction to DOM elements. However, we soon found that our approach wasn't working for UI."
 10th of June at 9:55 pm
The PHP Benchmark
The PHP Benchmark was constructed as a way to open people's eyes to the fact that not every PHP code snippet will run at the same speed. You may be surprised at the results that this page generates.
 9th of June at 1:27 pm
Introduction to CSS3 - What is it?
This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2.
 9th of June at 9:24 am
Planning a Semantic Web site
This article leads you through the aspects of both information architecture and general infrastructure you need in place to truly take advantage of this burgeoning opportunity.
 8th of June at 5:49 pm
Why we skip Photoshop
7 reasons why the 37signals team skips photoshop.
 8th of June at 8:25 am

From the lab