13 Chart and Graph plotting javascript plugins

Written by Kevin Liew on 21 Feb 2012
210,903 Views • Javascript

There are more and more Javascript chart and graph plotting solutions are being released and available for free online. I work on a complicated graph for a website before, we used highchart as the solution, during that time, there isn't a lot of plugins to choose from, but now, we can easily find many very capable charting libraries. Personally, the rise of this kind of plugins are due to:

  • Flash used to be the best solution, but everyone is moving on from there.
  • Modern browsers and powerful computing make it possible to render live data easily.
  • Maturity of different technologies in drawing vector: VML, SVG and Canvas.

Of course, you need to carefully choose one that fit your requirements. As we mentioned before, they use various technologies, as a result, some plugins support canvas only which require modern browsers, and other combine multiple technologies altogether so it able to work on different platforms and older browsers.

Anyway, in this posts, we have collected 13 Chart and Graph plotting javascript plugins. A few are framework independent and most of them support the basic such as bars, lines, pies and many of them supports even more complicated one such as correlation plots, Venn diagrams, heatmaps, newick trees, 2D-scatter plots, 2D-scatter bubble plots, 3D-scatter plots. Pretty sure you will able to find one that meet your need in this list.

  • FusionChartsFusionChart is the most powerful javascript charting plugin. It supports wide varieties of useful features such as tooltips, clickable legend keys, easy drill-down, zooming, scrolling, export and print. Its cross platform support will enable us implement charts easily on Windows, Mac and mobile platforms. Lastly, if you're familiar with jQuery, it also comes as native jQuery charting plugin. For product demostrations, check out business demos.
  • Flotr2Flotr2Flotr2 is a framework independent library for drawing HTML5 charts and graphs. It is a branch of flotr which removes the Prototype dependency and includes many improvements. It supports lines, bars, candles, pies and bubbles charts. Older browsers such as IE6 are support and as well as mobile platform.
  • Rickshaw RickshawRickshaw is a JavaScript toolkit for creating interactive time series graphs. It relies on D3 visualization library and some extensions require jQuery and jQuery UI.
  • D3D3A famous and efficient visualization library that surprising used by some of the chart plugin in this post. D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.
  • Awesome Chart JSAwesome Chart JSAwesomeChartJS is a simple Javascript library that can be used to create charts based on the HTML 5 canvas element. The main goal during development was to pick sane defaults in order to let the user create simple charts quickly with just a couple of lines of code.
  • canvasXpresscanvasXpressCanvasXpress is a javascript library based on the tag implemented in HTML5. I developed this library as the core visualization component for our BMS systems biology platform. It supports crazy amount of highly complicated charts and graphs.
  • Humble FinanceHumble FinanceHumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on http://finance.google.com/. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis.
  • RGraphRGraph http://www.rgraph.net/RGraph is a HTML5 Javascript charts library that supports over 20 different types of charts. Using the new HTML5 canvas tag, RGraph creates these Javascript charts in the web browser, meaning quicker pages and less web server load. Using RGraph is an easy way of speeding up your website.
  • dygraphsdygraphsdygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them. This is a lightweight solution and works in Internet explorer too.
  • HighChartHighChartHighcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types. A famous chart/graph solution used by many well-known organization such as IBM, NASA, Siemens, HP etc.
  • gRaphaelgRaphaelgRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. Check out the demos to see static and interactive charts in action. gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
  • jqPlotjqPlotjqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features.
  • JS ChartsJS ChartsJS Charts is a JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare chart data in XML, JSON or JavaScript Array and your chart is ready!
  • JSXGraph JSXGraphJSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript, does not rely on any other library, and uses SVG, VML, or canvas. JSXGraph is easy to embed and has a small footprint: less than 100 KByte if embedded in a web page. No plug-ins are required! Special care has been taken to optimize the performance.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Carl 12 years ago
Thanks for the shoutouts. I've got a new version of humble finance coming out soon which generalizes the functionality to build different kinds of interactive graphs. Keep an eye out for that!
Andrew Begin 12 years ago
Check out ZingChart for your next review; HTML5, SVG, VML, Flash, no jQuery or other dependencies. www.zingchart.com.
Paolo 12 years ago
Thank you for the selection, really interesting. I was looking for an application to draw 2d closed curve graph for a website. Graph will be generated by values produces by an online questionnaire
Charts 12 years ago
This list is really very helpful. especially the gRaphael and HighChart just because they are too simple. While browsing through i came across fusion charts that also provide similar services. FusionCharts XT with ASP.NET is a new series through which one can create interactive JavaScript charts. All the charts support interactive options like tooltips, drill-down, exporting as image, PDF, or CSV
Gemma Gibert 12 years ago
Here is another chart you might take a look at, TeeChart, 100% Javascript Charting Library: http://www.steema.com/teechart/html5

Brian. M 12 years ago
Nice collection indeed. Perhaps you have missed out to include FusionCharts.
Paul 12 years ago
Really nice collection, Kevin.
Here is another addition to this list - dhtmlxChart, a Canvas-based JavaScript charting library that supports the main chart types: line, area, bar, pie, radar, and scatter charts. Distributed under GPL v2.
More info and demos: http://www.dhtmlx.com/docs/products/dhtmlxChart/index.shtml
Chris 12 years ago
Thanks for the helpful list. I just would like to add ArcadiaCharts, which seems to be quite easy to use. It looks good, too IMO: www.arcadiacharts.com .
TT 12 years ago
this list is missing FusionCharts, which used to be flash based, but now is javascript only. they have some great demos at http://www.fusioncharts.com/demos
TT 12 years ago
As Bryan mentioned, www.fusioncharts.com is a great option, that I'd have liked to see included. Great list, otherwise.
Jamie 11 years ago
Thanks for a good resource.
KoolChart also looks powerful. It’s a pure JavaScript(HTML5)-based charting engine. The demo is worth seeing. It shows a lot of examples. http://www.koolchart.com/demo
Leonard 11 years ago
I found html5 chart better than these chart. use Canvas cause simple, fast and easy customizing. Try Kool chart.

Free Sample : http://koolchart.com/demo/
Michael McGee 11 years ago
Thank you sir for doing the research for me!