Best jQuery Chart & Graph Plugins & Tutorials with Demo

    Protovis : A graphical approach to visualization with JavaScript

    October 26, 2012 | Animation, Chart & Graph, Core Java Script
    Protovis : A graphical approach to visualization with JavaScript

    Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layoutsto simplify construction.

    Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example.

    Read More Demo

    Pure HTML5 Charts by jqChart for jQuery

    September 28, 2012 | Chart & Graph, HTML5, Plugins
    Pure HTML5 Charts by jqChart for jQuery

    jqChart takes advantages of HTML5 Canvas to deliver high performance client-side charts and graphs across browsers (IE 6+, Firefox, Chrome, Opera, Safari) and devices, including iOS and Android mobile devices. Full Touch support.

    Features:

    • High performance. Uses pure HTML5 Canvas rendering
    • Cross-browser support – tested with IE 6+, Firefox, Chrome, Opera, Safari
    • Supports iOS and Android mobile devices
    • Full Touch Support
    • Bar, Column, Pie, Line, Spline, Area, Scatter, Bubble, Radar, Polar Charts
    • Stock and Candlestick Financial Charts
    • Real-Time Charts
    • Scrolling/Zooming
    • Animations
    Read More 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