As javascript frameworks like jQuery and Mootools get more and more powerful, and browsers start to support the latest CSS capabilities, chart creation is becoming more and more of a reality outside the realm of using flash. In this article I’ll discuss 6 jQuery charting plugins, their key capabilities and limitations.
Update – I have since posted 5 Javascript alternatives for charts implementations.
1) Flot
Limitations: lines, points, filled areas, bars and combinations of these
From an interaction perspective, Flot by far will get you as close as possible to Flash graphing as you can get with jQuery. Whilst the graph output is pretty slick, and great looking, you can also interact with data points. What I mean by this is you can have the ability to hover over a data point and get visual feedback on the value of that point in the graph.
On top of this, you also have the ability to select a chunk of the graph to get data back for a particular “zone”. As a secondary feature to this “zoning”, you can also select an area on a graph and zoom in to see the data points a little more closely. Very cool.
2) Sparklines
Limitations: Pie, Line, Bar, Combination
Sparklines is my favourite mini graphing tool out there. Really great for dashboard style graphs (think Google Analytics dashboard next time you login). Because they’re so tiny, they can be included in line (as in the example above). Another nice idea which can be used in all graphing plugins is the self-refresh capabilities. Their Mouse-Speed demo shows you the power of live charting at its best.
3) Google Charts Plugin
Limitations: Bar, Stacked, Line, Pie, Pie 3D
The Google Charts plugin is a really easy way to implement the Google Charts API into your web application using a jQuery plugin. Whilst the API itself is pretty simple to use (the format to generate graphs is to form a complex url with multiple query string parameters), the plugin goes one step further and actually forms that complex url for you, by allowing you to set the parameters you want with simple jQuery calls:
.attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]}))
4) jQuery Chart 0.21
Limitations: Area, Line, Bar and combinations of these
jQuery Chart 0.21 isn’t the nicest looking charting plugin out there it has to be said. It’s pretty basic in functionality when it comes to the charts it can handle, however it can be flexible if you can put in some time and effort into it.
5) jQchart
Limitations: Bar, Line
jQchart is an odd one, they’ve built in animation transistions and drag/drop functionality into the chart, however it’s a little clunky – and seemingly pointless. It does generate nice looking charts if you get the CSS setup right, but there are better out there.
6) TufteGraph
Limitations: Bar and Stacked Bar
Tuftegraph sells itself as “pretty bar graphs that you would show your mother”. It comes close, Flot is prettier, but Tufte does lend itself to be very lightweight. Although with that comes restrictions – there are few options to choose from, so you get what you’re given. Check it out for a quick win bar chart.
Conclusion
As jQuery developers we don’t have a huge amount to choose from in this aspect right now, but if I was going to get cracking with any of these today I’d choose Flot or Sparklines where necessary. The Google Charts plugin is good, however it would be excellent if they can extend support for more of the complex Google Charts available, such as locale based on maps and the Google-o-meter. Flot is the closest you’re going to get to a interactive chart using jQuery right now, and that’s definitely the way to go…
Tools to help you learn…
 Learning jQuery 1.3 |
 Amazon Kindle 2 |
 jQuery UI 1.6 |
Similar Articles:
Top 10 jQuery Plugins (according to reynoldsftw.com)
10 Quick Win jQuery Plugins
5 Javascript Chart Alternatives
7 Flash Chart Solutions
Authenticating Twitter API calls with PHP & jQuery
Interesting!
Yes so can I use this meth chart in the fluxcompastitater ?
Flot is awesome. I wanted to point out that while the ‘official’ flot has seen activity recently, there are times when it stagnates. Fortunately there’s plenty of interesting work being done with the library at github, so look it up there
Great post.
You can do some nice graphing with http://raphaeljs.com/ as well.
Cheers
There’s also my Google Chart wrapper for jQuery. It covers all the available chart types and options. See http://keith-wood.name/gChart.html.
You could also check out jqPlot at http://www.jqplot.com. It handles line, bar and pie charts, logarithmic and linear axes with sprintf style formatting, date axes with flexible formatting with support for up to 9 y axes. It has zooming, point dragging, automatic trend lines, filled and stacked charts, does data point highlighting, cursor tracking and more.
Folks should really check out the Visualize plugin released by the Filament Group ( creators of thre jQuery UI ThemeRoller).
http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
this seems pretty. havent tested yet
http://raphaeljs.com/analytics.html
You can check jqBarGraph plugin also.
http://workshop.rs/2009/12/jqbargraph-jquery-graph-plugin/
Simplement ha-llu-ci-nant !! et en plus totalement lisible par les moteurs de recherche ! Alors? Elle es pas belle la vie?? ^^
Thank you for the great write-up and suggestions.
Howdy,
I would like to know you could give me a hint on how to use these in Sharepoint. hehehe. Do u have any clues? O.o
Thank you, all mighty sir!
There seem to be some really good visual displays for charts, but not as many with interactivity. Flot certainly seems amazing, particularly with the ability to use tool tips, but It would be good to have a more consolidated library. jQplot seems the closest so far, but I really want something open GL to use in a commercial development.
create some charts in our websites, and need other charts more, thanks
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.
Just started using jqPlot, it’s well worth a mention!
http://www.jqplot.com
i have watched something very close to this before
I just made a small plugin that converts html nested list elements to google org charts:
http://plugins.jquery.com/project/nested-list-to-google-org-chart