Best jQuery Chart & Graph Plugins & Tutorials with Demo

JS Charts : Free JavaScript charts

September 16, 2012 | Chart & Graph, Core Java Script, jSON, XML
JS Charts : Free JavaScript charts

JS Charts is a JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML, JSON or JavaScript Array and your chart is ready!

JS Charts lets you create charts in different templates like bar charts, pie charts or simple line graphs.

Features:

  • You don’t have to write code
  • It’s easy to integrate & customizable
  • You can setup your charts online
  • You can create the three most common types of charts: bar, pie and line
  • Animated line/bar rendering
  • 3D pies and 3D bars
  • It’s compatible with most web browsers
  • You don’t need any server-side plugins/modules
Read More Demo

Bonsai : A JavaScript Graphics Library

September 14, 2012 | Animation, Chart & Graph, Core Java Script
Bonsai : A Graphics Library

Bonsai is a JavaScript graphics library.

Bonsai’s main features include:
  • Architecturally separated runner and renderer
  • iFrame, Worker and Node running contexts
  • Paths
  • Assets (Videos, Images, Fonts, SubMovies)
  • Keyframe and time based animations (easing functions too)
  • Path morphing
Read More Demo

jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML

August 27, 2012 | Animation, Chart & Graph, Drag & Drop, Plugins, SVG Tutorial, Web
jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML

jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML on IE 8 and jQuery.jsPlumb adds an element to the DOM for each Endpoint, Connector and Overlay. So for a connection having visible Endpoints at each end and a label in the middle, jsPlumb adds four elements to the DOM. The actual elements it adds depend on the renderer in use (Canvas/SVG/VML).

Read More Demo

How to Create an Interactive Graph using CSS3 & jQuery

August 25, 2012 | Chart & Graph, CSS2 / CSS3.0, Plugins
How to Create an Interactive Graph using CSS3 & jQuery

In this tutorial we will code an Interactive Graph using jQuery and CSS3. We will use the jQuery’s popular plotting plugin “Flot”. Flot is a pure JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. This plugin is simple but powerful enough to create some nice and interactive graphs. For more info take a look at documentation here. You can find the design of the graphs on Impressionist UImade by Vladimir Kudinov.

Read More Demo

NVD3 : Re-usable charts for d3.js

August 13, 2012 | Chart & Graph, Core Java Script
NVD3 : Re-usable charts for d3.js

This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.

Read More Demo

Easy Pie Chart : jQuery animate nice pie charts with HTML5 canvas element

July 11, 2012 | Chart & Graph, Plugins
jQuery animate nice pie charts plugin with HTML5 canvas element

Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These chars are highly customizable and very easy to implement.To use the easy pie chart plugin you need to load the current version of jQuery (testet with 1.7.2) and the source (css+js) of the plugin.

Read More Demo

AttC : Automatically convert a Html table to Google Chart with jQuery

June 29, 2012 | Chart & Graph, Plugins
AttC : Automatically convert a Html table to Google Chart with jQuery

jQuery based javascript plugin that converts a standard HTML table to an Google visualizations chart and displays it on the page.

Currently converts a table to one of these google charts:

  • bar
  • column
  • area
  • line
  • Pie
Read More Demo

jQuery Mobile Charts

June 21, 2012 | Chart & Graph, jQuery Mobile
jQuery Mobile Charts

Numeric data quickly becomes difficult for us humans to understand. Once the number of rows or columns in a table passes two or three, the meaning quickly becomes harder to grasp. The easiest way to give meaning to numeric data is to display it as a chart. Unfortunately jQuery Mobile doesn’t have any built-in charting capabilities and to the best of my knowledge there isn’t a jQuery Mobile charting plug-in available. But lucky for us, jQuery Mobile is built on top of jQuery and there are several charting plug-ins available for it.

Read More 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