https://edicionessemergen.com/assets/easy-pie-chart/js/jquery.easypiechart.js

1/**!
2 * easyPieChart
3 * Lightweight plugin to render simple, animated and retina optimized pie charts
4 *
5 * @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.
6 * @author Robert Fleischmann <[email protected]> (http://robert-fleischmann.de)
7 * @version 2.1.3
8 **/
9
10(function(root, factory) {
11    if(typeof exports === 'object') {
12        module.exports = factory(require('jquery'));
13    }
14    else if(typeof define === 'function' && define.amd) {
15        define('EasyPieChart', ['jquery'], factory);
16    }
17    else {
18        factory(root.jQuery);
19    }
20}(this, function($) {
21/**
22 * Renderer to render the chart on a canvas object
23 * @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
24 * @param {object}     options options object of the plugin
25 */
26var CanvasRenderer = function(el, options) {
27	var cachedBackground;
28	var canvas = document.createElement('canvas');
29
30	if (typeof(G_vmlCanvasManager) !== 'undefined') {
31		G_vmlCanvasManager.initElement(canvas);
32	}
33
34	var ctx = canvas.getContext('2d');
35
36	canvas.width = canvas.height = options.size;
37
38	el.appendChild(canvas);
39
40	// canvas on retina devices
41	var scaleBy = 1;
42	if (window.devicePixelRatio > 1) {
43		scaleBy = window.devicePixelRatio;
44		canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
45		canvas.width = canvas.height = options.size * scaleBy;
46		ctx.scale(scaleBy, scaleBy);
47	}
48
49	// move 0,0 coordinates to the center
50	ctx.translate(options.size / 2, options.size / 2);
51
52	// rotate canvas -90deg
53	ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
54
55	var radius = (options.size - options.lineWidth) / 2;
56	if (options.scaleColor && options.scaleLength) {
57		radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
58	}
59
60	// IE polyfill for Date
61	Date.now = Date.now || function() {
62		return +(new Date());
63	};
64
65	/**
66	 * Draw a circle around the center of the canvas
67	 * @param {strong} color     Valid CSS color string
68	 * @param {number} lineWidth Width of the line in px
69	 * @param {number} percent   Percentage to draw (float between -1 and 1)
70	 */
71	var drawCircle = function(color, lineWidth, percent) {
72		percent = Math.min(Math.max(-1, percent || 0), 1);
73		var isNegative = percent <= 0 ? true : false;
74
75		ctx.beginPath();
76		ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
77
78		ctx.strokeStyle = color;
79		ctx.lineWidth = lineWidth;
80
81		ctx.stroke();
82	};
83
84	/**
85	 * Draw the scale of the chart
86	 */
87	var drawScale = function() {
88		var offset;
89		var length;
90		var i = 24;
91
92		ctx.lineWidth = 1
93		ctx.fillStyle = options.scaleColor;
94
95		ctx.save();
96		for (var i = 24; i > 0; --i) {
97			if (i%6 === 0) {
98				length = options.scaleLength;
99				offset = 0;
100			} else {
101				length = options.scaleLength * .6;
102				offset = options.scaleLength - length;
103			}
104			ctx.fillRect(-options.size/2 + offset, 0, length, 1);
105			ctx.rotate(Math.PI / 12);
106		}
107		ctx.restore();
108	};
109
110	/**
111	 * Request animation frame wrapper with polyfill
112	 * @return {function} Request animation frame method or timeout fallback
113	 */
114	var reqAnimationFrame = (function() {
115		return  window.requestAnimationFrame ||
116				window.webkitRequestAnimationFrame ||
117				window.mozRequestAnimationFrame ||
118				function(callback) {
119					window.setTimeout(callback, 1000 / 60);
120				};
121	}());
122
123	/**
124	 * Draw the background of the plugin including the scale and the track
125	 */
126	var drawBackground = function() {
127		options.scaleColor && drawScale();
128		options.trackColor && drawCircle(options.trackColor, options.lineWidth, 1);
129	};
130
131	/**
132	 * Clear the complete canvas
133	 */
134	this.clear = function() {
135		ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
136	};
137
138	/**
139	 * Draw the complete chart
140	 * @param {number} percent Percent shown by the chart between -100 and 100
141	 */
142	this.draw = function(percent) {
143		// do we need to render a background
144		if (!!options.scaleColor || !!options.trackColor) {
145			// getImageData and putImageData are supported
146			if (ctx.getImageData && ctx.putImageData) {

147				if (!cachedBackground) {
148					drawBackground();
149					cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
150				} else {
151					ctx.putImageData(cachedBackground, 0, 0);
152				}
153			} else {
154				this.clear();
155				drawBackground();
156			}
157		} else {
158			this.clear();
159		}
160
161		ctx.lineCap = options.lineCap;
162
163		// if barcolor is a function execute it and pass the percent as a value
164		var color;
165		if (typeof(options.barColor) === 'function') {
166			color = options.barColor(percent);
167		} else {
168			color = options.barColor;
169		}
170
171		// draw bar
172		drawCircle(color, options.lineWidth, percent / 100);
173	}.bind(this);
174
175	/**
176	 * Animate from some percent to some other percentage
177	 * @param {number} from Starting percentage
178	 * @param {number} to   Final percentage
179	 */
180	this.animate = function(from, to) {
181		var startTime = Date.now();
182		options.onStart(from, to);
183		var animation = function() {
184			var process = Math.min(Date.now() - startTime, options.animate);
185			var currentValue = options.easing(this, process, from, to - from, options.animate);
186			this.draw(currentValue);
187			options.onStep(from, to, currentValue);
188			if (process >= options.animate) {
189				options.onStop(from, to);
190			} else {
191				reqAnimationFrame(animation);
192			}
193		}.bind(this);
194
195		reqAnimationFrame(animation);
196	}.bind(this);
197};
198
199var EasyPieChart = function(el, opts) {
200	var defaultOptions = {
201		barColor: '#ef1e25',
202		trackColor: '#f9f9f9',
203		scaleColor: '#dfe0e0',
204		scaleLength: 5,
205		lineCap: 'round',
206		lineWidth: 3,
207		size: 110,
208		rotate: 0,
209		animate: 1000,
210		easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
211			t = t / (d/2);
212			if (t < 1) {
213				return c / 2 * t * t + b;
214			}
215			return -c/2 * ((--t)*(t-2) - 1) + b;
216		},
217		onStart: function(from, to) {
218			return;
219		},
220		onStep: function(from, to, currentValue) {
221			return;
222		},
223		onStop: function(from, to) {
224			return;
225		}
226	};
227
228	// detect present renderer
229	if (typeof(CanvasRenderer) !== 'undefined') {
230		defaultOptions.renderer = CanvasRenderer;
231	} else if (typeof(SVGRenderer) !== 'undefined') {
232		defaultOptions.renderer = SVGRenderer;
233	} else {
234		throw new Error('Please load either the SVG- or the CanvasRenderer');
235	}
236
237	var options = {};
238	var currentValue = 0;
239
240	/**
241	 * Initialize the plugin by creating the options object and initialize rendering
242	 */
243	var init = function() {
244		this.el = el;
245		this.options = options;
246
247		// merge user options into default options
248		for (var i in defaultOptions) {
249			if (defaultOptions.hasOwnProperty(i)) {
250				options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
251				if (typeof(options[i]) === 'function') {
252					options[i] = options[i].bind(this);
253				}
254			}
255		}
256
257		// check for jQuery easing
258		if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
259			options.easing = jQuery.easing[options.easing];
260		} else {
261			options.easing = defaultOptions.easing;
262		}
263
264		// create renderer
265		this.renderer = new options.renderer(el, options);
266
267		// initial draw
268		this.renderer.draw(currentValue);
269
270		// initial update
271		if (el.dataset && el.dataset.percent) {
272			this.update(parseFloat(el.dataset.percent));
273		} else if (el.getAttribute && el.getAttribute('data-percent')) {
274			this.update(parseFloat(el.getAttribute('data-percent')));
275		}
276	}.bind(this);
277
278	/**
279	 * Update the value of the chart
280	 * @param  {number} newValue Number between 0 and 100
281	 * @return {object}          Instance of the plugin for method chaining
282	 */
283	this.update = function(newValue) {
284		newValue = parseFloat(newValue);
285		if (options.animate) {
286			this.renderer.animate(currentValue, newValue);
287		} else {
288			this.renderer.draw(newValue);
289		}
290		currentValue = newValue;
291		return this;
292	}.bind(this);
293
294	init();
295};
296
297$.fn.easyPieChart = function(options) {
298	return this.each(function() {
299		var instanceOptions;
300
301		if (!$.data(this, 'easyPieChart')) {
302			instanceOptions = $.extend({}, options, $(this).data());
303			$.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
304		}
305	});
306};
307
308}));