jQuery Chart & Graph Plugin & Tutorials with Example

TableBarChart : jQuery Bar Chart plugin from existing HTML Tables

TableBarChart : jQuery Bar Chart plugin from existing HTML Tables

A very simple jQuery plugin to render bar chart from existing HTML tables.

  • Easy to use (no extra javascript code to define data).
  • Animation (at display time and hovering on legend item)
  • Popup for value of each bar
  • Support group by table column (default) or table row
  • Tested on IE, Firefox, Chrome.

Bobbograph : jQuery cross-browser canvas-based Graphing library

Bobbograph : jQuery cross-browser canvas-based Graphing library

Bobbograph is a highly configurable Canvas-based graphing library for jQuery. It provides you with the power to render great looking graphs across all modern browsers. Bobbograph is also built to utilize Excanvas for older versions of IE that do not support Canvas.

OSG.JS : OpenSceneGraph JavaScript WebGL framework

OSG.JS : OpenSceneGraph JavaScript WebGL framework

OSGJS is a WebGL framework based on OpenSceneGraph concepts. It allows an individual to use an “OpenSceneGraph-like” toolbox to interact with WebGL via JavaScript, and provides facilities for exporting various assets to the osgjs format. The API is kept as similar to OpenSceneGraph as possible, providing a familiar environment to veterans of the library and introducing newcomers to a popular and heavily-scrutinzed set of interfaces

Infographic Charts and Graphics HTML Tags Library

Infographic Charts and Graphics HTML Tags Library

This custom JS charting library created by PSDDude from 0 implements custom HTML tags which allow creating charts and graphs for infographics.

It is a light-weight, pure JavaScript charting library (NO jQuery or other libraries required) which makes use of HTML5 technologies and works on all modern browsers including IE, Chrome, Firefox, Opera, Safari.To use it you do not need to know any JavaScript, as all the charts are added as HTML tags. You can follow the very straight forward documentation which also contains examples.

The library allows creating: – Piecharts and doughnuts – Shape graphs – you can transform any image(PNG) into a graph – Shape bar graphs – use any image (PNG) to construct a bar chart – Line graphs – Barchart graphs

Chart.js: Simple HTML5 Charts using the Canvas element

Chart.js: Simple HTML5 Charts using the Canvas element

Chart.js easy, object oriented JavaScript charting libaray with html5 canvas for designers and developers. It currently supports 6 chart types (line, bar, radar, pie, column and polar area) and all this comes in a standalone, <5kb package.

xCharts : D3-based library for building custom Charts and Graphs

xCharts : D3-based library for building custom Charts and Graphs

xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.

jQuery Flot Animator

jQuery Flot Animator

Flot Animator is a free jQuery plugin that will add smooth or gradual animations to Flot charts.It will allow you to highlight and draw attention to some charts and/or series by easily adding animation to your existing charts.

This plugin will read the original data array and will build a second array containing all the frames needed for the animation: the new array length will be equal the total animation frames.

Rickshaw.Graph : JavaScript toolkit for real-time Graphs

Rickshaw.Graph : JavaScript toolkit for real-time Graphs

JavaScript toolkit for creating interactive real-time graphs.Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together.It’s all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Customize all you like with techniques you already know.

A few extensions require jQuery, but here all we need is d3 and the Rickshaw library itself. Instantiate a graph, and then render it. For more along this path, check out the tutorial and also see our examples listing.

jKit : jQuery based UI Toolkit

jKit : jQuery based UI Toolkit

A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things!

Flot : JavaScript plotting library for jQuery

Flot : JavaScript plotting library for jQuery

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Just include the Javascript file after you’ve included jQuery.Generally, all browsers that support the HTML5 canvas tag are supported.For support for Internet Explorer < 9, you can use Excanvas, a canvas emulator; this is used in the examples bundled with Flot. it’s not working on your development IE 6.0, check that it has support for VML which Excanvas is relying on. It appears that some stripped down versions used for test environments on virtual machines lack the VML support.



Best jQuery websites design awards