Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Create Image-less Graphs And Charts

Example CSS charts

Adding beautiful charts to your site does not have to require a hefty server-side process or a third party service. With CSS and a little ingenuity, you can have the lightweight, easy to create visualizations of your data.

The design mavens over at Six Revisions have put together eight examples of CSS charts and graphs. Each one uses little to no images to create snappy bar and column chart. There’s even a scatter plot example and some standards-supporting, accessible sparklines.

Google’s Chart API is an alternative to rolling your own. Passing your data is almost as easy because it goes in an image URL. While you don’t have to pay for the bandwidth of the chart, the API still comes with some strings attached and Google can pull the plug whenever it wants. If you’re looking for 3-D or pie charts, the sort of stuff that can’t be done with CSS, that may still be your best bet.

See also:

Post Comment Comments Permalink Print
Reddit Digg