5 Top jQuery Chart Libraries for Interactive Charts
Leonel HilarioNowadays 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.
1. GraphUp Jquery Plugin
“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.”
- Many options — Pick a data cleaner and a painter: fill, bars, bubbles; configurable decimal point (dot or comma); customizable color maps and CSS classes; and more.
- Lightweight — The plugin takes only 4kB to load.
- Extensible — Easily create your own cleaners, painters or color maps. Also, a callback is available to perform any operations on a cell before painting. Super flexible, endless possibilities! Check out the demos.
- Progressive enhancement — Your original table is still viewable without JavaScript enabled.
- Well documented — Check out the live examples and documentation.
Compatible Browsers: Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari
1.1. jQuery Visualize Plugin
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
2. Highcharts
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.
3. Flot
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
4. jQuery Sparklines
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
5. jqPlot
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
Conclusion
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.:)
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Saleem Mohammad
Posted 56 days ago 27I am beginner in development field I searching new jQuery graphs you have a nice collection of jQuery graphs. Thanks Leonel Hilario…………
Way2Geeks
Posted 65 days ago 26Nice work..Very useful to me…Thanks for sharing..
Link.fr
Posted 83 days ago 25I find this project richer than google charts api
Thanks!
Hoang-Tran
Posted 118 days ago 24Have 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.
http://www.arcadiacharts.com
Hemant
Posted 150 days ago 23I found this to be very useful see my review as well from a .net pov
http://hemantg.blogspot.com/2011/09/jquery-graphs.html
Stefano
Posted 193 days ago 21You may want to have a look at Elycharts (http://elycharts.com), too. A jQuery+RaphaelJS based interactive charting library.
zeroin
Posted 209 days ago 20One more javascript charting library: http://www.amcharts.com/javascript
disque ssd
Posted 230 days ago 19Good, I’m looking for something very lightweight to replace ExtJS (very good but very heavy too).
david
Posted 245 days ago 18Thanks man, it’s what i was looking for
novini
Posted 249 days ago 17Great collection for jquery charts. Highcharts seems like more professional from others.
David Levin
Posted 272 days ago 15Is 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
Posted 272 days ago 16Hmm, the website is working fine on me.
web design sri lanka
Posted 279 days ago 14Supeub work. These are really helpful for my further web developments. Thanks
Yash
Posted 294 days ago 13Nice collection I will try all :)
Rıza
Posted 339 days ago 12Really gr8 article. Thanks. I have tried Visualizer and HighCharts. And I recommend HighCharts. It has a really rich API, easy2use and customizable.
Kavisha
Posted 189 days ago 22Hi, Is HighCharts are free?
WeCode
Posted 370 days ago 11Supper set of chart tools. I’m gonna use it for my research tool
Patryk Hanckowiak
Posted 450 days ago 10I’ve just checked out jqplot – It has very good documentation, lots of cool features and the charts are very esthetic by default.
Steve
Posted 509 days ago 9Any 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.
salber
Posted 612 days ago 8Why drop Flot in favour of jqplot in your favorites?
Pallav
Posted 691 days ago 7You 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.
Senamion
Posted 697 days ago 6Thanks, jQuery Visualize Plugin is new for me!
Atul Kash
Posted 699 days ago 5@Nick Pettit Can’t agree more, Highcharts is my favorite too. Love the full collection will give others a look.
djavupixel
Posted 703 days ago 4I 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.
.-= djavupixel´s last blog ..Chive a promising MySQL Manager or the next phpmyadmin! =-.
BBL
Posted 703 days ago 3Thanks for that , very helpful libraries
.-= BBL´s last blog ..7 Useful Online Code Editors =-.
Ben
Posted 703 days ago 2Thanks for that! I’m looking forward for the next projects I can use one of those mentioned libraries.
.-= Ben´s last blog ..Welcome to the United States of America =-.
Nick Pettit
Posted 704 days ago 1Can’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
.-= Nick Pettit´s last blog ..Episode 15: CSS3 Borders and HTML5 Sections =-.