jquery.easy-pie-chart.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. // Generated by CoffeeScript 1.3.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.0.1
  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. (function($) {
  15. $.easyPieChart = function(el, options) {
  16. var addScaleLine, animateLine, drawLine, easeInOutQuad, renderBackground, renderScale, renderTrack,
  17. _this = this;
  18. this.el = el;
  19. this.$el = $(el);
  20. this.$el.data("easyPieChart", this);
  21. this.init = function() {
  22. var percent;
  23. _this.options = $.extend({}, $.easyPieChart.defaultOptions, options);
  24. percent = parseInt(_this.$el.data('percent'), 10);
  25. _this.percentage = 0;
  26. _this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "'></canvas>").get(0);
  27. _this.$el.append(_this.canvas);
  28. if (typeof G_vmlCanvasManager !== "undefined" && G_vmlCanvasManager !== null) {
  29. G_vmlCanvasManager.initElement(_this.canvas);
  30. }
  31. _this.ctx = _this.canvas.getContext('2d');
  32. _this.ctx.translate(_this.options.size / 2, _this.options.size / 2);
  33. _this.$el.addClass('easyPieChart');
  34. _this.$el.css({
  35. width: _this.options.size,
  36. height: _this.options.size,
  37. lineHeight: "" + _this.options.size + "px"
  38. });
  39. _this.update(percent);
  40. return _this;
  41. };
  42. this.update = function(percent) {
  43. if (_this.options.animate === false) {
  44. return drawLine(percent);
  45. } else {
  46. return animateLine(_this.percentage, percent);
  47. }
  48. };
  49. renderScale = function() {
  50. var i, _i, _results;
  51. _this.ctx.fillStyle = _this.options.scaleColor;
  52. _this.ctx.lineWidth = 1;
  53. _results = [];
  54. for (i = _i = 0; _i <= 24; i = ++_i) {
  55. _results.push(addScaleLine(i));
  56. }
  57. return _results;
  58. };
  59. addScaleLine = function(i) {
  60. var offset;
  61. offset = i % 6 === 0 ? 0 : _this.options.size * 0.017;
  62. _this.ctx.save();
  63. _this.ctx.rotate(i * Math.PI / 12);
  64. _this.ctx.fillRect(_this.options.size / 2 - offset, 0, -_this.options.size * 0.05 + offset, 1);
  65. return _this.ctx.restore();
  66. };
  67. renderTrack = function() {
  68. var offset;
  69. offset = _this.options.size / 2 - _this.options.lineWidth / 2;
  70. if (_this.options.scaleColor !== false) {
  71. offset -= _this.options.size * 0.08;
  72. }
  73. _this.ctx.beginPath();
  74. _this.ctx.arc(0, 0, offset, 0, Math.PI * 2, true);
  75. _this.ctx.closePath();
  76. _this.ctx.strokeStyle = _this.options.trackColor;
  77. _this.ctx.lineWidth = _this.options.lineWidth;
  78. return _this.ctx.stroke();
  79. };
  80. renderBackground = function() {
  81. if (_this.options.scaleColor !== false) {
  82. renderScale();
  83. }
  84. if (_this.options.trackColor !== false) {
  85. return renderTrack();
  86. }
  87. };
  88. drawLine = function(percent) {
  89. var offset;
  90. renderBackground();
  91. _this.ctx.strokeStyle = $.isFunction(_this.options.barColor) ? _this.options.barColor(percent) : _this.options.barColor;
  92. _this.ctx.lineCap = _this.options.lineCap;
  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.save();
  98. _this.ctx.rotate(-Math.PI / 2);
  99. _this.ctx.beginPath();
  100. _this.ctx.arc(0, 0, offset, 0, Math.PI * 2 * percent / 100, false);
  101. _this.ctx.stroke();
  102. return _this.ctx.restore();
  103. };
  104. animateLine = function(from, to) {
  105. var currentStep, fps, steps;
  106. fps = 30;
  107. steps = fps * _this.options.animate / 1000;
  108. currentStep = 0;
  109. _this.options.onStart.call(_this);
  110. _this.percentage = to;
  111. if (_this.animation) {
  112. clearInterval(_this.animation);
  113. _this.animation = false;
  114. }
  115. return _this.animation = setInterval(function() {
  116. _this.ctx.clearRect(-_this.options.size / 2, -_this.options.size / 2, _this.options.size, _this.options.size);
  117. renderBackground.call(_this);
  118. drawLine.call(_this, [easeInOutQuad(currentStep, from, to - from, steps)]);
  119. currentStep++;
  120. if ((currentStep / steps) > 1) {
  121. clearInterval(_this.animation);
  122. _this.animation = false;
  123. return _this.options.onStop.call(_this);
  124. }
  125. }, 1000 / fps);
  126. };
  127. easeInOutQuad = function(t, b, c, d) {
  128. t /= d / 2;
  129. if (t < 1) {
  130. return c / 2 * t * t + b;
  131. } else {
  132. return -c / 2 * ((--t) * (t - 2) - 1) + b;
  133. }
  134. };
  135. return this.init();
  136. };
  137. $.easyPieChart.defaultOptions = {
  138. barColor: '#ef1e25',
  139. trackColor: '#f2f2f2',
  140. scaleColor: '#dfe0e0',
  141. size: 350,
  142. lineWidth: 3,
  143. animate: false,
  144. onStart: $.noop,
  145. onStop: $.noop
  146. };
  147. $.fn.easyPieChart = function(options) {
  148. return $.each(this, function(i, el) {
  149. var $el;
  150. $el = $(el);
  151. if (!$el.data('easyPieChart')) {
  152. return $el.data('easyPieChart', new $.easyPieChart(el, options));
  153. }
  154. });
  155. };
  156. return void 0;
  157. })(jQuery);
  158. }).call(this);