Public API

A pie chart can be animated and changed programmatically via its public API. Select some pie charts and change the select lists to see the effects. The code to animate and change the pie charts is shown below.

Example animation code

<script>
$(function(){
   // Initializing the pie chart returns an api.
   var pie = $('#pie').rotapie();
   
   // Animate the pie chart with a select list.
   $('#mySelectList').change(function(){
      var index = +$(this).val();
      // Animate the pie chart to the new slice index.
      pie.animate(index);
   });
});
</script>

Example code to change the appearance

<script>
$(function(){
   // Initializing the pie chart returns an api.
   var pie = $('#pie').rotapie();
   
   // Change the pie chart's design with a select list.
   $('#mySelectList').change(function(){
	
      // Retrieve the pie chart's settings.
      var settings = pie.getSettings();
      
      // Modify the settings.
      switch(+$(this).val())
      {
         case 0:
            { 
               settings.minInnerRadius = 40;
               settings.maxInnerRadius = 50;
               settings.minFontSize = 20;
               settings.maxFontSize = 25; 
            }
         break; 
         case 1:
            {
               settings.minInnerRadius = 0;
               settings.maxInnerRadius = 0;
               settings.minFontSize = 0;
               settings.maxFontSize = 0; 
            }
         break;
         default:
         break;
      } 
      // Redraw the pie chart.
      pie.repaint(); 
   });
});
</script>