So you have a great idea for a web application or you want to visualize some data for your future blog post and you need chart library. After all how hard can it be to find good one. You start googling and your confused by the variety of other choices you have to make. Maybe you should buy a library or should I use a free one? Are there any free and good ones? Of course there are.

In this post you will find 5 stunning JavaScript chart libraries that make use of  either HTML5 canvas tag or SVG/VML and they need nothing but modern browser. What were the criteria for accepting libraries:

  • free – I mean really free. No watermarks, no hidden payments no functionality restriction and of course Open Source licenses preferred
  • recently updated – you can find many JavaScript chart libraries that are available on the Web but if you get a closer look you’ll notice that many of them are not actively developed. In this case the criteria was a commit into repository in the last six months
  • complete solution/multiple kinds of chart – of course you can choose one library for that kind of chart and the other for another kind but this brings a lot of trouble. Firstly it’s hard to keep all your charts look consistent. You could modify some code and make all used charts look similar but why bother. Remember the 80/20 also known as Pareto’s Principle? In this case making all charts look&feel consistent will take you hell a lot of time.
  • No flash dependency – after all this HTM5 buzz on the Web and the state of current browser HTML5 compatibility I think that it’s a good practice not to make your users install or update anything. Of course there’s this IE case but all presented libraries have fallback for IE.

So let’s explore the amazing world of JavaScript chart libraries.


YUI Charts

Yahoo User Interface library (YUI) is free and open source JavaScript and CSS framework that allows to build rich and interactive web applications. Among many useful components there’s also JavaScript chart library. It’s easy to configure has really neat documentation explaining how to create charts and how to customize them. With clean consistent design and highly configurable widgets yui charts may be a good choice for your use case but you should be aware that YUI Charts are still in beta.

YUI charts offers many charts type which may be configured with tooltips, legends, custom events and more:

  • Line charts supporting multiple data series
  • column charts/stacked column charts
  • stacked area charts
  • pie charts
  • dual axes charts

License
YUI and YUI Charts are published under BSD Open Source License

Homepage
http://yuilibrary.com/yui/docs/charts/

 

Rickshaw is a JavaScript toolkit for creating interactive time series graphs

Rickshaw is more like graphing toolkit then chart library. It provides building blocks that developer needs to create interactive graphs and charts enriched with legends, tooltips, range selectors, smoothing etc. With Rickshaw you can even visualise real time data as show in one of the examples[1]. I must say that Rickshaw’s beautifully designed charts made me fall in love with this library at the first sight. Their homepage provides short tutorial introducing Rickshaw’s basic. It also contains multiple examples how to set up every type of chart and believe me, you will render your first chart in almost no time as even the most complex example[1] fits inside of 100 lines of code.

Rickshaw provides multiple types of charts:

  • line charts
  • area charts/stacked area charts
  • bar/column charts, stacked bar charts
  • scatter plot with multiple series

License
Rickshaw is published under MIT Open Source License

Homepage
http://code.shutterstock.com/rickshaw/
[1]http://code.shutterstock.com/rickshaw/examples/extensions.html


jqPlot

If you look for JavaScrip charting and plotting library for jQuery framework jqPlot will be your choice. The library is equipped in numerous chart style options, automatic trend line computation, tooltips and more. If that is not enough for your needs you can customize jqPlot further through so called “renderers”.

With jqPlot you can draw:

  • Line Charts
  • Bar charts/stacked bar charts
  • Candlestick charts
  • Pie Charts/ donut plots
  • bubble charts


License
jqPlot is licensed under GPL and MIT Open Source Licenses

Homepage

http://www.jqplot.com/

 

gRaphaël—JavaScript Library

gRaphael is a JavaScript chart library based on SVG/VML drawing  framework Raphael, what a coincidence, isn’t it? It seems that both libraries became part of Sencha Labs and they are not developed eagerly lately. Still it’s a good library if you need nice looking simple charts without all those advanced features.

gRaphael offers 4 types of charts to which you can add legend and tool tips:

  • Pie Chart
  • Bar Chart
  • Line Chart
  • Dot Chart

License
gRaphael is published under MIT Open Source license

Homepage
http://g.raphaeljs.com/


Google Chart Tools

This one is the most extensive library of charts available on the Web. It provides variety of customizable chart that are rendered with HTML5 or SVG technologies and what is more are claimed to be compatible with iOS and new Android releases. It’s worth to mention that unlike the deprecated Google Chart API charts are rendered on the client side and no data is send to Google servers to be processed. While using Google Chart Tools you may create data object directly on the page or you can use Chart Tool Datasource protocol and if your lucky enough that your application is Java/Python based you can download a helper library for CTD.

Among huge collection of chart types you’ll find:

  • Area charts
  • Bar charts
  • Bubble charts
  • Candlestick Charts
  • Column Charts
  • Combo Charts
  • Gauge Charts
  • Geo Charts
  • Line Charts
  • Pie Charts
  • Scatter Charts
  • Stepped Area Charts
  • Tree Maps
  • and many more


License
Google APIs Terms of Service

Homepage

https://developers.google.com/chart/

Conclusion

So here they are 5 amazing JavaScript chart libraries for you to chose. Have fun exploring the world of charts and plots without flash or any other plugin. Oh, and if you liked this article please share it or comment. Thanks!