Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rendro/easy-pie-chart
easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values
https://github.com/rendro/easy-pie-chart
Last synced: about 2 months ago
JSON representation
easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values
- Host: GitHub
- URL: https://github.com/rendro/easy-pie-chart
- Owner: rendro
- License: mit
- Created: 2012-07-04T23:02:25.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2019-10-07T13:23:53.000Z (almost 5 years ago)
- Last Synced: 2024-05-22T12:43:32.235Z (4 months ago)
- Language: JavaScript
- Homepage: http://rendro.github.io/easy-pie-chart
- Size: 358 KB
- Stars: 2,075
- Watchers: 105
- Forks: 503
- Open Issues: 93
-
Metadata Files:
- Readme: Readme.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
- awesome-canvas - easy-pie-chart - easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values.   (Libraries / Charts Libraries)
README
# easy-pie-chart
> Lightweight plugin to render simple, animated and retina optimized pie charts
[](https://travis-ci.org/rendro/easy-pie-chart)
[](https://david-dm.org/rendro/easy-pie-chart)
[](https://github.com/igrigorik/ga-beacon)
## Features
[](http://drbl.in/ezuc)
* highly customizable
* very easy to implement
* resolution independent (retina optimized)
* uses `requestAnimationFrame` for smooth animations on modern devices and
* works in all modern browsers, even in IE7+ with [excanvas](https://code.google.com/p/explorercanvas/wiki/Instructions)
#### framework support
* Vanilla JS *(no dependencies)* (~872 bytes)
* jQuery plugin (~921 bytes)
* Angular Module (~983 bytes)
## Get started
#### Installation
You can also use [bower](http://bower.io) to install the component:
```
$ bower install jquery.easy-pie-chart
```
#### jQuery
To use the easy pie chart plugin you need to load the current version of jQuery (> 1.6.4) and the source of the plugin.
```html
73%
$(function() {
$('.chart').easyPieChart({
//your options goes here
});
});
```
#### Vanilla JS
If you don't want to use jQuery, implement the Vanilla JS version without any dependencies.
```html
73%
var element = document.querySelector('.chart');
new EasyPieChart(element, {
// your options goes here
});
```
#### AngularJS
```html
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'
};
}]);
```
## Options
You can pass these options to the initialize function to set a custom look and feel for the plugin.
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
All callbacks will only be called if `animate` is not `false`.
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
#### jQuery
```javascript
$(function() {
// instantiate the plugin
...
// update
$('.chart').data('easyPieChart').update(40);
...
// disable animation
$('.chart').data('easyPieChart').disableAnimation();
...
// enable animation
$('.chart').data('easyPieChart').enableAnimation();
});
```
#### Vanilla JS
```javascript
// instantiate the plugin
var chart = new EasyPieChart(element, options);
// update
chart.update(40);
// disable animation
chart.disableAnimation();
// enable animation
chart.enableAnimation();
```
###### Using a gradient
```javascript
new EasyPieChart(element, {
barColor: function(percent) {
var ctx = this.renderer.getCtx();
var canvas = this.renderer.getCanvas();
var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop(0, "#ffe57e");
gradient.addColorStop(1, "#de5900");
return gradient;
}
});
```
#### AngularJS
For a value binding you need to add the `percent` attribute and bind it to your controller.
#### RequireJS
When using [RequireJS](http://requirejs.org) you can define your own name. Examples can be found in the `demo/requirejs.html`.
## Browser Support
Native support
* Chrome
* Safari
* FireFox
* Opera
* Internet Explorer 9+
Support for Internet Explorer 7 and 8 with [excanvas](https://code.google.com/p/explorercanvas/wiki/Instructions) polyfill.
## Test
To run the test just use the karma adapter of grunt: `grunt test`
## Credits
Thanks to [Rafal Bromirski](http://www.paranoida.com/) for designing [this dribble shot](http://drbl.in/ezuc) which inspired me building this plugin.
## Copyright
Copyright (c) 2015 Robert Fleischmann, contributors. Released under the MIT, GPL licenses