20 Fresh JavaScript Data Visualization Libraries

Jan 17 2010 by Jacob Gube | 49 Comments

There are plenty of JavaScript libraries out there for rendering your otherwise plain and boring numerical data into beautiful, interactive, and informative visualizations. The beauty of using JavaScript for data visualization is that, if created correctly, your data will be highly accessible (usually via HTML tables). A long time ago (2008), I wrote about JavaScript solutions for graphing and charting data and this article revisits the topic with twenty more JavaScript libraries that you can use to bring your data to life.

1. Highcharts

Highcharts

Highcharts is one of the most promising JavaScript charting libraries to hit the scene recently, with its large array of features including seven charting types (line, pie, and bar among them),  the ability to zoom in and out of charts, and tooltips for offering more information about data points. The library has many options for customization and they’re well documented on one page for easy referencing.

2. gRaphaël

gRaphaël

gRaphaël is a charting library based on Raphaël, a vector graphics drawing JavaScript library. The library is divided into sub-libraries so that you can just download the type of chart that you’re interesting in creating. With the main library, g.raphael.js, at only 12KB and sub-libraries between 4KB to 8KB, this can be a lightweight but fully featured JavaScript charting solution for web developers.

3. JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit

JavaScript InfoVis, a charting library influenced partly by MooTools, is a robust and excellent solution for data visualization. It’s modular (just like MooTools) so that you can include just the parts you need to keep your pages light. It has animation effects capability to captivate and engage your users, plenty of charting types, a helper class for working with JSON data, and much more.

4. jQuery Visualize Plugin

jQuery Visualize Plugin

If you’re already using jQuery, it’d be performance conscious of you to look into plugins for your visualization requirements. jQuery Visualize, a plugin developed by the Filament Group (the core developers of jQuery UI), is a jQuery plugin for generating charts using HTML5′s canvas element. It has 14 options for customizing your charts. Don’t forget to try out their Configurable demo.

5. moochart

moochart

For now, moochart only plots bubble diagrams, but there are plans to expand this MooTools 1.2 plugin to feature pie, line, and bar graphs. The plugin has 14 options that you can use for customizing your diagram’s look, and tooltips for providing more information about a bubble when mousing over them. moochart is open source and released under the MIT license.

6. JS Charts

JS Charts

JS Charts boasts easy usage by emphasizing on the end-user’s ability to use the library with little to no coding, making it ideal for web designers who’d like to chart data without spending too much time learning how to write JavaScript. JS Charts has a web-based GUI and offers hosting for your charts to take some load off your own servers. It supports three chart types: bar, pie, and line.

7. dygraphs

dygraphs

dygraphs is a JavaScript library for producing interactive charts for time series data. It was designed to plot dense data sets (such as temperature fluctuations). It has user interfacing options such giving the user the ability to specify time intervals on the fly, displaying of values when mousing over parts of the chart, and zooming. It also integrates with the Google Visualization API.

8. JSXGraph

JSXGraph

JSXGraph, developed at the University of Bayreuth in Germany, is a standalone JavaScript library for plotting complex geometric shapes and data such as Bezier curves, differential equations, and much more. It has animation features for moving graphs, interactive components such as sliders for experimenting with changing values of variables, and plenty of charting types to choose from.

9. Protochart

Protochart

Protochart is a JavaScript library for use with the Prototype JS framework. It uses HTML5′s canvas for modern browsers, and the ExCanvas library for Internet Explorer support. It has six types of charts including line, pie, bars, points, lines with points, and area graphs. It allows for the display of legends that are highly configurable to help identify items on your charts.

10. Bluff

Bluff

Bluff is a lightweight charting library that ports Ruby’s Gruff gem to JavaScript. Weighing at only 11KB gzip’ed (you also need JS.Class which only weighs 2.6KB gzip’ed), it’s surprising that you’ll be able to get 15 different types of charts out of this library. It features tooltips, a ton of configurable options, legend support, and the .set_theme method for declaring reusable themes.

11. Style Chart

Style Chart

Style Chart is a free JavaScript-based charting web service/API for creating hosted charts. It’s also available as a downloadable library in case you want to host your own charts (though you need to register in order to download it). It has the things you’d expect from a robust and configurable charting library such as tooltips, legends, and 19 types of charts including 3D pie, 3D bar graphs and Pareto charts.

12. jqPlot

jqPlot

jqPlot is another jQuery plugin for data visualization developed by Chris Leonello. It’s open source, embodying two sets of licensing: MIT and GPL version 2. It has many options for you to take advantage of in order to truly customize your charts.

13. jQuery Sparklines

jQuery Sparklines

jQuery Sparklines is a simple and lightweight jQuery plugin for charting dynamic sparklines (a condensed data graphic). It emphasizes on ease of use and minimal coding; you can create complex sparklines with as little as one line of JavaScript code. When minified and gzip’ed, the plugin only weights 4.7KB so it won’t bog down your page response times much.

