Simple & Lightweight Animated Pie Chart Plugin – easy-pie-chart

Looking for a affordable website?

GET STARTED
www.codingexpertz.com
Simple & Lightweight Animated Pie Chart Plugin – easy-pie-chart

File Size: 367KB

Total Views: 2077

Date Created:

Last Modified Date:

Official Website: Go to website

License: MIT

Easy-pie-chart is a very simple, lightweight and highly customizable jQuery plugin that uses HTML5 canvas element to render simple pie charts for single values only. It can create sharp canvas pie chart without any extra effort or coding. It has many customizable options that can easily use to customize the chart appearance as you need.

Features:

  • Easy-pie-chart is a highly customizable plugin.
  • Very easy to implement and customize.
  • Simple and lightweight.
  • Resolution independent (retina optimized)
  • Supports on all major browsers and devices.

framework support

  • Vanilla JS (no dependencies) (~872 bytes)
  • jQuery plugin (~921 bytes)
  • Angular Module (~983 bytes)

Install with Bower

$ bower install jquery.easy-pie-chart

How to use it:

1. Include the Javascript jquery.easypiechart.js at the bottom of the web page.

<script src="/path/to/jquery.easypiechart.js"></script>

2. Add the basic HTML to the page.

<div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>

3. Initialize the plugin and we’re ready to go.

$(function() {
    $('.chart').easyPieChart({
        //your options goes here
    });
});

Vanilla JS

var element = document.querySelector('.chart');
new EasyPieChart(element, {
    // your options goes here
});

AngularJS

<div ng-controller="chartCtrl">
  <div easypiechart options="options" percent="percent"></div>
</div>
var app = angular.module('app', ['easypiechart']);
app.controller('chartCtrl', ['$scope', function ($scope) {
    $scope.percent = 65;
    $scope.options = {
        animate:{
            duration:0,
            enabled:false
        },
        barColor:'#2C3E50',
        scaleColor:false,
        lineWidth:20,
        lineCap:'circle'
    };
}]);

Plugin’s default options:

Property (Type) Default Description
barColor #ef1e25 The color of the curcular bar. You can either pass a valid css color string, or a function that takes the current percentage as a value and returns a valid css color string.
trackColor #f2f2f2 The color of the track, or false to disable rendering.
scaleColor #dfe0e0 The color of the scale lines, false to disable rendering.
scaleLength 5 Length of the scale lines (reduces the radius of the chart).
lineCap round Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
lineWidth 3 Width of the chart line in px.
size 110 Size of the pie chart in px. It will always be a square.
rotate 0 Rotation of the complete chart in degrees.
animate object Object with time in milliseconds and boolean for an animation of the bar growing ({ duration: 1000, enabled: true }), or false to deactivate animations.
easing defaultEasing Easing function or string with the name of a jQuery easing function

Callbacks

Callback(params, …) Description
onStart(from, to) Is called at the start of any animation.
onStep(from, to, currentValue) Is called during animations providing the current value (the method is scoped to the context of th eplugin, so you can access the DOM element via this.el).
onStop(from, to) Is called at the end of any animation.

Plugin api

$(function() {
  // instantiate the plugin
  ...
  // update
  $('.chart').data('easyPieChart').update(40);
  ...
  // disable animation
  $('.chart').data('easyPieChart').disableAnimation();
  ...
  // enable animation
  $('.chart').data('easyPieChart').enableAnimation();
});

Leave a comment

Your email address will not be published. Required fields are marked *

STAYUPDATED

Receive all our future posts instantly in your inbox. Enter your email to enroll.