5 Top jQuery Chart Libraries for Interactive Charts

Posted in Coding, Freebies, JS & AJAX • Posted on 14 Comments

Nowadays the need for an easy way to add interactive charts becomes essential because we are shifting from PC to web application. jQuery and other libraries allow 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.


Build Flat Responsive Website from Scratch – Complete Course


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 with 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: 
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  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 that 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.. : )

4 Written ArticlesWebsite

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.

14 Comments Best Comments First
  • Patryk Hanckowiak

    Saturday, November 20th, 2010 17:15

    8

    I’ve just checked out jqplot – It has very good documentation, lots of cool features and the charts are very esthetic by default.

    0
  • Rıza

    Friday, March 11th, 2011 17:43

    9

    Really gr8 article. Thanks. I have tried Visualizer and HighCharts. And I recommend HighCharts. It has a really rich API, easy2use and customizable.

    -1
  • Ajinkya

    Thursday, March 1st, 2012 02:06

    13

    Does the jQuery visualize plugin have a way to render vertical bar chart?

    -1
  • salber

    Friday, June 11th, 2010 17:56

    6

    Why drop Flot in favour of jqplot in your favorites?

    -2
  • Steve

    Wednesday, September 22nd, 2010 15:52

    7

    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.

    -2
  • djavupixel

    Saturday, March 13th, 2010 00:03

    3

    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.

    -3
  • Atul Kash

    Wednesday, March 17th, 2010 00:10

    4

    @Nick Pettit Can’t agree more, Highcharts is my favorite too. Love the full collection will give others a look.

    -3
  • Nick Pettit

    Friday, March 12th, 2010 00:22

    1

    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

    -3
  • Pallav

    Thursday, March 25th, 2010 00:22

    5

    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.

    -4
  • MAngesh

    Friday, March 23rd, 2012 14:19

    14

    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

    -4
  • Han

    Tuesday, October 18th, 2011 13:44

    12

    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.

    -4
  • David Levin

    Tuesday, May 17th, 2011 19:48

    10

    Is HighCharts still an active project? As of May 17th, 2011 I can’t access their web site anymore.
    http://www.highcharts.com/

    -5
    • Rean John Uehara

      Tuesday, May 17th, 2011 20:20

      11

      Hmm, the website is working fine on me.

      -3
  • MAngesh

    Friday, March 23rd, 2012 14:19

    14

    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

    -4
  • Ajinkya

    Thursday, March 1st, 2012 02:06

    13

    Does the jQuery visualize plugin have a way to render vertical bar chart?

    -1
  • Han

    Tuesday, October 18th, 2011 13:44

    12

    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.

    -4
  • David Levin

    Tuesday, May 17th, 2011 19:48

    10

    Is HighCharts still an active project? As of May 17th, 2011 I can’t access their web site anymore.
    http://www.highcharts.com/

    -5
    • Rean John Uehara

      Tuesday, May 17th, 2011 20:20

      11

      Hmm, the website is working fine on me.

      -3
  • Rıza

    Friday, March 11th, 2011 17:43

    9

    Really gr8 article. Thanks. I have tried Visualizer and HighCharts. And I recommend HighCharts. It has a really rich API, easy2use and customizable.

    -1
  • Patryk Hanckowiak

    Saturday, November 20th, 2010 17:15

    8

    I’ve just checked out jqplot – It has very good documentation, lots of cool features and the charts are very esthetic by default.

    0
  • Steve

    Wednesday, September 22nd, 2010 15:52

    7

    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.

    -2
  • salber

    Friday, June 11th, 2010 17:56

    6

    Why drop Flot in favour of jqplot in your favorites?

    -2
  • Pallav

    Thursday, March 25th, 2010 00:22

    5

    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.

    -4
  • Atul Kash

    Wednesday, March 17th, 2010 00:10

    4

    @Nick Pettit Can’t agree more, Highcharts is my favorite too. Love the full collection will give others a look.

    -3
  • djavupixel

    Saturday, March 13th, 2010 00:03

    3

    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.

    -3
  • Nick Pettit

    Friday, March 12th, 2010 00:22

    1

    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

    -3

Comments are closed.

54.166.111.111 - unknown - unknown - US