14. jQuery Google Charts

jQuery Google Charts

jQuery Google Charts (abbreviated as jGCharts), developed by Massimiliano Balestrieri, is a data visualization jQuery plugin for working with the Google Charts API. It has plenty of chart types, including a 3D pie chart that’s dynamically generated. It has a GUI in development (still in alpha release), which will allow you to create charts easily with a graphical front-end.

15. Canvas Pie Chart with Tooltips

Canvas Pie Chart with Tooltips

This MooTools class/plugin is for plotting pie charts using the canvas element. It’s based on Canvas pie by Stoyan Stefanov. It’s a simple and straightforward data visualization option for MooTools developers who are only interested in plotting out pie charts.

16. TufteGraph

TufteGraph

TufteGraph is a jQuery plugin that emphasizes on ease of use and minimalism. It offers you only a few options for styling and instead relies on CSS for customizing the look and feel of your graphs, which ultimately means that your web pages will render faster because JS has to work less. Check out this introduction video to TufteGraph.

17. Timeline

Timeline

Timeline is a JavaScript widget for creating interactive timelines. You can scroll through items featured in chronological order by using your mousewheel or by holding down your mouse button on the timeline and dragging left or right. Clicking on a dot, which represents an item in the time line, will reveal more information. Timeline is open source, released under the BSD license.

18. Protovis

Protovis

Protovis is a data visualization library for charting data. Protovis was created by the Stanford Visualization Group. It uses JavaScript and SVG to dynamically plot out your data. Protovis is open source released under the BSD license. You can download the source on their home page.

19. milkchart

milkchart

milkchart is a JavaScript charting/graphing library that requires MooTools. milkchart renders HTML data tables into one of its five types of charts: column, bar, line, scatter, and pie (with future expansions planned for area graphs) using HTML5′s Canvas element. milkchart is open source under the Apache License.

20. Timeplot

Timeplot

Timeplot allows you to dynamically generate time series graphs. Hovering over data points reveals their value. Timeplot was developed as part of the SIMILE Project at MIT. Here’s a step-by-step tutorial on how to utilize Timeplot. Timeplot is open source and available the BSD license. The Timeplot demo and download links are on this page.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

49 Comments

Maor Henry

January 17th, 2010

Amazing! Thanks for sharing! BTW what is your most recommended library of your choice?

izulcybercafe

January 17th, 2010

First.. :p
Great list, thank you….

virua

January 17th, 2010

It looks very interesting! Thanks, very useful list.

Frank

January 17th, 2010

Thank you for this great selection. I played with some of the libs but a lot of stuff is new for me. Looking forward to do some tests with it.

Bill Turner

January 17th, 2010

Not strictly a JS lib, but FusionCharts is accessible via JS and its awesome!

Eric Clemmons

January 17th, 2010

Once again, Highcharts is listed #1 and there’s no mention to DojoX’s excellent charts: http://lazutkin.com/download/hicharts.html & http://docs.dojocampus.org/dojox/charting/

Tutorijali HDonWEB

January 17th, 2010

Those JavaScript libraries are awesome. THX for putting them all in one place Jacob.

BEBEN

January 17th, 2010

ugh!!!
awesome…its a great
thanks ^_^’

designfollow

January 17th, 2010

thank you very much for the great javaScript Libraries

dr john

January 17th, 2010

This is an impressive collection of tools! Javascript has come on quite a bit since the days of pretty stars following the mouse pointer around.

I’ve just this weekend had a need for graphing some data on a web site, and when I get all the figures to play with, I’ll be exploring these with great interest. The only problem I’ll have is choosing which library to use, they are all excellent.

Aidan

January 17th, 2010

This is just a great list of JavaScript libraries. I guess we wouldn’t be able to finish trying all of them. Thanks for sharing, now at least we know where to look for.

Fahd Butt

January 18th, 2010

Which one of these Viz libraries lets you export a visualization as a graphic (png, jpeg etc)?

Thaninrat

January 18th, 2010

Thank you. I have find libraries like this for age.
very useful. ;-)

aditia

January 18th, 2010

cool stuff thanks for posting the list

Matelix

January 18th, 2010

Awesome, looks good

Peter Steenbergen

January 18th, 2010

Nice list. Really like to test out that Highchart, that looks great.

Byron

January 18th, 2010

@Fahd Butt #11 Style Chart http://chart.inetsoft.com does server-side rendering, returning a PNG. You can use it as a service, or download the Java library.

Ivan Lazarevic

January 18th, 2010

