This time I will share jQuery Plugin and tutorial about Dynamic Donut / Pie Chart Plugin with jQuery And D3.js – donut-pie-chart.js, hope it will help you in programming stack.
donut-pie-chart.js is a very small jQuery plugin that lets you render dynamic, animated, SVG-based donut / pie charts using d3.js library.
How to use it:
1. Load the necessary jQuery and D3.js JavaScript libraries in the webpage.
1 |
< script src = "/path/to/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/d3.min.js" ></ script > |
2. Download and load the ‘donut-pie-chart.js’ script after jQuery.
1 |
< script src = "donut-pie-chart.min.js" ></ script > |
3. Create a container in which you want to render the donut / pie chart.
1 |
< div class = "exp" ></ div > |
4. Prepare your data you want to present.
2 |
{ "name" : "JavaScript" , "hvalue" : 20 }, |
3 |
{ "name" : "HTML5" , "hvalue" : 2}, |
4 |
{ "name" : "CSS3" , "hvalue" : 25}, |
6 |
{ "name" : "Ruby" , "hvalue" : 5, "color" : "#00ff00" } |
5. Initialize the plugin.
6. Update the chart with custom data.
1 |
$( ".exp" ).donutpie( 'update' , data); |
7. Default options used to customize the plugin.
4 |
tooltipClass : "donut-pie-tooltip-bubble" |
This awesome jQuery plugin is developed by screename. For more Advanced Usages, please check the demo page or visit the official website.