easypiechart.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. var EasyPieChart = function(el, opts) {
  2. var defaultOptions = {
  3. barColor: '#ef1e25',
  4. trackColor: '#f9f9f9',
  5. scaleColor: '#dfe0e0',
  6. scaleLength: 5,
  7. lineCap: 'round',
  8. lineWidth: 3,
  9. trackWidth: undefined,
  10. size: 110,
  11. rotate: 0,
  12. animate: {
  13. duration: 1000,
  14. enabled: true
  15. },
  16. easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
  17. t = t / (d/2);
  18. if (t < 1) {
  19. return c / 2 * t * t + b;
  20. }
  21. return -c/2 * ((--t)*(t-2) - 1) + b;
  22. },
  23. onStart: function(from, to) {
  24. return;
  25. },
  26. onStep: function(from, to, currentValue) {
  27. return;
  28. },
  29. onStop: function(from, to) {
  30. return;
  31. }
  32. };
  33. // detect present renderer
  34. if (typeof(CanvasRenderer) !== 'undefined') {
  35. defaultOptions.renderer = CanvasRenderer;
  36. } else if (typeof(SVGRenderer) !== 'undefined') {
  37. defaultOptions.renderer = SVGRenderer;
  38. } else {
  39. throw new Error('Please load either the SVG- or the CanvasRenderer');
  40. }
  41. var options = {};
  42. var currentValue = 0;
  43. /**
  44. * Initialize the plugin by creating the options object and initialize rendering
  45. */
  46. var init = function() {
  47. this.el = el;
  48. this.options = options;
  49. // merge user options into default options
  50. for (var i in defaultOptions) {
  51. if (defaultOptions.hasOwnProperty(i)) {
  52. options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
  53. if (typeof(options[i]) === 'function') {
  54. options[i] = options[i].bind(this);
  55. }
  56. }
  57. }
  58. // check for jQuery easing
  59. if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
  60. options.easing = jQuery.easing[options.easing];
  61. } else {
  62. options.easing = defaultOptions.easing;
  63. }
  64. // process earlier animate option to avoid bc breaks
  65. if (typeof(options.animate) === 'number') {
  66. options.animate = {
  67. duration: options.animate,
  68. enabled: true
  69. };
  70. }
  71. if (typeof(options.animate) === 'boolean' && !options.animate) {
  72. options.animate = {
  73. duration: 1000,
  74. enabled: options.animate
  75. };
  76. }
  77. // create renderer
  78. this.renderer = new options.renderer(el, options);
  79. // initial draw
  80. this.renderer.draw(currentValue);
  81. // initial update
  82. if (el.dataset && el.dataset.percent) {
  83. this.update(parseFloat(el.dataset.percent));
  84. } else if (el.getAttribute && el.getAttribute('data-percent')) {
  85. this.update(parseFloat(el.getAttribute('data-percent')));
  86. }
  87. }.bind(this);
  88. /**
  89. * Update the value of the chart
  90. * @param {number} newValue Number between 0 and 100
  91. * @return {object} Instance of the plugin for method chaining
  92. */
  93. this.update = function(newValue) {
  94. newValue = parseFloat(newValue);
  95. if (options.animate.enabled) {
  96. this.renderer.animate(currentValue, newValue);
  97. } else {
  98. this.renderer.draw(newValue);
  99. }
  100. currentValue = newValue;
  101. return this;
  102. }.bind(this);
  103. /**
  104. * Disable animation
  105. * @return {object} Instance of the plugin for method chaining
  106. */
  107. this.disableAnimation = function() {
  108. options.animate.enabled = false;
  109. return this;
  110. };
  111. /**
  112. * Enable animation
  113. * @return {object} Instance of the plugin for method chaining
  114. */
  115. this.enableAnimation = function() {
  116. options.animate.enabled = true;
  117. return this;
  118. };
  119. init();
  120. };