The old days of displaying statistics using HTML Tables is now over. Nowadays, the need for an easy way to add interactive charts has become important. Graph/Chart allows end users to visualize data view, trends and also “wow” your visitors. Below is a list of Graph Components/Libraries that I have compiled that you can use in your project. Some are flash-based others, are in Javascript. With these Chart Components, you can easily generate charts in your web application such as Pie Chart, Bar Chart, Line Graph and much more.
Flash-based Chart Components
Flash-Based Graph components provide interactive options that simple image based charting components do not offer. It is not a problem at all, if you are not a flash coder because flash based charting usually uses XML as a Data Interface. So all you need to know is how to convert your data into XML Format.
-
FusionCharts
-
Open Flash Chart
- XML/SWF Charts
-
Highcharts
-
jQuery Visualize
-
Flot
-
jQuery Sparklines
-
jqPlot
Fusioncharts provides stunning free flash components that you can add in your web application. I have personally used this , and I believe it is one of the best out there. It does not even have a watermark on it unlike other flash chart tools. This website also provides paid chart components if you are looking for additional features .
Type of Charts: 3D/2D Column & Bar Charts ,Line Charts,2D/3D Pie & Doughnut Charts,Area Charts,Stacked Charts,Combination Charts,Candlestick Charts,Funnel Chart,Gantt Chart
Demo/Download : http://www.fusioncharts.com/free/
License Type : MIT and GPL licenses
Fusionchart component
This charting Flash Component uses JSON as Data file format. Implementation is quite straight. All you have to do is copy the Open Flash Chart SWF file to your server, then start embedding flash charts into your HTML and point to static or dynamic data on your server .Some of the of the key features include exporting of the chart into an image, it also supports tool tip to encourage interactivity. Moreover, it provides libraries to generate graph in programming languages other than PHP ( Java, .Net, Python, Ruby ) .
Type of Charts: Glass Bar Chart,Area Chart,3D Bar Chart,Data Lines,Pie Chart
Demo/Download : Version 2
License Type :GNU General Public License.
Open Flash Chart
XML/SWF Charts is a simple, yet powerful tool to create attractive charts and graphs from XML data.
Type of Charts: Line,Column,Stacked column,Floating column,3D column,Image column,Stacked 3D column,Parallel 3D column,Pie,3D Pie,Image Pie,Donut,Bar,Stacked bar,Floating bar,Area,Stacked area,3D Area,3D Stacked area,Candlestick,Scatter,Polar,Bubble,Composite,Mixed,Joined
Demo/Download : http://www.maani.us/xml_charts/
License Type : Dual License
xml/swf Component
Javascript-Based Chart Components
Highcharts is probably one of the most popular JavaScript based charting components on the web. It Works on all major browsers and on even ipad/ipod/iphone.This plug In stands from the crowd because of some extra features that is not available in other components such as exporting the chart in pdf,jpg,png format, zooming capabilities, etc .
Type of Charts: line, spline, area, areaspline, column, bar, pie and scatter chart types.
Demo/Download : HighCharts Demo
License Type : Free for Non-Commercial Use
HighChart Plug in
As the name tells you, it is a jQuery Based Plug in that allows you to visualize data. This plug in also uses HTML5 canvas to dynamically generate an image for the Graph.
Type of Charts: Line graph,Bar Chart,Pie Chart .
Demo/Download : FilamentGroup
License Type : Free To use
Jquery Visualize Plug In
Flot is another great Plug in to generate attractive graph .Some key features include zooming capabilities , Tooltip . However , it currently supports only 4 different type of chart/graph .
Type of Charts: lines, points, filled areas, bar Chart .
Demo/Download : Flot Graph
License Type : MIT License
Flot Plug in
Sparklines generates small charts either inline in the HTML or via JavaScript. You can generate a graph with only 1 line of HTML or Javascript code. This plug in also has auto refreshing capabilities. On the official website, you can see a demo of a live graph of your mouse speed. However, I don’t find it really attractive.
Type of Charts: line graphs,Composite inline,Composite bar,Box Plot,Pie charts,Bullet charts
Demo/Download : SparkLines
License Type : MIT License
Sparklines Plug in
jqPlot is another great plotting and charting plug in based on jQuery that is comparable to the key features of HighCharts. This plug in allows the end user to drag and drop the lines, and it automatically redraws itself.
Type of Charts: Bar, Pie & Line Chart .
Demo/Download : jqPlot Graph
License Type : MIT and GPL
Jqplot Plugin
Summary
As you may have seen, each of these graph components can be used to generate a different type of chart that suits your need. Most of the developers will probably prefer one which has many features, attractive, easy to use, without getting a headache with browser compatibility issues and most of all, one which is free.
In my opinion,if you are opting for a flash-based component, FusionChart is the best one and if you prefer Javascript -based ,then HighCharts is the best one to go with. If you know any other good free charting components that you have used, feel free to share it with us in the comment section below :)
{ 1 comment… read it below or add one }
Hi!
I am missing one big thing in this article. And that is performance. Using a Javascript solution means using the html 5 canvas. This will not work on IE 6-8. And you will miss all Windows XP users that do nont use a third party browser. I know that JQPlot and Highcharts use VML instead for IE, but that will not work if the charts contains more than ca 100 dots……..