[290] | 1 | // Generated by CoffeeScript 1.6.3 |
---|
| 2 | /* |
---|
| 3 | Easy pie chart is a jquery plugin to display simple animated pie charts for only one value |
---|
| 4 | |
---|
| 5 | Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) |
---|
| 6 | and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. |
---|
| 7 | |
---|
| 8 | Built on top of the jQuery library (http://jquery.com) |
---|
| 9 | |
---|
| 10 | @source: http://github.com/rendro/easy-pie-chart/ |
---|
| 11 | @autor: Robert Fleischmann |
---|
| 12 | @version: 1.2.5 |
---|
| 13 | |
---|
| 14 | Inspired by: http://dribbble.com/shots/631074-Simple-Pie-Charts-II?list=popular&offset=210 |
---|
| 15 | Thanks to Philip Thrasher for the jquery plugin boilerplate for coffee script |
---|
| 16 | */ |
---|
| 17 | |
---|
| 18 | (function($) { |
---|
| 19 | $.easyPieChart = function(el, options) { |
---|
| 20 | var addScaleLine, animateLine, drawLine, easeInOutQuad, rAF, renderBackground, renderScale, renderTrack, |
---|
| 21 | _this = this; |
---|
| 22 | this.el = el; |
---|
| 23 | this.$el = $(el); |
---|
| 24 | this.$el.data("easyPieChart", this); |
---|
| 25 | this.init = function() { |
---|
| 26 | var percent, scaleBy; |
---|
| 27 | _this.options = $.extend({}, $.easyPieChart.defaultOptions, options); |
---|
| 28 | percent = parseInt(_this.$el.data('percent'), 10); |
---|
| 29 | _this.percentage = 0; |
---|
| 30 | _this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "'></canvas>").get(0); |
---|
| 31 | _this.$el.append(_this.canvas); |
---|
| 32 | if (typeof G_vmlCanvasManager !== "undefined" && G_vmlCanvasManager !== null) { |
---|
| 33 | G_vmlCanvasManager.initElement(_this.canvas); |
---|
| 34 | } |
---|
| 35 | _this.ctx = _this.canvas.getContext('2d'); |
---|
| 36 | if (window.devicePixelRatio > 1) { |
---|
| 37 | scaleBy = window.devicePixelRatio; |
---|
| 38 | $(_this.canvas).css({ |
---|
| 39 | width: _this.options.size, |
---|
| 40 | height: _this.options.size |
---|
| 41 | }); |
---|
| 42 | _this.canvas.width *= scaleBy; |
---|
| 43 | _this.canvas.height *= scaleBy; |
---|
| 44 | _this.ctx.scale(scaleBy, scaleBy); |
---|
| 45 | } |
---|
| 46 | _this.ctx.translate(_this.options.size / 2, _this.options.size / 2); |
---|
| 47 | _this.ctx.rotate(_this.options.rotate * Math.PI / 180); |
---|
| 48 | _this.$el.addClass('easyPieChart'); |
---|
| 49 | _this.$el.css({ |
---|
| 50 | width: _this.options.size, |
---|
| 51 | height: _this.options.size, |
---|
| 52 | lineHeight: "" + _this.options.size + "px" |
---|
| 53 | }); |
---|
| 54 | _this.update(percent); |
---|
| 55 | return _this; |
---|
| 56 | }; |
---|
| 57 | this.update = function(percent) { |
---|
| 58 | percent = parseFloat(percent) || 0; |
---|
| 59 | if (_this.options.animate === false) { |
---|
| 60 | drawLine(percent); |
---|
| 61 | } else { |
---|
| 62 | if (_this.options.delay) { |
---|
| 63 | animateLine(_this.percentage, 0); |
---|
| 64 | setTimeout(function() { |
---|
| 65 | return animateLine(_this.percentage, percent); |
---|
| 66 | }, _this.options.delay); |
---|
| 67 | } else { |
---|
| 68 | animateLine(_this.percentage, percent); |
---|
| 69 | } |
---|
| 70 | } |
---|
| 71 | return _this; |
---|
| 72 | }; |
---|
| 73 | renderScale = function() { |
---|
| 74 | var i, _i, _results; |
---|
| 75 | _this.ctx.fillStyle = _this.options.scaleColor; |
---|
| 76 | _this.ctx.lineWidth = 1; |
---|
| 77 | _results = []; |
---|
| 78 | for (i = _i = 0; _i <= 24; i = ++_i) { |
---|
| 79 | _results.push(addScaleLine(i)); |
---|
| 80 | } |
---|
| 81 | return _results; |
---|
| 82 | }; |
---|
| 83 | addScaleLine = function(i) { |
---|
| 84 | var offset; |
---|
| 85 | offset = i % 6 === 0 ? 0 : _this.options.size * 0.017; |
---|
| 86 | _this.ctx.save(); |
---|
| 87 | _this.ctx.rotate(i * Math.PI / 12); |
---|
| 88 | _this.ctx.fillRect(_this.options.size / 2 - offset, 0, -_this.options.size * 0.05 + offset, 1); |
---|
| 89 | _this.ctx.restore(); |
---|
| 90 | }; |
---|
| 91 | renderTrack = function() { |
---|
| 92 | var offset; |
---|
| 93 | offset = _this.options.size / 2 - _this.options.lineWidth / 2; |
---|
| 94 | if (_this.options.scaleColor !== false) { |
---|
| 95 | offset -= _this.options.size * 0.08; |
---|
| 96 | } |
---|
| 97 | _this.ctx.beginPath(); |
---|
| 98 | _this.ctx.arc(0, 0, offset, 0, Math.PI * 2, true); |
---|
| 99 | _this.ctx.closePath(); |
---|
| 100 | _this.ctx.strokeStyle = _this.options.trackColor; |
---|
| 101 | _this.ctx.lineWidth = _this.options.lineWidth; |
---|
| 102 | _this.ctx.stroke(); |
---|
| 103 | }; |
---|
| 104 | renderBackground = function() { |
---|
| 105 | if (_this.options.scaleColor !== false) { |
---|
| 106 | renderScale(); |
---|
| 107 | } |
---|
| 108 | if (_this.options.trackColor !== false) { |
---|
| 109 | renderTrack(); |
---|
| 110 | } |
---|
| 111 | }; |
---|
| 112 | drawLine = function(percent) { |
---|
| 113 | var offset; |
---|
| 114 | renderBackground(); |
---|
| 115 | _this.ctx.strokeStyle = $.isFunction(_this.options.barColor) ? _this.options.barColor(percent) : _this.options.barColor; |
---|
| 116 | _this.ctx.lineCap = _this.options.lineCap; |
---|
| 117 | _this.ctx.lineWidth = _this.options.lineWidth; |
---|
| 118 | offset = _this.options.size / 2 - _this.options.lineWidth / 2; |
---|
| 119 | if (_this.options.scaleColor !== false) { |
---|
| 120 | offset -= _this.options.size * 0.08; |
---|
| 121 | } |
---|
| 122 | _this.ctx.save(); |
---|
| 123 | _this.ctx.rotate(-Math.PI / 2); |
---|
| 124 | _this.ctx.beginPath(); |
---|
| 125 | _this.ctx.arc(0, 0, offset, 0, Math.PI * 2 * percent / 100, false); |
---|
| 126 | _this.ctx.stroke(); |
---|
| 127 | _this.ctx.restore(); |
---|
| 128 | }; |
---|
| 129 | rAF = (function() { |
---|
| 130 | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { |
---|
| 131 | return window.setTimeout(callback, 1000 / 60); |
---|
| 132 | }; |
---|
| 133 | })(); |
---|
| 134 | animateLine = function(from, to) { |
---|
| 135 | var anim, startTime; |
---|
| 136 | _this.options.onStart.call(_this); |
---|
| 137 | _this.percentage = to; |
---|
| 138 | Date.now || (Date.now = function() { |
---|
| 139 | return +(new Date); |
---|
| 140 | }); |
---|
| 141 | startTime = Date.now(); |
---|
| 142 | anim = function() { |
---|
| 143 | var currentValue, process; |
---|
| 144 | process = Math.min(Date.now() - startTime, _this.options.animate); |
---|
| 145 | _this.ctx.clearRect(-_this.options.size / 2, -_this.options.size / 2, _this.options.size, _this.options.size); |
---|
| 146 | renderBackground.call(_this); |
---|
| 147 | currentValue = [easeInOutQuad(process, from, to - from, _this.options.animate)]; |
---|
| 148 | _this.options.onStep.call(_this, currentValue); |
---|
| 149 | drawLine.call(_this, currentValue); |
---|
| 150 | if (process >= _this.options.animate) { |
---|
| 151 | return _this.options.onStop.call(_this, currentValue, to); |
---|
| 152 | } else { |
---|
| 153 | return rAF(anim); |
---|
| 154 | } |
---|
| 155 | }; |
---|
| 156 | rAF(anim); |
---|
| 157 | }; |
---|
| 158 | easeInOutQuad = function(t, b, c, d) { |
---|
| 159 | var easeIn, easing; |
---|
| 160 | easeIn = function(t) { |
---|
| 161 | return Math.pow(t, 2); |
---|
| 162 | }; |
---|
| 163 | easing = function(t) { |
---|
| 164 | if (t < 1) { |
---|
| 165 | return easeIn(t); |
---|
| 166 | } else { |
---|
| 167 | return 2 - easeIn((t / 2) * -2 + 2); |
---|
| 168 | } |
---|
| 169 | }; |
---|
| 170 | t /= d / 2; |
---|
| 171 | return c / 2 * easing(t) + b; |
---|
| 172 | }; |
---|
| 173 | return this.init(); |
---|
| 174 | }; |
---|
| 175 | $.easyPieChart.defaultOptions = { |
---|
| 176 | barColor: '#ef1e25', |
---|
| 177 | trackColor: '#f2f2f2', |
---|
| 178 | scaleColor: '#dfe0e0', |
---|
| 179 | lineCap: 'round', |
---|
| 180 | rotate: 0, |
---|
| 181 | size: 110, |
---|
| 182 | lineWidth: 3, |
---|
| 183 | animate: false, |
---|
| 184 | delay: false, |
---|
| 185 | onStart: $.noop, |
---|
| 186 | onStop: $.noop, |
---|
| 187 | onStep: $.noop |
---|
| 188 | }; |
---|
| 189 | $.fn.easyPieChart = function(options) { |
---|
| 190 | return $.each(this, function(i, el) { |
---|
| 191 | var $el, instanceOptions; |
---|
| 192 | $el = $(el); |
---|
| 193 | if (!$el.data('easyPieChart')) { |
---|
| 194 | instanceOptions = $.extend({}, options, $el.data()); |
---|
| 195 | return $el.data('easyPieChart', new $.easyPieChart(el, instanceOptions)); |
---|
| 196 | } |
---|
| 197 | }); |
---|
| 198 | }; |
---|
| 199 | return void 0; |
---|
| 200 | })(jQuery); |
---|