Nice list. You should check jqBarGraph [http://workshop.rs/jqbargraph] .

Vijay Patil

January 19th, 2010

You should check out Flot at http://code.google.com/p/flot/ . Uses the canvas, is light & beautiful, and has a rich set of options.

m@

January 20th, 2010

nice collection…..do you know if any of these or of a library that can be fed with an excel spreadsheet?

Jeff Coon

January 21st, 2010

+1 for Protovis

After our eval of many great charting / visualization packages, Protovis stands out. By comparison to many other packages (e.g. jqPlot or Flot), Protovis will initially seem more complex, since it’s providing much lower level control over each discrete element of a chart / visualization. As your requirements evolve and progress into more detailed fine-tuning and pixel-perfect polish work, you’ll find that granular control of each element to be extremely beneficial.

One of the few libraries we found which (wisely) enables you to utilize CSS formatting of your chart elements, which we have found to be a substantial benefit.

Theresa Neil

January 22nd, 2010

Looks like there is a lot of overlap from my December posting in InsideRIA, 28 Rich Data Visualization Tools.

It is great that there are now so many options available.

DeBugger

February 15th, 2010

Hey,

nice list. I am looking for something like http://thejit.org/Jit/Examples/RGraph/example2.html
the problem is that with a large number of elements the system collapse. Does anyone has an idea?

Greetings DeBugger

danvk

February 25th, 2010

Thanks for the dygraphs shout-out! You might want to point the demo link to http://danvk.org/dygraphs/ rather than http://danvk.org/dygraphs/tests/. The former is a demo, while the latter is more of a collection of tests.

Unim Pressed

April 29th, 2010

I might have found all of these with a search engine. Why even bother writing the post if you’re not going to help us differentiate between them in a meaningful way?

Wolfram

December 15th, 2010

I had a pretty good run with processing.js, a port of the Processing Visualization Language by John Resig (jQuery) himself.

Roger

January 18th, 2011

Slightly different to any of these, but still in the visualisation category…a Yahoo pipes-like plugin:

http://jsplumb.org

Andrew

March 18th, 2011

ZingChart is another one to take a look at. Renders both JavaScript and Flash. In addition to Flash, charts can be rendered in HTML5 Canvas, SVG or VML formats for compatibility. (Disclosure: I’m on the team, and can be reached at abegin[at]zingchart.com)

Rich Apodaca

March 19th, 2011

Excellent list – many thanks for putting it together.

Mirko Kiefer

March 20th, 2011

After testing various libraries we came to the same conclusion as Jeff – Protovis rocks!
Its the by far most productive environment if it comes to customizing your visualizations. Even if you need ready-made charts etc. you find great examples on their site.

theWebalyst

March 20th, 2011

Very nice – I love visualisation as it creates meaning out of data by making the most of the human brain’s powerful visual processing ability. The moreso when interactive.

I was only disappointed not to find more variety of visualsation techniques here, especially a lack of entity-relationship handling (in the illustrations at least – I did not check the libraries themselves).

Thanks for this helpful roundup.

W

March 23rd, 2011

Cool stuff! thanks for sharing.

Elycharts

March 26th, 2011

I’m a new javascript SVG/VML charting library too :-)
MIT licensed, RaphaelJS and jQuery based.

It would be cool if this kind of blog posts could give some more useful hints but listing solutions. Classification based on technology used or supported devices/browsers or supported chart types, or library weight, would help

Cooky

March 29th, 2011

Nice article. We are trialing highcharts at the BBC.
http://news.bbc.co.uk/sport1/hi/cricket/9439301.stm

Working well so far. Watch this space.

Tim Holman

May 26th, 2011

Ahhh – Every man loves a good chart. Just what I was looking for.

erik swedberg

June 8th, 2011

and all the kids are talkin’ about:
http://mbostock.github.com/d3/

Catalin Cimpanu

June 10th, 2011

You can also add Uncharted to this list: https://github.com/OiNutter/uncharted

Made with Prototype and Rapahel

Amit

July 18th, 2011

Do u know any php library for reports ??

SF

July 19th, 2011

what library do you recommend to draw this:
http://www.flickr.com/photos/65494656@N08/5956764890/in/photostream

Tried JIT and having issues. Must be a local library.

Nikesh

October 12th, 2011

Hi All,

can some help me to find the library which draws more than 3000 nodes in a graph using canvas and with high performance.

Thanks.

Jos

November 28th, 2011

Here is another javascript visualization library, the CHAP Links library: http://links.sourceforge.net

The library is open source and contains a graph, graph3d, network, timeline, and treegrid.

Ron

November 29th, 2011

good review.

Which of the above libraries support tooltips in bar graph?

Philip Duggen

March 5th, 2013

A great list and here is another one that is 100% pure javascript:-

Active Graphs and Chart
http://jpowered.com/graph_chart_collection/index.htm

Sunil Urs

May 29th, 2013

Here is our new HTML5 & JavaScript based Charting Library.

Home Page:
http://canvasjs.com

Performance Demo:
http://canvasjs.com/docs/charts/intro/high-performance-javascript-charts/

Leave a Comment

Subscribe to the comments on this article.