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