Best jQuery Chart & Graph Plugins & Tutorials with Demo

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+.

jQuery with Google Charts : gvChart plugin

jQuery with Google Charts : gvChart plugin

gvChart is a jQuery plugin, that uses Google Charts API to create interactive visualization by using data from the HTML table tag.

Its very easy to create charts with gvChart jQuery plugin:

1. Create an HTML table
2. Download and initialize gvChart
3. Connect gvChart to your table

Easily customizable and allows to create Area, Line, Bar, Column and Pie charts.

JSON Driven Zoomable Drill Down Bar Chart: DDChart

JSON Driven Zoomable Drill Down Bar Chart: DDChart

DDChart is a JSON data driven bar chart plugin that creates a classy bar chart with flash like animation effects.

Its a small yet useful bar chart jQuery plugin that is packed with nice features including:

  • Zoom-in / zoom-out effect on bar charts during drilling up / down with flashy animations
  • Bars, legends, and fonts expand and contract to fit their container
  • On load chart recalculations to fit all containers
  • Automatic drill up breadcumb creation

jQuery Highcharts Table

jQuery highcharts convert table into chart graphs

Here at PMSIpilot we wanted to use Highcharts graph library but with a way to convert automatically our HTML tables containing data into graphs.So we decided to code a jQuery plugin to make this conversion peacefully.



Best jQuery websites design awards