averello/easy-pie-chart-mirror
1
0
Fork 0
mirror of https://github.com/rendro/easy-pie-chart.git synced 2025-12-16 12:00:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

automatic generator: readme

Browse Source
This commit is contained in:
mrzmyr
2014-01-18 22:17:33 +01:00
parent 09ac81f388
commit 4bbbb82751
21 changed files with 403 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
Gruntfile.js
View File

@@ -1,45 +1,51 @@
module.exports = function(grunt) {
var srcDir = 'src/';
var destDir = 'dist/';
var tmpDir = 'tmp/';
var vanillaName = 'easypiechart.js';
var jqueryName = 'jquery.' + vanillaName;
var angularName = 'angular.' + vanillaName;
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cfg: {
filename: 'easypiechart',
amdname: 'EasyPieChart'
},
dirs: {
tmp: 'tmp',
src: 'src',
dest: 'dist',
docs: 'docs',
test: 'test',
demo: 'demo'
},
clean: {
all: [destDir, tmpDir],
tmp: [tmpDir]
all: ['<%= dirs.dest %>/', '<%= dirs.tmp %>/'],
tmp: ['<%= dirs.tmp %>/']
},
concat: {
vanilla: {
src: [
srcDir + 'renderer/canvas.js',
srcDir + vanillaName
'<%= dirs.src %>/renderer/canvas.js',
'<%= dirs.src %>/<%= cfg.filename %>.js'
],
dest: tmpDir + vanillaName
dest: '<%= dirs.tmp %>/<%= cfg.filename %>.js'
},
jquery: {
src: [
srcDir + 'renderer/canvas.js',
srcDir + vanillaName,
srcDir + 'jquery.plugin.js'
'<%= dirs.src %>/renderer/canvas.js',
'<%= dirs.src %>/<%= cfg.filename %>.js',
'<%= dirs.src %>/jquery.plugin.js'
],
dest: tmpDir + jqueryName
dest: '<%= dirs.tmp %>/jquery.<%= cfg.filename %>.js'
},
angular: {
src: [
srcDir + 'angular.directive.js',
srcDir + 'renderer/canvas.js',
srcDir + vanillaName
'<%= dirs.src %>/angular.directive.js',
'<%= dirs.src %>/renderer/canvas.js',
'<%= dirs.src %>/<%= cfg.filename %>.js'
],
dest: tmpDir + angularName
dest: '<%= dirs.tmp %>/angular.<%= cfg.filename %>.js'
}
},
@@ -57,9 +63,9 @@ module.exports = function(grunt) {
},
files: {
src: [
destDir + vanillaName,
destDir + jqueryName,
destDir + angularName
'<%= dirs.dest %>/<%= cfg.filename %>.js',
'<%= dirs.dest %>/jquery.<%= cfg.filename %>.js',
'<%= dirs.dest %>/angular.<%= cfg.filename %>.js'
]
}
},
@@ -71,24 +77,31 @@ module.exports = function(grunt) {
preserveComments: 'some'
},
files: {
'dist/easypiechart.min.js': ['dist/easypiechart.js'],
'dist/jquery.easypiechart.min.js': ['dist/jquery.easypiechart.js'],
'dist/angular.easypiechart.min.js': ['dist/angular.easypiechart.js']
'dist/<%= cfg.filename %>.min.js': ['dist/<%= cfg.filename %>.js'],
'dist/jquery.<%= cfg.filename %>.min.js': ['dist/jquery.<%= cfg.filename %>.js'],
'dist/angular.<%= cfg.filename %>.min.js': ['dist/angular.<%= cfg.filename %>.js']
}
}
},
watch: {
allthethings: {
files: srcDir + '**/*.js',
scripts: {
files: '<%= dirs.src %>/**/*.js',
tasks: ['default'],
options: {
debounceDelay: 250
}
},
less: {
files: 'demo/*.less',
tasks: ['style'],
files: '<%= dirs.demo %>/*.less',
tasks: ['less'],
options: {
debounceDelay: 250
}
},
readme: {
files: '<%= dirs.docs %>/**/*.md',
tasks: ['readme'],
options: {
debounceDelay: 250
}
@@ -96,7 +109,10 @@ module.exports = function(grunt) {
},
jshint: {
files: ['src/*.js', 'test/**/*.js'],
files: [
'<%= dirs.src %>/**/*.js',
'<%= dirs.test %>/**/*.js'
],
options: {}
},
@@ -114,23 +130,23 @@ module.exports = function(grunt) {
less: {
demo: {
files: {
'demo/style.css': ['demo/style.less']
'<%= dirs.demo %>/style.css': ['<%= dirs.demo %>/style.less']
}
}
},
umd: {
vanilla: {
src: tmpDir + vanillaName,
dest: destDir + vanillaName,
objectToExport: 'EasyPieChart',
amdModuleId: 'EasyPieChart',
globalAlias: 'EasyPieChart'
src: '<%= dirs.tmp %>/<%= cfg.filename %>.js',
dest: '<%= dirs.dest %>/<%= cfg.filename %>.js',
objectToExport: '<%= cfg.amdname %>',
amdModuleId: '<%= cfg.amdname %>',
globalAlias: '<%= cfg.amdname %>'
},
jquery: {
src: tmpDir + jqueryName,
dest: destDir + jqueryName,
amdModuleId: 'EasyPieChart',
src: '<%= dirs.tmp %>/jquery.<%= cfg.filename %>.js',
dest: '<%= dirs.dest %>/jquery.<%= cfg.filename %>.js',
amdModuleId: '<%= cfg.amdname %>',
deps: {
'default': ['$'],
amd: ['jquery'],
@@ -139,8 +155,8 @@ module.exports = function(grunt) {
}
},
anuglar: {
src: tmpDir + angularName,
dest: destDir + angularName,
src: '<%= dirs.tmp %>/angular.<%= cfg.filename %>.js',
dest: '<%= dirs.dest %>/angular.<%= cfg.filename %>.js',
amdModuleId: 'EasyPieChart',
deps: {
'default': ['anuglar'],
@@ -152,18 +168,10 @@ module.exports = function(grunt) {
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-banner');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-umd');
// load all installed grunt tasks
require('load-grunt-tasks')(grunt);
// Default task(s).
// task defiinitions
grunt.registerTask('default', [
'clean:all',
'jshint',
@@ -171,11 +179,10 @@ module.exports = function(grunt) {
'umd',
'usebanner',
'uglify',
'clean:tmp'
'clean:tmp',
'readme'
]);
grunt.registerTask('style', ['less']);
grunt.registerTask('test', ['karma:unit']);
grunt.registerTask('all', ['default', 'style']);
grunt.registerTask('all', ['default', 'less']);
};

0
license.txt → LICENSE
View File

104
Readme.md
View File

@@ -1,16 +1,16 @@
## easy pie chart
# easyPieChart
[![Build Status](https://travis-ci.org/rendro/easy-pie-chart.png)](https://travis-ci.org/rendro/easy-pie-chart) [![Dependencies Status](https://david-dm.org/rendro/easy-pie-chart/dev-status.png)](https://david-dm.org/rendro/easy-pie-chart)
> Lightweight plugin to render simple, animated and retina optimized pie charts
easy pie chart is a leightweight plugin to draw simple, animated pie charts for single values.
![Version](http://img.shields.io/version/2.1.3.png?color=green)
[![Build Status](https://travis-ci.org/rendro/easy-pie-chart.png)](https://travis-ci.org/rendro/easy-pie-chart)
[![Dependencies Status](https://david-dm.org/rendro/easy-pie-chart/dev-status.png)](https://david-dm.org/rendro/easy-pie-chart)
[![Analytics](https://ga-beacon.appspot.com/UA-46840672-1/easy-pie-chart/readme)](https://github.com/igrigorik/ga-beacon)
It shipps in three different versions:
* Vanilla JS *(no dependencies)* (~840 bytes)
* jQuery plugin (~890 bytes)
* Angular Module (~970 bytes)
The plugin is:
## Features
[![](https://github.com/rendro/easy-pie-chart/raw/master/demo/img/easy-pie-chart.png)](http://drbl.in/ezuc)
* highly customizable
* very easy to implement
@@ -18,58 +18,56 @@ The plugin is:
* 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)
[![](https://github.com/rendro/easy-pie-chart/raw/master/demo/img/easy-pie-chart.png)](http://drbl.in/ezuc)
#### framework support
* Vanilla JS *(no dependencies)* (~840 bytes)
* jQuery plugin (~890 bytes)
* Angular Module (~970 bytes)
## Get started
### jQuery
To use the easy pie chart plugin you need to load the current version of jQuery (tested with 1.6.4) and the source of the plugin.
#### Installation
You can also use [bower](http://bower.io) to install the component:
```
$ bower install jquery.easy-pie-chart
```
> $ bower install jquery.easy-pie-chart
**How to use the plugin:**
#### 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
<div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/path/to/jquery.easy-pie-chart.js"></script>
```
Finally you have to initialize the plugin with your desired options:
```javascript
$(function() {
$('.chart').easyPieChart({
//your options goes here
<script>
$(function() {
$('.chart').easyPieChart({
//your options goes here
});
});
});
</script>
```
### Vanilla JS
#### Vanilla JS
If you don't want to use jQuery, implement the vanilla JS version without any dependencies:
If you don't want to use jQuery, implement the Vanilla JS version without any dependencies.
```html
<div class="chart" data-percent="73">73%</div>
<script src="/path/to/easy-pie-chart.js"></script>
<script>
var element = document.querySelector('.chart');
new EasyPieChart(element, {
// your options goes here
});
var element = document.querySelector('.chart');
new EasyPieChart(element, {
// your options goes here
});
</script>
```
### Angular Module
Angular module for the easy pie chart plugin
#### AngularJS
```html
<div ng-controller="chartCtrl">
@@ -96,8 +94,9 @@ Angular module for the easy pie chart plugin
</script>
```
## Options parameter
## Options
You can pass these options to the initialize function to set a custom look and feel for the plugin.
<table>
@@ -158,8 +157,9 @@ You can pass these options to the initialize function to set a custom look and f
</tr>
</table>
### Callbacks
## Callbacks
All callbacks will only be called if `animate` is not `false`.
<table>
@@ -182,11 +182,9 @@ All callbacks will only be called if `animate` is not `false`.
</table>
## Plugin API
If you want to update the current percentage of the a pie chart, you can call the `update` method.
### jQuery implementation
## Plugin api
#### jQuery
```javascript
$(function() {
@@ -203,7 +201,7 @@ $(function() {
});
```
### vanilla JS
#### Vanilla JS
```javascript
// instantiate the plugin
@@ -216,13 +214,14 @@ chart.disableAnimation();
chart.enableAnimation();
```
### Angular
#### AngularJS
For a value binding in angular you need to add the `percent` attribute and bind it to your angular controller [as shown above](#angular-module).
For a value binding you need to add the `percent` attribute and bind it to your controller.
## Browser support
Native support:
## Browser Support
Native support
* Chrome
* Safari
@@ -230,16 +229,19 @@ Native support:
* Opera
* Internet Explorer 9+
With [excanvas](https://code.google.com/p/explorercanvas/wiki/Instructions) polyfill:
Support for Internet Explorer 7 and 8 with [excanvas](https://code.google.com/p/explorercanvas/wiki/Instructions) polyfill.
* Internet Explorer 7, 8
## Test
To run the test just use the karma adapter of grunt: `grunt test`
## Credits
## Credits
Thanks to [Rafal Bromirski](http://www.paranoida.com/) for designing [this dribble shot](http://drbl.in/ezuc) which inspired me building this plugin.
[![Analytics](https://ga-beacon.appspot.com/UA-46840672-1/easy-pie-chart/readme)](https://github.com/igrigorik/ga-beacon)
## Copyright
Copyright (c) 2014 Robert Fleischmann, contributors.

16
dist/angular.easypiechart.js vendored
View File

@@ -2,7 +2,7 @@
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.3
**/
@@ -134,18 +134,18 @@ var CanvasRenderer = function(el, options) {
var drawScale = function() {
var offset;
var length;
var i = 24;
var max = 24;
ctx.lineWidth = 1
ctx.lineWidth = 1;
ctx.fillStyle = options.scaleColor;
ctx.save();
for (var i = 24; i > 0; --i) {
if (i%6 === 0) {
for (var i = 24; max > 0; --i) {
if (i % 6 === 0) {
length = options.scaleLength;
offset = 0;
} else {
length = options.scaleLength * .6;
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
@@ -171,8 +171,8 @@ var CanvasRenderer = function(el, options) {
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
options.scaleColor && drawScale();
options.trackColor && drawCircle(options.trackColor, options.lineWidth, 1);
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.lineWidth, 1);
};
/**

4
dist/angular.easypiechart.min.js vendored
View File

@@ -2,8 +2,8 @@
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.3
**/
!function(a,b){"object"==typeof exports?module.exports=b(require("anuglar")):"function"==typeof define&&define.amd?define("EasyPieChart",["anuglar"],b):b(a.anuglar)}(this,function(){"object"==typeof angular&&"object"==typeof angular.version?angular.module("easypiechart",[]).directive("easypiechart",[function(){return{restrict:"A",require:"?ngModel",scope:{percent:"=",options:"="},link:function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0}};angular.extend(d,a.options),a.pieChart=new b(c[0],d),a.$watch("percent",function(b){a.pieChart.update(b)})}}}]):console.log("angular not detected.");var a=function(a,b){var c,d=document.createElement("canvas");"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size,a.appendChild(d);var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c,d=24;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.lineWidth,1)};this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},b=function(b,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof a)d.renderer=a;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=b,this.options=e;for(var a in d)d.hasOwnProperty(a)&&(e[a]=c&&"undefined"!=typeof c[a]?c[a]:d[a],"function"==typeof e[a]&&(e[a]=e[a].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(b,e),this.renderer.draw(f),b.dataset&&b.dataset.percent?this.update(parseFloat(b.dataset.percent)):b.getAttribute&&b.getAttribute("data-percent")&&this.update(parseFloat(b.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()}});
!function(a,b){"object"==typeof exports?module.exports=b(require("anuglar")):"function"==typeof define&&define.amd?define("EasyPieChart",["anuglar"],b):b(a.anuglar)}(this,function(){"object"==typeof angular&&"object"==typeof angular.version?angular.module("easypiechart",[]).directive("easypiechart",[function(){return{restrict:"A",require:"?ngModel",scope:{percent:"=",options:"="},link:function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0}};angular.extend(d,a.options),a.pieChart=new b(c[0],d),a.$watch("percent",function(b){a.pieChart.update(b)})}}}]):console.log("angular not detected.");var a=function(a,b){var c,d=document.createElement("canvas");"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size,a.appendChild(d);var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c,d=24;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var f=24;d>0;--f)f%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.lineWidth,1)};this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},b=function(b,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof a)d.renderer=a;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=b,this.options=e;for(var a in d)d.hasOwnProperty(a)&&(e[a]=c&&"undefined"!=typeof c[a]?c[a]:d[a],"function"==typeof e[a]&&(e[a]=e[a].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(b,e),this.renderer.draw(f),b.dataset&&b.dataset.percent?this.update(parseFloat(b.dataset.percent)):b.getAttribute&&b.getAttribute("data-percent")&&this.update(parseFloat(b.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()}});

16
dist/easypiechart.js vendored
View File

@@ -2,7 +2,7 @@
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.3
**/
@@ -87,18 +87,18 @@ var CanvasRenderer = function(el, options) {
var drawScale = function() {
var offset;
var length;
var i = 24;
var max = 24;
ctx.lineWidth = 1
ctx.lineWidth = 1;
ctx.fillStyle = options.scaleColor;
ctx.save();
for (var i = 24; i > 0; --i) {
if (i%6 === 0) {
for (var i = 24; max > 0; --i) {
if (i % 6 === 0) {
length = options.scaleLength;
offset = 0;
} else {
length = options.scaleLength * .6;
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
@@ -124,8 +124,8 @@ var CanvasRenderer = function(el, options) {
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
options.scaleColor && drawScale();
options.trackColor && drawCircle(options.trackColor, options.lineWidth, 1);
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.lineWidth, 1);
};
/**

4
dist/easypiechart.min.js vendored
View File

@@ -2,8 +2,8 @@
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.3
**/
!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define("EasyPieChart",[],b):a.EasyPieChart=b()}(this,function(){var a=function(a,b){var c,d=document.createElement("canvas");"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size,a.appendChild(d);var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c,d=24;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.lineWidth,1)};this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},b=function(b,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof a)d.renderer=a;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=b,this.options=e;for(var a in d)d.hasOwnProperty(a)&&(e[a]=c&&"undefined"!=typeof c[a]?c[a]:d[a],"function"==typeof e[a]&&(e[a]=e[a].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(b,e),this.renderer.draw(f),b.dataset&&b.dataset.percent?this.update(parseFloat(b.dataset.percent)):b.getAttribute&&b.getAttribute("data-percent")&&this.update(parseFloat(b.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};return b});
!function(a,b){"object"==typeof exports?module.exports=b():"function"==typeof define&&define.amd?define("EasyPieChart",[],b):a.EasyPieChart=b()}(this,function(){var a=function(a,b){var c,d=document.createElement("canvas");"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size,a.appendChild(d);var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c,d=24;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var f=24;d>0;--f)f%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.lineWidth,1)};this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},b=function(b,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof a)d.renderer=a;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=b,this.options=e;for(var a in d)d.hasOwnProperty(a)&&(e[a]=c&&"undefined"!=typeof c[a]?c[a]:d[a],"function"==typeof e[a]&&(e[a]=e[a].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(b,e),this.renderer.draw(f),b.dataset&&b.dataset.percent?this.update(parseFloat(b.dataset.percent)):b.getAttribute&&b.getAttribute("data-percent")&&this.update(parseFloat(b.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};return b});

16
dist/jquery.easypiechart.js vendored
View File

@@ -2,7 +2,7 @@
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.3
**/
@@ -87,18 +87,18 @@ var CanvasRenderer = function(el, options) {
var drawScale = function() {
var offset;
var length;
var i = 24;
var max = 24;
ctx.lineWidth = 1
ctx.lineWidth = 1;
ctx.fillStyle = options.scaleColor;
ctx.save();
for (var i = 24; i > 0; --i) {
if (i%6 === 0) {
for (var i = 24; max > 0; --i) {
if (i % 6 === 0) {
length = options.scaleLength;
offset = 0;
} else {
length = options.scaleLength * .6;
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
@@ -124,8 +124,8 @@ var CanvasRenderer = function(el, options) {
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
options.scaleColor && drawScale();
options.trackColor && drawCircle(options.trackColor, options.lineWidth, 1);
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.lineWidth, 1);
};
/**

4
dist/jquery.easypiechart.min.js vendored
View File

@@ -2,8 +2,8 @@
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.3
**/
!function(a,b){"object"==typeof exports?module.exports=b(require("jquery")):"function"==typeof define&&define.amd?define("EasyPieChart",["jquery"],b):b(a.jQuery)}(this,function(a){var b=function(a,b){var c,d=document.createElement("canvas");"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size,a.appendChild(d);var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c,d=24;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.lineWidth,1)};this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};a.fn.easyPieChart=function(b){return this.each(function(){var d;a.data(this,"easyPieChart")||(d=a.extend({},b,a(this).data()),a.data(this,"easyPieChart",new c(this,d)))})}});
!function(a,b){"object"==typeof exports?module.exports=b(require("jquery")):"function"==typeof define&&define.amd?define("EasyPieChart",["jquery"],b):b(a.jQuery)}(this,function(a){var b=function(a,b){var c,d=document.createElement("canvas");"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size,a.appendChild(d);var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c,d=24;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var f=24;d>0;--f)f%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.lineWidth,1)};this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};a.fn.easyPieChart=function(b){return this.each(function(){var d;a.data(this,"easyPieChart")||(d=a.extend({},b,a(this).data()),a.data(this,"easyPieChart",new c(this,d)))})}});

32
docs/README.tmpl.md Normal file
View File

@@ -0,0 +1,32 @@
# {%= name %}
> {%= description %}
{%= _.doc('bagdes.md') %}
## Features
{%= _.doc("features.md") %}
## Get started
{%= _.doc("get-started.md") %}
## Options
{%= _.doc("options.md") %}
## Callbacks
{%= _.doc("callbacks.md") %}
## Plugin api
{%= _.doc("plugin-api.md") %}
## Browser Support
{%= _.doc("browser-support.md") %}
## Test
{%= _.doc("test.md") %}
## Credits
{%= _.doc("credits.md") %}
## Copyright
{%= copyright %}

4
docs/bagdes.md Normal file
View File

@@ -0,0 +1,4 @@
![Version](http://img.shields.io/version/{%= version %}.png?color=green)
[![Build Status](https://travis-ci.org/rendro/easy-pie-chart.png)](https://travis-ci.org/rendro/easy-pie-chart)
[![Dependencies Status](https://david-dm.org/rendro/easy-pie-chart/dev-status.png)](https://david-dm.org/rendro/easy-pie-chart)
[![Analytics](https://ga-beacon.appspot.com/UA-46840672-1/easy-pie-chart/readme)](https://github.com/igrigorik/ga-beacon)

9
docs/browser-support.md Normal file
View File

@@ -0,0 +1,9 @@
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.

20
docs/callbacks.md Normal file
View File

@@ -0,0 +1,20 @@
All callbacks will only be called if `animate` is not `false`.
<table>
<tr>
<th>Callback(parameter, ...)</th>
<th>Description</th>
</tr>
<tr>
<td><strong>onStart(from, to)</strong></td>
<td>Is called at the start of any animation.</td>
</tr>
<tr>
<td><strong>onStep(from, to, currentValue)</strong></td>
<td>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 <code>this.el</code>).</td>
</tr>
<tr>
<td><strong>onStop(from, to)</strong></td>
<td>Is called at the end of any animation.</td>
</tr>
</table>

1
docs/credits.md Normal file
View File

@@ -0,0 +1 @@
Thanks to [Rafal Bromirski](http://www.paranoida.com/) for designing [this dribble shot](http://drbl.in/ezuc) which inspired me building this plugin.

13
docs/features.md Normal file
View File

@@ -0,0 +1,13 @@
[![](https://github.com/rendro/easy-pie-chart/raw/master/demo/img/easy-pie-chart.png)](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)* (~840 bytes)
* jQuery plugin (~890 bytes)
* Angular Module (~970 bytes)

66
docs/get-started.md Normal file
View File

@@ -0,0 +1,66 @@
### 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
<div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/path/to/jquery.easy-pie-chart.js"></script>
<script>
$(function() {
$('.chart').easyPieChart({
//your options goes here
});
});
</script>
```
### Vanilla JS
If you don't want to use jQuery, implement the Vanilla JS version without any dependencies.
```html
<div class="chart" data-percent="73">73%</div>
<script src="/path/to/easy-pie-chart.js"></script>
<script>
var element = document.querySelector('.chart');
new EasyPieChart(element, {
// your options goes here
});
</script>
```
### AngularJS
```html
<div ng-controller="chartCtrl">
<div easypiechart options="options" percent="percent"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="../dist/angular.easypiechart.min.js"></script>
<script>
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'
};
}]);
</script>
```

59
docs/options.md Normal file
View File

@@ -0,0 +1,59 @@
You can pass these options to the initialize function to set a custom look and feel for the plugin.
<table>
<tr>
<th>Property (Type)</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><strong>barColor</strong></td>
<td>#ef1e25</td>
<td>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.</td>
</tr>
<tr>
<td><strong>trackColor</strong></td>
<td>#f2f2f2</td>
<td>The color of the track, or false to disable rendering.</td>
</tr>
<tr>
<td><strong>scaleColor</strong></td>
<td>#dfe0e0</td>
<td>The color of the scale lines, false to disable rendering.</td>
</tr>
<tr>
<td><strong>scaleLength</strong></td>
<td>5</td>
<td>Length of the scale lines (reduces the radius of the chart).</td>
</tr>
<tr>
<td><strong>lineCap</strong></td>
<td>round</td>
<td>Defines how the ending of the bar line looks like. Possible values are: <code>butt</code>, <code>round</code> and <code>square</code>.</td>
</tr>
<tr>
<td><strong>lineWidth</strong></td>
<td>3</td>
<td>Width of the chart line in px.</td>
</tr>
<tr>
<td><strong>size</strong></td>
<td>110</td>
<td>Size of the pie chart in px. It will always be a square.</td>
</tr>
<tr>
<td><strong>rotate</strong></td>
<td>0</td>
<td>Rotation of the complete chart in degrees.</td>
</tr>
<tr>
<td><strong>animate</strong></td>
<td>object</td>
<td>Object with time in milliseconds and boolean for an animation of the bar growing (<code>{ duration: 1000, enabled: true }</code>), or false to deactivate animations.</td>
</tr>
<tr>
<td><strong>easing</strong></td>
<td>defaultEasing</td>
<td>Easing function or string with the name of a <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jQuery easing function</a></td>
</tr>
</table>

33
docs/plugin-api.md Normal file
View File

@@ -0,0 +1,33 @@
### 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();
```
### AngularJS
For a value binding you need to add the `percent` attribute and bind it to your controller.

1
docs/test.md Normal file
View File

@@ -0,0 +1 @@
To run the test just use the karma adapter of grunt: `grunt test`

12
package.json
View File

@@ -1,7 +1,13 @@
{
"name": "easyPieChart",
"description": "Lightweight plugin to render simple, animated and retina optimized pie charts",
"license": "Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.",
"licenses": [{
"type": "MIT",
"url": "http://www.opensource.org/licenses/mit-license.php"
}, {
"type": "GPL",
"url": "http://www.opensource.org/licenses/gpl-license.php) licenses"
}],
"version": "2.1.3",
"author": {
"name": "Robert Fleischmann",
@@ -35,6 +41,8 @@
"karma": "~0.10.2",
"grunt-karma": "~0.6.2",
"grunt-umd": "~1.6.1",
"requirejs": "~2.1.10"
"requirejs": "~2.1.10",
"grunt-readme": "~0.4.5",
"load-grunt-tasks": "~0.2.1"
}
}

14
src/renderer/canvas.js
View File

@@ -67,18 +67,18 @@ var CanvasRenderer = function(el, options) {
var drawScale = function() {
var offset;
var length;
var i = 24;
var max = 24;
ctx.lineWidth = 1
ctx.lineWidth = 1;
ctx.fillStyle = options.scaleColor;
ctx.save();
for (var i = 24; i > 0; --i) {
if (i%6 === 0) {
for (var i = 24; max > 0; --i) {
if (i % 6 === 0) {
length = options.scaleLength;
offset = 0;
} else {
length = options.scaleLength * .6;
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
@@ -104,8 +104,8 @@ var CanvasRenderer = function(el, options) {
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
options.scaleColor && drawScale();
options.trackColor && drawCircle(options.trackColor, options.lineWidth, 1);
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.lineWidth, 1);
};
/**