1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / techoozesolution / public_html / js /
Filename : easy-pie-chart.js
back
/**!
 * easy-pie-chart
 * Lightweight plugin to render simple, animated and retina optimized pie charts
 *
 * @license 
 * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
 * @version 2.1.7
 **/

(function (root, factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as an anonymous module unless amdModuleId is set
		define(["jquery"], function (a0) {
			return (factory(a0));
		});
	} else if (typeof exports === 'object') {
		// Node. Does not work with strict CommonJS, but
		// only CommonJS-like environments that support module.exports,
		// like Node.
		module.exports = factory(require("jquery"));
	} else {
		factory(jQuery);
	}
}(this, function ($) {

	/**
	 * Renderer to render the chart on a canvas object
	 * @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
	 * @param {object}     options options object of the plugin
	 */
	var CanvasRenderer = function (el, options) {
		var cachedBackground;
		var canvas = document.createElement('canvas');

		el.appendChild(canvas);

		if (typeof (G_vmlCanvasManager) === 'object') {
			G_vmlCanvasManager.initElement(canvas);
		}

		var ctx = canvas.getContext('2d');

		canvas.width = canvas.height = options.size;

		// canvas on retina devices
		var scaleBy = 1;
		if (window.devicePixelRatio > 1) {
			scaleBy = window.devicePixelRatio;
			canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
			canvas.width = canvas.height = options.size * scaleBy;
			ctx.scale(scaleBy, scaleBy);
		}

		// move 0,0 coordinates to the center
		ctx.translate(options.size / 2, options.size / 2);

		// rotate canvas -90deg
		ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);

		var radius = (options.size - options.lineWidth) / 2;
		if (options.scaleColor && options.scaleLength) {
			radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
		}

		// IE polyfill for Date
		Date.now = Date.now || function () {
			return +(new Date());
		};

		/**
		 * Draw a circle around the center of the canvas
		 * @param {strong} color     Valid CSS color string
		 * @param {number} lineWidth Width of the line in px
		 * @param {number} percent   Percentage to draw (float between -1 and 1)
		 */
		var drawCircle = function (color, lineWidth, percent) {
			percent = Math.min(Math.max(-1, percent || 0), 1);
			var isNegative = percent <= 0 ? true : false;

			ctx.beginPath();
			ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);

			ctx.strokeStyle = color;
			ctx.lineWidth = lineWidth;

			ctx.stroke();
		};

		/**
		 * Draw the scale of the chart
		 */
		var drawScale = function () {
			var offset;
			var length;

			ctx.lineWidth = 1;
			ctx.fillStyle = options.scaleColor;

			ctx.save();
			for (var i = 24; i > 0; --i) {
				if (i % 6 === 0) {
					length = options.scaleLength;
					offset = 0;
				} else {
					length = options.scaleLength * 0.6;
					offset = options.scaleLength - length;
				}
				ctx.fillRect(-options.size / 2 + offset, 0, length, 1);
				ctx.rotate(Math.PI / 12);
			}
			ctx.restore();
		};

		/**
		 * Request animation frame wrapper with polyfill
		 * @return {function} Request animation frame method or timeout fallback
		 */
		var reqAnimationFrame = (function () {
			return window.requestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				function (callback) {
					window.setTimeout(callback, 1000 / 60);
				};
		}());

		/**
		 * Draw the background of the plugin including the scale and the track
		 */
		var drawBackground = function () {
			if (options.scaleColor) drawScale();
			if (options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
		};

		/**
		 * Canvas accessor
		 */
		this.getCanvas = function () {
			return canvas;
		};

		/**
		 * Canvas 2D context 'ctx' accessor
		 */
		this.getCtx = function () {
			return ctx;
		};

		/**
		 * Clear the complete canvas
		 */
		this.clear = function () {
			ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
		};

		/**
		 * Draw the complete chart
		 * @param {number} percent Percent shown by the chart between -100 and 100
		 */
		this.draw = function (percent) {
			// do we need to render a background
			if (!!options.scaleColor || !!options.trackColor) {
				// getImageData and putImageData are supported
				if (ctx.getImageData && ctx.putImageData) {
					if (!cachedBackground) {
						drawBackground();
						cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
					} else {
						ctx.putImageData(cachedBackground, 0, 0);
					}
				} else {
					this.clear();
					drawBackground();
				}
			} else {
				this.clear();
			}

			ctx.lineCap = options.lineCap;

			// if barcolor is a function execute it and pass the percent as a value
			var color;
			if (typeof (options.barColor) === 'function') {
				color = options.barColor(percent);
			} else {
				color = options.barColor;
			}

			// draw bar
			drawCircle(color, options.lineWidth, percent / 100);
		}.bind(this);

		/**
		 * Animate from some percent to some other percentage
		 * @param {number} from Starting percentage
		 * @param {number} to   Final percentage
		 */
		this.animate = function (from, to) {
			var startTime = Date.now();
			options.onStart(from, to);
			var animation = function () {
				var process = Math.min(Date.now() - startTime, options.animate.duration);
				var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
				this.draw(currentValue);
				options.onStep(from, to, currentValue);
				if (process >= options.animate.duration) {
					options.onStop(from, to);
				} else {
					reqAnimationFrame(animation);
				}
			}.bind(this);

			reqAnimationFrame(animation);
		}.bind(this);
	};

	var EasyPieChart = function (el, opts) {
		var defaultOptions = {
			barColor: '#FA6742',
			trackColor: '#FFFFFF',
			scaleColor: '#000',
			scaleLength: 0,
			lineCap: 'square',
			lineWidth: 8,
			trackWidth: undefined,
			size: 195,
			rotate: 0,
			animate: {
				duration: 1000,
				enabled: true
			},
			easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
				t = t / (d / 2);
				if (t < 1) {
					return c / 2 * t * t + b;
				}
				return -c / 2 * ((--t) * (t - 2) - 1) + b;
			},
			onStart: function (from, to) {
				return;
			},
			onStep: function (from, to, currentValue) {
				return;
			},
			onStop: function (from, to) {
				return;
			}
		};

		// detect present renderer
		if (typeof (CanvasRenderer) !== 'undefined') {
			defaultOptions.renderer = CanvasRenderer;
		} else if (typeof (SVGRenderer) !== 'undefined') {
			defaultOptions.renderer = SVGRenderer;
		} else {
			throw new Error('Please load either the SVG- or the CanvasRenderer');
		}

		var options = {};
		var currentValue = 0;

		/**
		 * Initialize the plugin by creating the options object and initialize rendering
		 */
		var init = function () {
			this.el = el;
			this.options = options;

			// merge user options into default options
			for (var i in defaultOptions) {
				if (defaultOptions.hasOwnProperty(i)) {
					options[i] = opts && typeof (opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
					if (typeof (options[i]) === 'function') {
						options[i] = options[i].bind(this);
					}
				}
			}

			// check for jQuery easing
			if (typeof (options.easing) === 'string' && typeof (jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
				options.easing = jQuery.easing[options.easing];
			} else {
				options.easing = defaultOptions.easing;
			}

			// process earlier animate option to avoid bc breaks
			if (typeof (options.animate) === 'number') {
				options.animate = {
					duration: options.animate,
					enabled: true
				};
			}

			if (typeof (options.animate) === 'boolean' && !options.animate) {
				options.animate = {
					duration: 1000,
					enabled: options.animate
				};
			}

			// create renderer
			this.renderer = new options.renderer(el, options);

			// initial draw
			this.renderer.draw(currentValue);

			// initial update
			if (el.dataset && el.dataset.percent) {
				this.update(parseFloat(el.dataset.percent));
			} else if (el.getAttribute && el.getAttribute('data-percent')) {
				this.update(parseFloat(el.getAttribute('data-percent')));
			}
		}.bind(this);

		/**
		 * Update the value of the chart
		 * @param  {number} newValue Number between 0 and 100
		 * @return {object}          Instance of the plugin for method chaining
		 */
		this.update = function (newValue) {
			newValue = parseFloat(newValue);
			if (options.animate.enabled) {
				this.renderer.animate(currentValue, newValue);
			} else {
				this.renderer.draw(newValue);
			}
			currentValue = newValue;
			return this;
		}.bind(this);

		/**
		 * Disable animation
		 * @return {object} Instance of the plugin for method chaining
		 */
		this.disableAnimation = function () {
			options.animate.enabled = false;
			return this;
		};

		/**
		 * Enable animation
		 * @return {object} Instance of the plugin for method chaining
		 */
		this.enableAnimation = function () {
			options.animate.enabled = true;
			return this;
		};

		init();
	};

	$.fn.easyPieChart = function (options) {
		return this.each(function () {
			var instanceOptions;

			if (!$.data(this, 'easyPieChart')) {
				instanceOptions = $.extend({}, options, $(this).data());
				$.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
			}
		});
	};
	/* Pie Chart */
	$('.chart').easyPieChart({
		//your configuration goes here
	});


}));