Best jQuery Chart & Graph Plugins & Tutorials with Demo

    dygraphs JavaScript Visualization Library

    June 19, 2012 | Chart & Graph, Core Java Script
    dygraphs JavaScript Visualization Library

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

    Features

    • Plots time series without using an external server or Flash
    • Works in Internet Explorer (using excanvas)
    • Lightweight (45kb) and responsive
    • Displays values on mouseover (this makes it easily discoverable)
    • Supports error bands around data series
    • Interactive zoom
    • Adjustable averaging period
    • Can intelligently chart fractions
    • Customizable click-through actions
    • Compatible with the Google Visualization API
    • Intelligent defaults make it easy to use
    Read More Demo

    jqBarGraph : jQuery Bar Graph Plugin

    June 2, 2012 | Chart & Graph, Plugins
    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].

    Read More Demo

    Cubism.js : Time Series Visualization Chart

    May 10, 2012 | Chart & Graph, Core Java Script, SVG Tutorial
    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.

    Read More Demo

    RGraph: HTML5 Javascript charts library

    April 30, 2012 | Chart & Graph, Core Java Script, HTML5
    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.

    Read More Demo

    Cytoscape Web : A jQuery plugin that visualises graphs with Demo

    March 30, 2012 | Chart & Graph, Plugins
    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.

    Read More Demo

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

    March 29, 2012 | Chart & Graph, Core Java Script
    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
    Read More Demo

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

    March 6, 2012 | Chart & Graph
    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.

    Read More Demo

    Simile Widgets : JavaScript Interactive Timeline

    February 25, 2012 | Chart & Graph, Core Java Script
    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.

    Read More Demo

    Timeplot : Web Widget for Plotting Time Series Graph

    February 19, 2012 | Chart & Graph, Core Java Script
    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).

    Read More Demo

    Dracula : JavaScript Graph Library

    February 3, 2012 | Chart & Graph, Core Java Script, SVG Tutorial
    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.

    Read More Demo