Showing the data - Charts

The options to display charts on a web-page are numerous. Since I want this to be a client side action I will limit myself to using a Javascript library. There is an overwhelming amount of Javascript based frameworks that will do just that so it's hard to make a decision on which one to use.


The ones that I considered so far:

jqPlot  . Fully open source library by Chris Leonello .Very nice looking charts. Small and lightweight. Not very actively developed right now, but the core seems pretty complete and bug-free.

Flot.  JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. Although at the time of writing (February 2015) still the library has not hit the 1.0 release, it seems very complete and there is steady development going on. It is used in the Start Bootstrap template. Flot is completely free to use and commercial support is provided on special request to the creator.

morris.js. Another library that is used in the Bootstrap template. Although it looks equally attractive as Flot, it looks like this is one man project and it's not clear where it's heading. Morris.js is a very simple API for drawing line, bar, area and doughnut charts. For full usage instructions and documentation for Morris.js charts, visit http://www.oesmith.co.uk/morris.js/.


Chart.js Chart.js uses the HTML5 canvas element. It's supported in all modern browsers, and polyfills support for IE7/8. It is dependency free and super lightweight. All six core chart types are only 11.01kb when minified, concatenated and served gzipped. It will resize your chart if the browser changes size, along with providing the perfect scale granularity for that size. Development seems pretty active and it's got good documentation.

dygraphs. Handles huge data sets: dygraphs plots millions of points without getting bogged down.
Interactive out of the box: zoom, pan and mouseover are on by default. Strong support for error bars / confidence intervals. Highly customizable: using options and custom callbacks, you can make dygraphs do almost anything.
There's an active community developing and supporting dygraphs, but it's large and can be overwhelming.

Google Charts. Very complete charting library with the added benefit that it is backed by Google. Google Chart requires internet connection and also has some limits on the number of client requests allowed.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. It's very comprehensive and probably overkill if you just want some line-charts.

RGraph.  Javascript library with over 20 chart types that uses the Canvas. Free for non-commercial use, but 99 UKP for a commercial license is not expensive either. It does have the slightly more advanced looks that you find in commercial products.
 

gRaphael. Very slick charts. Based on Raphaël graphics library, which is currently part of the Sencha Labs suite. (commercial). gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. There has not been much development on it for the past 2 years, but the existing version is pretty good.

Ember Charts. Open source repository built with D3.js and Ember.js. It provides time series, bar, pie, and scatter charts that are easily customisable. It uses SVG to render charts.

EJS Chart The charts look clean and readable than most of the older charting libraries. It is also compatible with IE6+ and other older browsers. Here is a list of examples.
EJS Chart comes in free and paid versions. The free version limits you to use maximum of 1 chart per page and 2 series per chart. Single developer license is only US$100,- though.

uvCharts. Based on d3.js and SVG/HTML5 to build charts. 12 chart types, 100+ options. Well documented.

JSCharts. Good looking charts, and from looking at the examples, easy to use. There is a free version that has a watermark on it, and the (single domain) developer version is only US$79,- so that's not to bad.
 
Highcharts. Very comprehensive library. Fully HTML5 based Javascript, and explicit permission to modify and edit the source if needed. Impressive users list (Including Yahoo, Facebook and Visa) . Most charts are interactive and support pan and zoom. Free version available, and single website license for US$90,-