20 Useful jQuery Chart and Graph Plugins

Data visualisation is the best way to demonstrate the boring bits of statistics. Apart from Excel, we would like to show data directly from our website, so visitor can interact with the chart and graph to get a clear understanding. Luckily there are many useful jQuery chart plugins and javascript libraries that utilise HTML5 canvas to render all possible charts and graphs. However, it’s still painful to sort out the configurations and connect data with charts, especially real-time ones.

So we rounded up the following 20+ javascript libraries and jQuery plugins for the work of charts and graphs. Some of them are capable of rendering various types, a few of them are good at certain specific type. Let’s get started.

If you’re interested, our previous posts about JavaScript Canvas Libraries and JavaScript UI Libraries are helpful for JavaScript development as well.

amCharts

amCharts offers JavaScript/HTML5 charts for most of your needs. The set includes serial (column, bar, line, area, step line, smoothed line, candlestick and ohlc graphs), pie/donut, radar/polar and xy/scatter/bubble charts.

• Type: Serial (Column, Bar, Line, Area, Step Line, Smoothed Line, Candlestick And Ohlc Graphs), Pie/Donut, Radar/Polar And Xy/Scatter/Bubble Charts
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer. iOS (iPad, iPhone, iPod Touch) and Android Honeycomb.
• License: Free (With Credit Link) and Commercial
• Full List of Examples to Check Out

jqPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. It is able to create beautiful line, bar and pie graphs with many features.

• Type: Line Charts, Scatter Plots And Series Options, Pie And Donut Charts, Bar Charts And Many More
• Browser: IE 7, IE 8, Firefox, Safari, and Opera
• License: MIT and GPL v2
• Full List of Examples to Check Out

Highcharts

Highcharts is a javascript library that offers interactive charts to your website. It supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange and polar chart types.

• Type: Line, Spline, Area, Areaspline, Column, Bar, Pie, Scatter, Angular Gauges, Arearange, Areasplinerange, Columnrange And Polar Chart.
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer (6.0+), iOS (Safari) and Android Browser (Limited Support).
• License: Free for Non-Commercial.
• Full List of Examples to Check Out

JScharts

JS Charts is a JavaScript library based generator for charts. It could draw charts is a simple and easy way. No additional plugins are required. Just prepare data in XML, JSON or JavaScript Array and include the js library, your chart will be ready!

• Type: Bar Charts, Pie Charts Or Simple Line Graphs, And 3D Ones With Multiple Series.
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer (6.0+).
• License: Watermarked Free Version.
• Full List of Examples to Check Out

Teechart

TeeChart provides a complete and easy solution to create charts for environment like .NET, Java, ActiveX, etc controls for business, Real-time, Financial, Scientific and Mobile applications.

• Type: Financial, Bars, Point & Scatter, Circular, Line & Area, Stats, Pie & Donut Chart, 3D and other Miscellaneous ones.
• Browser: Internet Explorer 9.0 (from 6.0 to 8.0 using ExCanvas.js polyfill), Firefox 3.6, Chrome 16.0, Safari 5.0, Opera 11.6, Opera-Mini 5.0, Opera Mobile 10.0,
  iOS Safari 3.2, Android WebKit 2.1
• License: Free for Non-Commercial.
• Full List of Examples to Check Out

CanvasXpress

CanvasXpress is a javascript library based on HTML5 canvas tag. This library is the core visualisation component for the company’s BMS systems biology platform. It can be used for creating your own feature-rich canvas graphing.

• Type: Bar graphs, Line graphs, Bar-line combination, Boxplots, Dotplots, Area graphs, Stacked graphs, Correlation plots, Venn diagrams and many more.
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer.
• License: LGPL3
• Full List of Examples to Check Out

D3JS

D3.js is a powerful javaScript library for creating data visualisation elements. It 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 visualisation components and a data-driven approach to DOM manipulation.

• Type: Charts and Chart Components, Trees and Graphs, Miscellaneous visualizations and many many more!
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer(8.0+).
• License: BSD
• Full List of Examples to Check Out

MorrisJS

Morris is able to make nice graphs and charts in an easy way. It is a lightweight library that uses jQuery and Raphaël to draw time-series graphs.

