10 Best jQuery Graph and Chart Plugins with Examples and Demos

10 Best jQuery Graph and Chart Plugins with Examples and Demos

Here is a ultimate list of the best jQuery Graph and Chart Plugins with Example and jquery demo which helps you easy add interactive JavaScript charts and graphs to your web, mobile and enterprise applications.


best-jquery-graph-chart-plugins

There are thousands Javascript chart and graph plotting solutions are being released and available for free online. It can make you crazy to choose which one, so today we rounded up the following15+ Best jQuery Graph and Chart Plugins with Example. Now, You can easily find many very capablecharting libraries. Let’s get started.

Flotr2 Charts and Graphs Plugin

flotr2-charts-and-graphs-plugin-2

Flotr2 is a framework independent library for drawing HTML5 charts and graphs. Flotr2 Charts and Graphs Plugin 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.

MORE/ INFO DEMO

amCharts jQuery Plugin

amcharts-jquery-plugin1

amCharts jQuery Plugin is an advanced charting library that will suit any data visualization need. 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.

DEMO DOWNLOAD

jqPlot

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.

DEMO DOWNLOAD

Awesome Chart JS

Awesome Chart JS

AwesomeChartJS is a simple Javascript library that can be used to create charts based on theHTML5 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.

MORE / INFO DEMO

Highcharts Plugin

Highcharts Plugin

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.

MORE / INFO DEMO

canvasXpress Plugin

canvasXpress

CanvasXpress is a standalone HTML5 graphing library written in Javascript that includes a simple and unobtrusive user interfase to explore complex data sets. CanvasXpress is supported in all major browsers in computers and mobile devices.

MORE / INFO DEMO

Teechart Plugin

Teechart Plugin

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.

MORE / INFO DEMO

Dygraphs plugin

dygraphs plugin

dygraphs is an open source JavaScript library that produces produces interactive, zoomable chartsof 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.

MORE / INFO DEMO

gRaphael Plugin

gRaphael

gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaëlgraphics library. Check out the demos to see static and interactive charts in action. gRaphaëlcurrently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

MORE / INFO DEMO

JSXGraph Plugin

JSXGraph Plugin

JSXGraph 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 plugins are required! Special care has been taken to optimize the performance.

MORE / INFO DEMO

Cubism.js Plugin

Cubism

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.

MORE / INFO DEMO

Rickshaw jQuery Plugin

Rickshaw_plugin2

20 Useful jQuery Chart and Graph Plugins

Justin He September 5, 2012 Web Dev 6 Comments
 

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 Librariesare helpful for JavaScript development as well.

amCharts

jquery chart
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

Rotated Axis Tick Labels  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  Interactive JavaScript charts
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  JavaScript chart
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 for JavaScript
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  Contact
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

D3js  Data Driven Documents
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

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

Cross Browser JavaScript HTML5 Charts  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

Rickshaw
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 JavaScript Visualization Library
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
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
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

Sigmajs
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
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

Humble finance visualization
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
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.

MORE / INFO DEMO

TufteGraph Plugin

TufteGraph Plugin

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 CSSrather than code.

MORE / INFO

Easy Pie Chart

Easy Pie Chart

Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices.

MORE / INFO

Flotr2 Charts and Graphs Plugin

flotr2-charts-and-graphs-plugin-2

Flotr2 is a framework independent library for drawing HTML5 charts and graphs. Flotr2 Charts and Graphs Plugin 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.

MORE / INFO DEMO

 

 

Visit sunny St. George, Utah, USA