D3.JS a.k.a Data Driven Documents
D3 complies with web standards and is extremely fast in creating interactive and animated data visualization components using large data sets.
The ecosystem of D3.JS has grown too huge that you find hundreds of plugins and supporting libraries built on top of D3JS. One of the biggest reason for existence of huge list of plugins and supporting libraries is the modular core design of D3.JS that allows code reuse and extension without breaking the core.
Read more about D3.js at official website here – d3js.org.
There are other commercial libraries like FusionCharts and HighCharts that compete with D3.JS and can be used for creating enterprise grade charts and graphs, but none of the mentioned two are free to use for commercial applications.
The popularity and power of HighCharts can be known from the fact that these have been used by the biggies like Facebook and Twitter. Highcharts being a commercial product, offers a lot more than just a data visualization library, one of the good features of Highcharts is “Highcharts Cloud”,, that offers online charts editor and hosting platform.
You can read more about HighCharts at – highcharts.com.
You can read more about FusionCharts at – fusioncharts.com.
It wont be wrong to say that any product from the house of google is for the masses. Google Charts is one of my favorite libraries for all my charting needs. Google charts library is open source and available free to use under creative commons attribution 3.0 license.
With Google charts you can create simple scatter plots as well as hierarchical treemaps, HTML5/SVG based, cross browser compatible, without the need of additional plugins.
With just a few simple steps one can add interactive Google charts to any webpage. Many of these charts come with out of the box zoom and pan functionality. You can also extend other basic charts to add more features, as per the data visualization needs.
When you use Google charts for data visualization, the possibilities are nearly endless, you can always use out of the box charts, customize and develop your own charts or use community contributed charts.
You can check out the Google charts gallery at – Google Charts Gallery.
More about Google charts here – Google Charts.
If you are among many of those enterprises that do not really go well with open source projects, there is no dearth of commercial libraries that would meet almost all of your visualization needs. Two such commercial products are Amcharts and ZingChart.
Amcharts – Amcharts is a very advanced charting library and can be used to create beautiful charts and interactive maps. Apart from the basic graphs like bar, line, area, pie and donut, it also offers step, smoothed line, candlestick, OHLC, Radar, Pola, Bubble, Funnel/Pyramid and Gauges etc. Amcharts also offers stockcharts as a separate product line.
Read more about ZingChart here – zingchart.com.
Chart.js is lightweight yet powerful library for creating charts and graphs. Chart.js is the creation of Front end developer Nick Downie and available as open source under MIT license.
Chart.js is best for you if you have very specific needs and want to use out of the box charts without spending any real efforts. Chart.js comes packed with six different HTML5 charts built using canvas element. All of the six charts are responsive and fit to devices of any size, can be made highly interactive and support animations.
You can get more details on Charts.JS at – chartjs.org.
You can have a look at CanvasJS charts at – canvasjs.com.
EJSchart.js – This one is another commercial library offering free trial and is free for personal use but you need to purchase the license for commercial projects. It is best suited for midsized and enterprise grade data visualization needs.
You can read more about EJSchart at – ejschart.com.
This is one of the best open source charting libraries out there and makes DPI independent responsive charts plotting an absolute breeze. Chartistjs has a very active community and is growing at a much faster rate than other comparable products.
You can find Chartist.js plugins at – chartist-js plugins.
Read more about Chartist.js here at – chartist-js.
Cytoscaep.js is among the new entrants in the game of data visualization. The official website at this hour looks raw but it offers one of the most powerful and comprehensive libraries for building interactive graphs.
The library was originally developed at Donnelley Center and university of Toronto and is backed by funding from the likes of NRNB, NIH and Agilent to name a few.
This one is for Angular lovers, n3-charts is built on top of Angular and D3 and can be used in any angular project with ease. It gives you simple, beautiful and interactive charting options. In the recent release, n3-charts now support zooming, panning and many other new features, out of the box.
n3-charts takes away all the pain of using raw D3.js library and gives you a framework that makes displaying charts on any webpage a breeze, using semantic language. Charting options with n3-charts are limited, but, if your needs are specific then there is no need to look back at D3, Google charts or any other big library.
You can look at the examples here and decide if n3 charts library is suitable for your project – n3-charts examples.
Read more about N3-charts here – n3-charts.
This one is for Ember lovers, Ember charts library is built on top of Ember and D3.js can be used with any ember project with ease. The ember charts library utilizes jQuery and jQquery UI and the key features include labels, mouseover effects, tooltips and legends etc.
The current version of ember Charts comes packed with time series, pie, scatter and bar charts that can be modified and extended with ease.
Read more about Ember Charts here – ember-charts.
jqPlot doesnt compete with the biggies like D3, Google charts, Highcharts etc that offer almost any kind of charting, maps and plotting needs. jqPlot shines when it comes to creating beautiful line, bar and pie charts.
You can read more about jqPlot at official website – jqplot.com.
Elycharts is sponsored by VoxMail and MagNews. It is based on Raphael and jQuery libraries and is free to use under MIT license for personal and commercial applications.
Elycharts offers below chart types as of now –
Go for it if you are looking at simple to use library without all the jazz, well suited for basic data visualization needs.
Read more about Chartkick.js here at – chartkick.
Libraries mentioned in this article have great resources and big ecosystem to get you started within no time. You can easily find tutorials, documentation as well as fully functional code snippets for reference.
As per the needs of your project, you can pick a library that provides ready to use charts and graphs but offer lesser flexibility as well as libraries that let you build your own charts with full flexibility and customization options in your hands.