Best web technology for building dynamic charts

Question

I need to build a custom designed bar chart that displays some simple data. Below are my requirements. Can anyone suggest the best web technology for my requirements.

• high browser compatibility
• ability to draw shapes
• ability to fill shapes with gradients
• ability to have onclick and onmouseover events for the different shapes (bars in the chart).

Thanks guys. I was thinking of using svg but looking for suggestions.

Answer 1

How about Raphaël - it's SVG/VML. It says:

Browser compatibility:

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Ability to draw shapes

circle, rect, ellipse, image, text, path

Ability to fill shapes with gradients

yes

Ability to have onclick and onmouseover events

yes:

... every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.

Everything in the reference

On top of that, there's a plugin called gRaphael which makes the creation of charts easier.

Answer 2

Simple data - Google Charts API or Google Visualization API may suit you.

Details for all features of image charts can be found on the Chart feature list

You may also take a look at the comparison of the Charts API and the Visualization API.

Answer 3

Another candidate of course is JQuery SVG - if you're already familiar with jquery you may prefer this one.

There's a comparison of JQuery SVG and Raphaël on SO: http://stackoverflow.com/questions/588718/jquery-svg-vs-raphael