jquery.easy-pie-chart.js 7.1 KB

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