Subversion-Projekte lars-tiefland.ci

/**!

 * easyPieChart

 * 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.5

 **/

(function(root, factory) {

    if(typeof exports === 'object') {

        module.exports = factory(require('jquery'));

    }

    else if(typeof define === 'function' && define.amd) {

        define(['jquery'], factory);

    }

    else {

        factory(root.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) !== 'undefined') {

		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.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: '#ef1e25',

		trackColor: '#f9f9f9',

		scaleColor: '#dfe0e0',

		scaleLength: 5,

		lineCap: 'round',

		lineWidth: 3,

		size: 110,

		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));

		}

	});

};

}));