Rotapie, a responsive animated jQuery pie chart plugin.

Rotapie is a flexible, responsive animated jQuery pie chart plugin based on the HTML5 Canvas API. Unlike traditional pie charts it displays a single selected slice at the top of the chart. Users can select a different slice by clicking on it. The pie chart can also be controlled via its public API. Additional information can be displayed by using the callbacks.

(Please, also check out my free online form builder.)

Demos

Releases

Version Date Release notes Documentation Download
1.0.0 april 8, 2017 - Documentation Github

Quick setup

For a quick setup implement the following steps:

  1. Include the jquery.rotapie.js file somewhere on your website.
  2. Include a (CDN or local) link to jQuery on your webpage:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  3. Include a link to the jquery.rotapie.js file on your webpage:
    <script src="/scripts/jquery.rotapie.js"></script>
  4. Choose an element on the page to act as a container for the pie chart, for example a div.
  5. Select the element with jquery on the document ready event and call .rotapie(): 
    <script>
$(function(){
     var pie = $('#myDiv').rotapie();
});
</script>
  6. You can pass a settings object with the following defaults to configure the pie chart:
    <script>
$(function(){
   var pie = $('#myDiv').rotapie({
      slices: [                                // An array of slice objects.
         { color: '#006673', percentage: 10},  // Each slice object requires a color and percentage.
         { color: '#0294a8', percentage: 30 }, // The font color defaults to the color but can be overriden by specifying fontColor.
         { color: '#77ccd1', percentage: 60}
      ],
      sliceIndex: 0, // Start index selected slice.
      deltaAngle: 0.2, // The rotation angle in radians between frames, smaller number equals slower animation.
      minRadius: 100, // Radius of unselected slices, can be set to percentage of container width i.e. '45%'.
      maxRadius: 110, // Radius of selected slice, can be set to percentage of container width i.e. '50%'.
      minInnerRadius: 55, // Smallest radius inner circle when animated, set to 0 to disable inner circle, can be set to percentage of container width i.e. '30%'.
      maxInnerRadius: 65, // Normal radius inner circle, set to 0 to disable inner circle, can be set to percentage of container width i.e. '35%'.
      innerColor: '#fff', // Backgroundcolor inner circle.
      minFontSize: 30, // Smallest fontsize percentage when animated, set to 0 to disable percentage display, can be set to percentage of container width i.e. '10%'.
      maxFontSize: 40, // Normal fontsize percentage, set to 0 to disable percentage display, can be set to percentage of container width i.e. '20%'.
      fontYOffset: 0, // Vertically offset the percentage display with this value, can be set to percentage of container width i.e. '-10%'.
      fontFamily: 'Times New Roman', // Font-family percentage display.
      fontWeight: 'bold', // Font-weight percentage display.
      decimalPoint: '.', // Can be set to comma or other symbol.
      clickable: true, // If set to true a user can select a different slice by clicking on it.
      beforeAnimate: undefined, // Callback function called before starting animation. Read the documentation for more information.
      afterAnimate: undefined // Callback function called after animation. Read the documentation for more information.
   });
});
</script>
  7. The call to rotapie returns a public API object with the following methods:
    <script>
$(function(){
   var pie = $('#myDiv').rotapie(....);
   pie.animate(index, pieIndex); // Animate the pie chart to the next slice index.
   pie.repaint(pieIndex); // Redraw the pie chart, is often used after changing settings via "getSettings".
   pie.getSettings(pieIndex); // Retrieve the settings object.
});
</script>
    Read the documentation and watch the demos for more information.