Total Followers 132,503
Nowadays the need for an easy way to add interactive charts becomes essential because we are shifting from pc applications to web application. jQuery and other libraries allows to make accessible data visualization in (x)HTML, giving us this needed functionality.
In this article we are going to present 5 chart libraries that suit different needs from simple charts to high complex charts. Most of them are free for personal and commercial use.
“GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.”
Compatible Browsers: Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari
jQuery Visualize Plugin is the perfect plugin if you have a table and want to generate a chart out of it. It offers different types of charts such as Bar, Area, Pie & Line charts.
Examples
Type of Charts: Bar, Area, Pie & Line.
Requirements: jQuery, excanvas (included)
Browser Support: IE6*, IE7*, IE8*, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9.
* HTML 5 canvas element is not supported by IE but Google maintains a library that translates canvas scripting into VML, allowing it to work in all versions of internet explorer.
Demo: http://www.filamentgroup.com/examples/charting_v2/index_2.php
License: MIT and GPL licenses
Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Examples
Line and column example
Columns with rotated labels
Type of Charts: Bar, Area, Areaspline , Pie, Line, Spline, Column & Scatter.
Requirements: jQuery or MooTools
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and iPhone!
Demo: http://www.highcharts.com/demo/
License: Creative Commons Attribution Non-Commercial 3.0 License. Free for personal website, a school site or a non-profit organization. For a single commercial Website the license costs $80.
Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Examples
Tracking curves with crosshair plugin
Type of Charts: Bar, Area, Point & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Konqueror 4+.
Demo: http://people.iola.dk/olau/flot/examples/
License: MIT License
Sparklines generates small inline charts either inline in the HTML or via JavaScript. It is really good for displaying mini graphs notably because most of them just take 1 line of HTML or JavaScript code. Another great feature is it self-refreshing capabilities. You can see it in their Mouse-Speed demo which shows you the power of live charting.
Example
Type of Charts: Bar, Tristate, Bullet, Box Plot & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://omnipotent.net/jquery.sparkline/
License: New BSD License
jqPlot did not catch my eye at first glance but after further research I found it to be one of the best and free jQuery chart library. Numerous graphical options are available you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Examples
Type of Charts: Bar, Pie & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://www.jqplot.com/tests/
License: MIT and GPL version 2 licenses
As you may have seen from this 5 jQuery chart libraries they suit different needs. First Sparklines generates a small inline chart which is perfect for charts where the precision is not important. You look at the small chart and you should directly know what happened.
Highcharts, Flot and jqPlot are very powerful jQuery chart libraries. My personal favourites is Highcharts and jqPlot. The visual quality of Highcharts charts are better than jqPlot but the last one is free. I recommend you to test at least one of them and you will see that they are really powerful.
Finally jQuery Visualize is really easy to use and specially adapted if you want to create a chart out of a table, just like you would do it in excel. This can be convenient when you need a table and a chart to visualize your thoughts. Feel free to give your feedback via comments section.:)
Get The Only Freelancer crash course you will ever need to read!
Leonel Hilario is a young old man living in Luxembourg. In his free time he adores to drink George Clooney's coffee, traveling, going out and more :) After years of being a professional web designer and developer, he decided to start blogging and tweeting.
Friday, March 23rd, 2012 14:19
I have a data in js file and want to drow the graph using js on php page.if any solution please provide the link of deno with reply
Thursday, March 1st, 2012 02:06
Does the jQuery visualize plugin have a way to render vertical bar chart?
Tuesday, October 18th, 2011 13:44
Have you guys looked at arcadiacharts yet? It looks very promising. It is easy to use, free for non-commercial and the design is great IMO.
Tuesday, May 17th, 2011 19:48
Is HighCharts still an active project? As of May 17th, 2011 I can’t access their web site anymore.
http://www.highcharts.com/
Tuesday, May 17th, 2011 20:20
Hmm, the website is working fine on me.
Friday, March 11th, 2011 17:43
Really gr8 article. Thanks. I have tried Visualizer and HighCharts. And I recommend HighCharts. It has a really rich API, easy2use and customizable.
Saturday, November 20th, 2010 17:15
I’ve just checked out jqplot – It has very good documentation, lots of cool features and the charts are very esthetic by default.
Wednesday, September 22nd, 2010 15:52
Any suggestions on a library that makes charts available for emailing/offline-viewing? I do this currently with server-side generated image files, including HTML area maps.
Friday, June 11th, 2010 17:56
Why drop Flot in favour of jqplot in your favorites?
Thursday, March 25th, 2010 00:22
You can also check out the Free jQuery plugin for FusionCharts Free at http://www.fusioncharts.com/jquery – it offers a quick and easy way to build Flash charts in jQuery. Advanced features includes automatic conversion of HTML tables to interactive charts as well. Additionally, all charts are highly customizable.
Wednesday, March 17th, 2010 00:10
@Nick Pettit Can’t agree more, Highcharts is my favorite too. Love the full collection will give others a look.
Saturday, March 13th, 2010 00:03
I think (but I never tried) that it is possible to use more than 1 library in your projects. An example would be Sparklines as a preview, highchats or jqPlot for detailed vizualisation.
Friday, March 12th, 2010 00:22
Can’t ever have enough charting libraries. :) Awesome stuff!
I think my favorite out of these is Highcharts. You have to pay for them, but the cost is trivial compared to the budget on most client projects, and the quality is great.
We actually just did an episode of Doctype about this, where we covered Highcharts and several others not listed here: http://doctype.tv/charts
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Nick Pettit
Friday, March 12th, 2010 00:22
Can’t ever have enough charting libraries. :) Awesome stuff!
I think my favorite out of these is Highcharts. You have to pay for them, but the cost is trivial compared to the budget on most client projects, and the quality is great.
We actually just did an episode of Doctype about this, where we covered Highcharts and several others not listed here: http://doctype.tv/charts
salber
Friday, June 11th, 2010 17:56
Why drop Flot in favour of jqplot in your favorites?
Pallav
Thursday, March 25th, 2010 00:22
You can also check out the Free jQuery plugin for FusionCharts Free at http://www.fusioncharts.com/jquery – it offers a quick and easy way to build Flash charts in jQuery. Advanced features includes automatic conversion of HTML tables to interactive charts as well. Additionally, all charts are highly customizable.
Atul Kash
Wednesday, March 17th, 2010 00:10
@Nick Pettit Can’t agree more, Highcharts is my favorite too. Love the full collection will give others a look.
djavupixel
Saturday, March 13th, 2010 00:03
I think (but I never tried) that it is possible to use more than 1 library in your projects. An example would be Sparklines as a preview, highchats or jqPlot for detailed vizualisation.
Steve
Wednesday, September 22nd, 2010 15:52
Any suggestions on a library that makes charts available for emailing/offline-viewing? I do this currently with server-side generated image files, including HTML area maps.
Patryk Hanckowiak
Saturday, November 20th, 2010 17:15
I’ve just checked out jqplot – It has very good documentation, lots of cool features and the charts are very esthetic by default.
Ajinkya
Thursday, March 1st, 2012 02:06
Does the jQuery visualize plugin have a way to render vertical bar chart?
MAngesh
Friday, March 23rd, 2012 14:19
I have a data in js file and want to drow the graph using js on php page.if any solution please provide the link of deno with reply
Han
Tuesday, October 18th, 2011 13:44
Have you guys looked at arcadiacharts yet? It looks very promising. It is easy to use, free for non-commercial and the design is great IMO.
Rıza
Friday, March 11th, 2011 17:43
Really gr8 article. Thanks. I have tried Visualizer and HighCharts. And I recommend HighCharts. It has a really rich API, easy2use and customizable.
David Levin
Tuesday, May 17th, 2011 19:48
Is HighCharts still an active project? As of May 17th, 2011 I can’t access their web site anymore.
http://www.highcharts.com/
Rean John Uehara
Tuesday, May 17th, 2011 20:20
Hmm, the website is working fine on me.