This time I will share jQuery Plugin and tutorial about Circular Pie Chart & Progress Bar Plugin with jQuery and Canvas, hope it will help you in programming stack.
A dead simple jQuery plugin that uses HTML5 canvas to render animated, customizable, circular pie chart for representing percentage values or progress status.
How to use it:
1. Load the latest version of jQuery library and the jQuery pie chart plugin at the end of the document.
1 |
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> |
2 |
<script src="js/pie-chart.js"></script> |
2. Define the percentage value using data-percent attribute.
1 |
<div id="example" data-percent="25"> |
3. Initialize the plugin to draw a default pie chart / progress bar on the webpage.
1 |
$('#example').pieChart(); |
4. Show the current percentage value inside the pie chart / progress bar.
1 |
<div id="example" class="pie-title-center" data-percent="25"> |
2 |
<span class="pie-value"></span> |
02 |
display: inline-block; |
5. All configuration options with default values.
05 |
trackColor: '#f9f9f9', |
23 |
easing: function (x, t, b, c, d) { |
26 |
return c / 2 * t * t + b; |
28 |
return -c / 2 * ((--t) * (t - 2) - 1) + b; |
32 |
onStep: function (from, to, currentValue) { |
This awesome jQuery plugin is developed by chenruchang. For more Advanced Usages, please check the demo page or visit the official website.