• Type: Time-based Line Charts.
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer(6.0+). iOS 3+ and Android 3+
• License: BSD
• Examples to Check Out

DHTMLXChart

DHTMLXChart is a Javascript library for generating HTML5 charts. It supports the most common chart types: line, spline, area, bar, pie, donut, scatter, and radar charts. For complex charting needs, you can create a chart series, plotted separately side by side, or stacked.

• Type: line, spline, area, bar, pie, donut, scatter, and radar charts.
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer(6.0+).
• License: GPL and Commercial Available.
• Full List of Examples to Check Out

RGraph

RGraph is a Javascript library to produce interactive charts and graphs for your website using the HTML5 canvas element.

• Type: Bar, line and pie charts, Meters and gauges charts, Planning and management charts, and many more.
• Browser: Firefox 3.0+, Google Chrome 1+, Safari 3+, Opera 9.5+, Internet Explorer 7+, iPhone (text support from iOS v4+), iPad (text support from iOS v4.2+)
• License: Free for Non-Commercial
• Full List of Examples to Check Out

dygraphs

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time-based data series. It is designed to display dense data sets and enable users to explore and interpret them.

• Type: Customised Plotter, Chart, Axis
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer(9.0+), or include excanvas library for IE6-8.
• License: MIT
• Full List of Examples to Check Out

Flotr2

Flotr2 is a library for drawing HTML5 charts and graphs. It is a branch of flotr which removes the Prototype dependency and includes many improvements.

• Type: lines, bars, candles, pies, bubbles
• Browser: Firefox, Chrome, IE6+, Android, iOS
• Full List of Examples to Check Out

Cubism.js

Cubism.js is a D3 plugin for visualising time-based data series. You can use it to construct better realtime dashboards, pulling data from Graphite, Cube and other sources.

• Type: D3 Plugin
• Support: Graphite, Cube and be able to be extended
• License: Apache

Sigma.js

Sigma.js is an lightweight Javascript library to draw graphs, using the HTML5 canvas element.

• Type: Graph visualisation and dynamically generated graph
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer(8.0+).
• License: MIT
• Full List of Examples to Check Out

AwesomeChartJS

AwesomeChartJS is a awesome small and simple Javascript library that creates charts based on the HTML5 canvas element.

• Type: bar, pie, doughnut and Pareto charts.
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer(8.0+).
• License: Apache

HumbleFinance

HumbleFinance is an HTML5 data visualisation tool to demonstrate interactive graphing in HTML5.It is written in Javascript using the Prototype and Flotr libraries.

• Require: Prototype 1.6.1+ and Flotr 2.0
• Browser: FireFox, Safari, Chromium, or IE6+

Rickshaw

Rickshaw is a Javascript toolkit that provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc for interactive charting and graphing.

• Type: Lines, toggles, real-time data, scatter plot, stacked bar and many more.
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer(9.0+).
• License: MIT
• Full List of Examples to Check Out

gRaphaël

gRaphaël is created for you to generate beautiful charts for your websites in an easy an simple way.

• Type: Pie, bar and line charts.
• Browser: Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+
• License: MIT

jQuery HighchartsTable

The HighchartsTable is a very useful plugin that takes data and attributes from a table and parses them to create a chart.

• Type: Series, Lines, Axes, Points, Vertical lines, Pie charts
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer(9.0+)
• License: MIT
• Examples to Check Out

TufteGraph

TufteGraph is different from other charting libraries because its configuration is by dynamic functions, allowing for a really compact API (very few options). Also non-core layout is done via CSS rather than code.

• Type: Bar charts, Stacked Bar, Legend
• Browser: Tested in Firefox 3 and Safari 3.
• License: MIT

jQuery.Gantt

A nice and simple jQuery plugin for generating beautiful Gantt chart.

• Type: Gantt
• Browser: Firefox 4+, Chrome 13+, Safari 5+, Opera 9+, IE 8+
• License: MIT

Easy Pie Chart

EASY PIE CHART is a lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element.

• Type: Animated Pie Chart.
• Browser: Modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer(7.0+)