3

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.

Ryan
  • 2,650
  • 3
  • 29
  • 43

6 Answers6

4

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.

marapet
  • 54,856
  • 12
  • 170
  • 184
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.

marapet
  • 54,856
  • 12
  • 170
  • 184
0

Hi i hope this link may help you i found it while searching for a solution similar to what you're looking for:

http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart

i'm trying gRaphael, i'm having difficulties on finding documentation though. you have to read the code and use the exploded instead of the min.js

bherto39
  • 1,516
  • 3
  • 14
  • 29
0

I would like to share jquery.jqplot.js. It has lots of jQuery options, but depends on other plugins such as syntaxhighliter etc.

ЯegDwight
  • 24,821
  • 10
  • 45
  • 52
bherto39
  • 1,516
  • 3
  • 14
  • 29
0

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: jQuery SVG vs. Raphael

Community
  • 1
  • 1
marapet
  • 54,856
  • 12
  • 170
  • 184
0

I recommend using Adobe Flex. Below is an example of how easy pie chart creation can be in Flex:

   <mx:Panel title="Pie Chart">
 <mx:PieChart id="myChart" 
    dataProvider="{expenses}" 
    showDataTips="true"
 >
    <mx:series>
       <mx:PieSeries 
            field="Amount" 
            nameField="Expense" 
            labelPosition="callout"
       />
    </mx:series>
 </mx:PieChart>
 <mx:Legend dataProvider="{myChart}"/>

Based on your criteria:

  • high browser compatibility: Flex is used on more than 95% of all browsers and behaves the same in all browsers. No more need to check if your web app is running in ie, firefox, chrome, etc... because any browser that has a flash player is compatible.
  • ability to draw shapes: Flash's greatest strength is the ability to draw. Charts are completely customizable and skinnable to achieve the look you need.
  • Ability to fill shapes with gradients - done easily by setting style attributes or a custom skin.
  • ability to have onclick and onmouseover events for the different shapes - see this link for some easy ways to create user interactions with charts.
Kyle
  • 4,202
  • 1
  • 33
  • 41