Animated Interactive Donut Chart with jQuery and Snap.svg

A jQuery & SVG based chart script to draw an interactive donut chart with smooth SVG path animations based on Snap.svg JavaScript SVG library.

How to use it:

1. Create a SVG element for the donut chart.

2. Include the latest version of jQuery library and the snap.svg SVG library at the bottom of the web page.

3. Create your data using JS array object as follows.

var programmingSkills = [ < value: 20, label: 'jQuery', color: '#3399FF' >, < value: 23, label: 'JavaScript', color: '#FFC575' >, < value: 17, label: 'Ruby', color: '#99CC00' >, < value: 22, label: 'Python', color: '#FF3300' >, < value: 18, label: 'CSS3', color: '#944DDB' >, ];

4. Include the SVG donut chart framework and done.

This awesome jQuery plugin is developed by jackmoran. For more Advanced Usages, please check the demo page or visit the official website.

Prev: Github Like jQuery Data Visualization Plugin - Glance Year
Next: Animated Bar Diagram Plugin with jQuery - barGraph

Related jQuery Plugins You Might Also Like Add Your Review Categories:

All jQuery Plugins
Accordion (143)
Animation (1025)
Chart & Graph (208)
CSS3 & Html5 (36)
Form (1476)
Gallery (284)
Layout (482)
LightBox (532)
Loading (314)
Menu & Nav (951)
Mobile (39)
Others (2813)
Rotator (95)
Slider (823)
Slideshow (314)
Social Media (190)
Table (359)
Text (565)
Time & Clock (521)
Tooltip (152)
Zoom (150)

Most Popular In This Category:

Fully Customizable Organisational Chart Plugin With jQuery - OrgChart 140772 views - 12/16/2024
Create An Editable Organization Chart with jQuery orgChart Plugin 88321 views - 10/19/2014
Drag'n'drop Flow Chart Plugin With jQuery And jQuery UI - flowchart.js 77394 views - 05/08/2020
Customizable & Animated jQuery / HTML5 Gauge Meter Plugin 72850 views - 11/28/2023
Simple Bar Chart Plugin with jQuery and Bootstrap - jchart 61346 views - 05/13/2014
Simple SVG Flow Chart Plugin with jQuery - flowSVG 60012 views - 03/10/2015
Drag And Drop Flowchart Builder - Flowy.js 58851 views - 01/02/2021
Morris - Good-looking Charts Plugin With jQuery 57671 views - 07/06/2016
Animated Circle Statistics Plugin With Canvas - Circliful 53278 views - 06/04/2020
Smooth Circle Chart Plugin with jQuery and CSS3 - Circle Charts 50135 views - 01/31/2015
More Popular Plugins

Fully Customizable Organisational Chart Plugin With jQuery - OrgChart 140772 views - 12/16/2024
Dynamic Pie Chart-style Progress Bar with jQuery and SVG - progresspieSVG 16317 views - 03/10/2023
Animated Donut/Pie/Ring Charts With jQuery And SVG - Donutty 16405 views - 10/19/2022
Drag And Drop Flowchart Builder - Flowy.js 58851 views - 01/02/2021
Animated Circle Statistics Plugin With Canvas - Circliful 53278 views - 06/04/2020
Customizable Pie Chart/Round Progress Bar Plugin - easy-pie-chart 17805 views - 07/12/2019
jQuery Plugin for Converting Content into Canvas Element - peity 5644 views - 02/04/2018
Easy and Object Oriented Javscript Chart Library - Chart.js 7954 views - 04/02/2013
More Recommended Plugins

Get Free Updates Get Weekly Email on latest Web & Graphic Design freebies. No spam, we promise! You Might Like: About jQuery Script

Free jQuery Plugins and Tutorials - One of the BEST jQuery websites that provide web designers and developers with a simple way to preview and download a variety of Free jQuery Plugins. More.