There are pros and cons of both approaches but for a charting library I would recommend the later because it is well integrated with DOM, allowing to manipulate charts elements with the DOM, and most importantly setting DOM events. By contrast Canvas charting libraries must reinvent the DOM wheel to manage events. So unless you intend to build static graphs with no event handling, SVG/VML solutions should be better.
For SVG/VML solutions there are many options, including:
There are a number of charting libraries based on Raphael, including (but not limited to):
Disclosure: I am the developer of one of the Ico forks on github.
Additionally ExtJS 4.0 has introduced a great set of charts - very powerful, and is designed to work with live data.
Check out http://www.highcharts.com !
It maybe not exactly what you are looking for, but
Google's Chart API is pretty cool and easy to use.
It also allows making nice interactive graphics and visualizations.
Although it is only for modern web browsers
UPDATE: The protovis team has moved to another library called d3.js (Data Driven Documents) as they said:
"The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis"
The new library can now be found in:
To my mind the major pros and cons were as follows. The SVG based solutions like Raphael (and offshoots) are great if you want to construct highly dynamic/interactive charts. Or if you charting requirements are very much outside the norm (e.g. you want to create some sort of hybrid chart or you've come up with a new visualization that no-one else has thought of yet). The downside is the learning curve and the amount of code you will have to write. You won't be banging out charts in a few minutes, be prepared to invest some real learning time and then to write a goodly amount of code to produce a relatively simple chart.
I went with JQplot which is a canvas based solution since I only really needed some standard types of charts. From my research and playing around with the various choices I found it to be reasonably full-featured (if you're only after the standard charts) and extremely easy to use, so I would recommend it if your requirements are similar.
To summarize, simple and want charts now, then go with JQplot. Complex/different and not pressed for time then go with Raphael and friends.
jqPlot is great. If your requirements are fairly "normal" and you just want to draw some charts, you're probably overwhelmed by the quantity of js charting options. Assuming you don't want to do hours of research, just go with jqPlot as it's probably your best bet. It covers most use cases for most people well. Some of the alternatives are specialised on a certain type of chart or built with a certain use case in mind.
As some kind of late answer, try d3.js
It's the continuation of protovis.
The big difference to flot is in the number of features supported.
Though flot may be simpler, d3.js is definitely more powerful.
gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
good looking: http://www.highcharts.com/
Canvas based so it's fast and there's roughly 20 different chart types. It's free for non-commercial use too!
My favourite (flot) has already been mentioned.
But be sure to investigate Ortho. It is excellent for tree charts and timelines.
There is a lot of activity in the dojo charting library, and what is great I am using it inside an AIR application without problems too, pretty cool! See for example there http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
Has very cool interactive options including maps, gauges, and charts.
We just bought a license of TechOctave Charts Suite for our new startup. I highly recommend them. Licensing is simple. Charts look great! It was easy to get started and has a powerful API for when we need it. I was shocked by how clean and extensible the code is. Really happy with our choice.
Try the MIT simile timeline which could be made into a chart - http://simile.mit.edu/timeline/
or the final one, http://code.google.com/p/gchart/
Protochart is all you need
For the more unusual charts: http://thejit.org/
In case what you need is bar chart only. I published some code I've been using in an old project. Someone told me the VML implementation is broken on recent versions of IE, but the SVG should work just fine. Might be getting back to the project and release some serverside renderers I already have and maybe WebGL rendering layer. There's a link: http://blog.conquex.com/?p=64
Probably not what the OP is looking for, but since this question has become a list of JS charting library options: jQuery Sparklines is really cool.
©2020 All rights reserved.