easy pie chart - Download Customizable Pie Chart/Round Progress Bar Plugin - easy-pie-chart

Download Customizable Pie Chart/Round Progress Bar Plugin – easy-pie-chart

By Posted on

This time I will share jQuery Plugin and tutorial about Customizable Pie Chart/Round Progress Bar Plugin – easy-pie-chart, hope it will help you in programming stack.

easy pie chart - Download Customizable Pie Chart/Round Progress Bar Plugin - easy-pie-chart
File Size: 67.2 KB
Views Total: 9147
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

easy-pie-chart is a lightweight JavaScript/jQuery plugin to draw animated, customizable, retina-ready pie/ring charts and circular progress bars using HTML5 Canvas and requestAnimationFrame API.

How to use it:

1. Load the easy-pie-chart plugin in the document.

view source
1 <!-- Vanilla JavaScript -->
2 <script src="dist/easypiechart.js"></script>
3  
4 <!-- As a jQuery plugin -->
5 <script src="/path/to/cdn/jquery.min.js"></script>
6 <script src="dist/jquery.easypiechart.js"></script>

2. Create the HTML for the easy pie chart and define the percent in the data-percent attribute.

view source
1 <span class="chart" data-percent="86">
2   <span class="percent"></span>
3 </span>

3. Initialize the plugin with default settings.

view source
01 // Vanilla JavaScript
02 const myChart = new EasyPieChart(document.querySelector('.chart'), {
03       // options here
04 });
05  
06 // jQuery
07 $(function() {
08   $('.chart').easyPieChart({
09     // options here
10   });
11 });

4. Possible options to customize the easy pie chart.

view source
01 $(function() {
02   $('.chart').easyPieChart({
03     barColor: '#ef1e25',
04     trackColor: '#f9f9f9',
05     scaleColor: '#dfe0e0',
06     scaleLength: 5,
07     lineCap: 'round',
08     lineWidth: 3,
09     trackWidth: undefined,
10     size: 110,
11     rotate: 0, // in degrees
12     animate: {
13       duration: 1000,
14       enabled: true
15     },
16     easing: function (x, t, b, c, d) { // easing function
17       t = t / (d/2);
18       if (t < 1) {
19         return c / 2 * t * t + b;
20       }
21       return -c/2 * ((--t)*(t-2) - 1) + b;
22     }
23   });
24 });

5. Callbacks & event handlers.

view source
01 $(function() {
02   $('.chart').easyPieChart({
03     onStart: function(from, to) {
04       return;
05     },
06     onStep: function(from, to, currentValue) {
07       return;
08     },
09     onStop: function(from, to) {
10       return;
11     }
12   });
13 });

6. API methods.

view source
1 // up<a href="https://www.jqueryscript.net/time-clock/">date</a> the chart
2 chart.update(40);
3  
4 // disable the animation
5 chart.disable<a href="https://www.jqueryscript.net/animation/">Animation</a>();
6  
7 // enable the animation
8 chart.enableAnimation();

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

source : jquery.net

Related posts: