https://www.gradinita-gifted.ro/i/jquery.easypiechart.js.download

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

162				if (!cachedBackground) {
163					drawBackground();
164					cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
165				} else {
166					ctx.putImageData(cachedBackground, 0, 0);
167				}
168			} else {
169				this.clear();
170				drawBackground();
171			}
172		} else {
173			this.clear();
174		}
175
176		ctx.lineCap = options.lineCap;
177
178		// if barcolor is a function execute it and pass the percent as a value
179		var color;
180		if (typeof(options.barColor) === 'function') {
181			color = options.barColor(percent);
182		} else {
183			color = options.barColor;
184		}
185
186		// draw bar
187		drawCircle(color, options.lineWidth, percent / 100, options.barAlpha );
188	}.bind(this);
189
190	/**
191	 * Animate from some percent to some other percentage
192	 * @param {number} from Starting percentage
193	 * @param {number} to   Final percentage
194	 */
195	this.animate = function(from, to) {
196		var startTime = Date.now();
197		options.onStart(from, to);
198		var animation = function() {
199			var process = Math.min(Date.now() - startTime, options.animate.duration);
200			var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
201			this.draw(currentValue);
202			options.onStep(from, to, currentValue);
203			if (process >= options.animate.duration) {
204				options.onStop(from, to);
205			} else {
206				reqAnimationFrame(animation);
207			}
208		}.bind(this);
209
210		reqAnimationFrame(animation);
211	}.bind(this);
212};
213
214var EasyPieChart = function(el, opts) {
215	var defaultOptions = {
216		barColor: '#ef1e25',
217		barAlpha: 1.0,
218		trackColor: '#f9f9f9',
219		trackAlpha: 1.0,
220		scaleColor: '#dfe0e0',
221		scaleLength: 5,
222		lineCap: 'round',
223		lineWidth: 3,
224		size: 110,
225		rotate: 0,
226		render: true,
227		animate: {
228			duration: 1000,
229			enabled: true
230		},
231		easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
232			t = t / (d/2);
233			if (t < 1) {
234				return c / 2 * t * t + b;
235			}
236			return -c/2 * ((--t)*(t-2) - 1) + b;
237		},
238		onStart: function(from, to) {
239			return;
240		},
241		onStep: function(from, to, currentValue) {
242			return;
243		},
244		onStop: function(from, to) {
245			return;
246		}
247	};
248
249	// detect present renderer
250	if (typeof(CanvasRenderer) !== 'undefined') {
251		defaultOptions.renderer = CanvasRenderer;
252	} else if (typeof(SVGRenderer) !== 'undefined') {
253		defaultOptions.renderer = SVGRenderer;
254	} else {
255		throw new Error('Please load either the SVG- or the CanvasRenderer');
256	}
257
258	var options = {};
259	var currentValue = 0;
260
261	/**
262	 * Initialize the plugin by creating the options object and initialize rendering
263	 */
264	var init = function() {
265		this.el = el;
266		this.options = options;
267
268		// merge user options into default options
269		for (var i in defaultOptions) {
270			if (defaultOptions.hasOwnProperty(i)) {
271				options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
272				if (typeof(options[i]) === 'function') {
273					options[i] = options[i].bind(this);
274				}
275			}
276		}
277
278		// check for jQuery easing
279		if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
280			options.easing = jQuery.easing[options.easing];
281		} else {
282			options.easing = defaultOptions.easing;
283		}
284
285		// process earlier animate option to avoid bc breaks
286		if (typeof(options.animate) === 'number') {
287			options.animate = {
288				duration: options.animate,
289				enabled: true
290			};
291		}
292
293		if (typeof(options.animate) === 'boolean' && !options.animate) {
294			options.animate = {
295				duration: 1000,
296				enabled: options.animate
297			};
298		}
299
300		// create renderer
301		this.renderer = new options.renderer(el, options);
302
303		// initial draw
304		this.renderer.draw(currentValue);
305
306		// initial update
307		if (el.dataset && el.dataset.percent) {
308			this.update(parseFloat(el.dataset.percent));
309		} else if (el.getAttribute && el.getAttribute('data-percent')) {
310			this.update(parseFloat(el.getAttribute('data-percent')));
311		}
312	}.bind(this);
313
314	/**
315	 * Update the value of the chart
316	 * @param  {number} newValue Number between 0 and 100
317	 * @return {object}          Instance of the plugin for method chaining
318	 */
319	this.update = function(newValue) {
320		newValue = parseFloat(newValue);
321		if (options.animate.enabled) {
322			this.renderer.animate(currentValue, newValue);
323		} else {
324			this.renderer.draw(newValue);
325		}
326		currentValue = newValue;
327		return this;
328	}.bind(this);
329
330	/**
331	 * Disable animation
332	 * @return {object} Instance of the plugin for method chaining
333	 */
334	this.disableAnimation = function() {
335		options.animate.enabled = false;
336		return this;
337	};
338
339	/**
340	 * Enable animation
341	 * @return {object} Instance of the plugin for method chaining
342	 */
343	this.enableAnimation = function() {
344		options.animate.enabled = true;
345		return this;
346	};
347
348	init();
349};
350
351$.fn.easyPieChart = function(options) {
352	return this.each(function() {
353		var instanceOptions;
354
355		if (!$.data(this, 'easyPieChart')) {
356			instanceOptions = $.extend({}, options, $(this).data());
357			$.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
358		}
359	});
360};
361
362
363}));