Best jQuery Chart & Graph Plugins & Tutorials with Demo

jqBarGraph : jQuery Bar Graph Plugin

jqBarGraph : jQuery Bar Graph Plugin

jQuery plugin for creating bar graphs from your data. jqBarGraph is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

There is two type of data array for jqBarGraph. First is for simple bar graph type, and second is for multi and stacked bar type.For simple bar graph type data for one bar should look like this: [value, label, color]. Label and color are optional. For multi and stacked type of graph you should send data in next format: [[value1, value2, value3, …, valueN], label].

Cubism.js : Time Series Visualization Chart

Cubism.js : Time Series Visualization Chart

Cubism.js is a plugin for D3.js, a JavaScript visualization library for HTML and SVG, to display time series in real-time. It has built-in support for Graphite and Cube, and can be readily extended to fetch data from other sources. It requests the data incrementally by polling only the most recent values and reduces the load on the server. Charts are rendered incrementally as well by shifting charts one pixel each time to the left.

RGraph: HTML5 Javascript charts library

RGraph: HTML5 Javascript charts library

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.

Cytoscape Web : A jQuery plugin that visualises graphs with Demo

Cytoscape Web : A jQuery plugin that visualises graphs with Demo

Cytoscape Web is an open-source graph visualisation library for the web. It is written in JavaScript as a jQuery library.

Cytoscape Web allows you to easily display graphs in your websites. Because Cytoscape Web allows the user to interact with the graph and the library allows the client to hook into user events, Cytoscape Web is easily integrated into your webapp, especially since Cytoscape Web supports both desktop browsers, like Chrome, and iOS browsers, like on the iPad.

Cytoscape Web also has graph analysis in mind: The library contains a slew of useful functions in graph theory.

sigma.js : A lightweight JavaScript graph drawing library with Demo

sigma.js : A lightweight JavaScript graph drawing library with Demo

sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. sigma.js is mostly inspired by Gephi and the maps of Antonin Rohmer from Linkfluence (one nice example here) – thanks to him also for his wise advices.It has been especially designed to:

  • Display interactively static graphs exported from a graph visualization software – like Gephi
  • Display dynamically graphs that are generated on the fly

Morris.js – A Lightweight Library For Time-Series Graphs with jQuery

Morris.js – A Lightweight Library For Time-Series Graphs with jQuery

Morris.js is a small JavaScript library for visualizing time-series data beautifully.

It is built on top of jQuery + Raphaël and displays the data over an interactive line graph.

The library has a very straightforward API with a single function that requires the data, labels color, line width and few more settings.

Simile Widgets : JavaScript Interactive Timeline

Simile Widgets : JavaScript Interactive Timeline

Timeline is a JavaScript widget for creating interactive timelines. You can scroll through items featured in chronological order by using your mousewheel or by holding down your mouse button on the timeline and dragging left or right. Clicking on a dot, which represents an item in the time line, will reveal more information. Timeline is open source, released under the BSD license.

Timeplot : Web Widget for Plotting Time Series Graph

Timeplot : Web Widget for Plotting Time Series Graph

Timeplot is a DHTML-based AJAXy widget for plotting time series and overlay time-based events over them (with the same data formats that Timeline supports).

Dracula : JavaScript Graph Library

Dracula : JavaScript Graph Library

Dracula is a set of tools to display and layout interactive graphs, along with various related algorithms.No Flash, no Java, no plug-ins. Just plain JavaScript and SVG. The code is released under the MIT license, so commercial use is not a problem.

Open Source Javascript Charting Library – gRaphael

Open Source Javascript Charting Library – gRaphael

gRaphael is an Open Source Javascript Charting Library based on Raphael Javascript Library. It helps you to create stunning static and interactive charts with ease.gRaphaël is cross browser compatible and currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ & Internet Explorer 6.0+.