Rotapie documentation

Version 1.0.0

<script>
$(function(){
   var pie = $('container').rotapie(settings);
   pie.animate(index, pieIndex);
   pie.repaint(pieIndex);
   var settings = pie.getSettings(pieIndex);
});
</script>

Settings properties

Name Type Default value Function
slices Array of objects 
[
   { color: '#006673', percentage: 10 },
   { color: '#0294a8', percentage: 30 },
   { color: '#77ccd1', percentage: 60 }
]
 Each slice requires a color and percentage. The font color for the percentage display defaults to the color but can be overriden by specifying fontColor: { color: '#006673', fontColor: '#000', percentage: 33.33 } color and fontColor can be a hexadecimal or rgb string: color: 'rgb(255, 255, 255)'
sliceIndex Number 0 Start index selected top slice.
deltaAngle Number 0.2 The rotation angle in radians between frames during animation, smaller number equals slower animation.
minRadius Number 100 The radius of unselected slices. Can be set to a percentage of the parent container width to make a responsive pie chart, i.e. minRadius: '45%'
maxRadius Number 110 The radius of the selected top slice. Can be set to a percentage of the parent container width to make a responsive pie chart, i.e. maxRadius: '50%'
minInnerRadius Number 55 Smallest radius inner circle when animated, set this and maxInnerRadius to 0 to disable inner circle. Can be set to a percentage of the parent container width to make a responsive pie chart, i.e. minInnerRadius: '30%'
maxInnerRadius Number 65 Radius inner circle, set this and minInnerRadius to 0 to disable inner circle. Can be set to a percentage of the parent container width to make a responsive pie chart, i.e. maxInnerRadius: '35%'
innerColor String '#fff' Backgroundcolor inner circle.
minFontSize Number 30 Smallest fontsize of the percentage display when animated, set this and maxFontSize to 0 to disable percentage display. Can be set to a percentage of the parent container width to make a responsive pie chart, i.e. minFontSize: '10%'.
maxFontSize Number 40 Fontsize of the percentage display, set this and minFontSize to 0 to disable percentage display. Can be set to a percentage of the parent container width to make a responsive pie chart, i.e. maxFontSize: '20%'.
fontYOffset Number or String 0 Vertical offset of the percentage display. Can be set to a percentage of the parent container width, i.e. fontYOffset: '-10%'.
fontFamily String 'Times New Roman' The font used to render the percentage display.
fontWeight String 'bold' The font-weight used to render the percentage display.
decimalPoint String '.' The decimal separator used in the percentage display.
clickable Boolean true If set to false a user cannot select another slice by clicking on it.
beforeAnimate Function undefined Callback function called before rotating to other slice. Receives the next slice index as first argument and the settings object as second argument. The this pointer inside this function refers to the wrapped canvas object. Return false to cancel the animation. 
beforeAnimate: function(nextIndex, settings){
   var canvas = this;
   return false; // Cancel rotation
}
afterAnimate Function undefined Callback function called after rotating to other slice. Receives the settings object as argument. The this pointer inside this function refers to the wrapped canvas object. The current index can be retrieved via settings.sliceIndex. 
afterAnimate: function(settings){
   var canvas = this;
   var index = settings.sliceIndex; // Retrieve current index.
}

Public API

The pie chart can be manipulated via it's public API. The call to rotapie() returns an object with the following methods:

Name Returns Description
animate(index, pieIndex) - You can animate the pie chart programmatically by calling animate(index). The index argument is the slice index you want to select. The pieIndex argument is optional. If you generated multiple pie charts they will all animate when leaving out the pieIndex argument. Providing the pieIndex animates a specific pie in the wrapped set. 
<script>
$(function(){
   var pieCharts = $('div.piechart').rotapie(settings); // Generate multiple pie charts.
   pieCharts.animate(1); // Animate all pie charts to slice index 1.
   pieCharts.animate(1, 0); // Animate only the first pie chart in the wrapped set to slice index 1.
});
</script>
repaint(pieIndex) - Redraw the pie chart, for example after you changed it's size via getSettings(). The pieIndex argument is optional. If you generated multiple pie charts they will all redraw when leaving out the pieIndex argument. Providing the pieIndex redraws a specific pie in the wrapped set. 
<script>
$(function(){
   var pieCharts = $('div.piechart').rotapie(settings); // Generate multiple pie charts.
   pieCharts.repaint(); // Redraw all pie charts.
   pieCharts.repaint(0); // Redraw only the first pie chart in the wrapped set.
});
</script>
getSettings(pieIndex) settings object or array of settings objects Retrieve the settings object for a pie chart. The pieIndex argument is optional. If you generated multiple pie charts all settings objects will be returned in an array when leaving out the pieIndex argument. Providing the pieIndex returns a specific settings object. 
<script>
$(function(){
   var pieCharts = $('div.piechart').rotapie(settings); // Generate multiple pie charts.
   var arrayOfSettings = pieCharts.getSettings(); // Retrieve all pie charts' settings.
   var settings = pieCharts.getSettings(0); // Retrieve the settings object for the first pie chart in the wrapped set.
});
</script>
(If the wrapped set contains only one pie chart calling getSettings() without the pieIndex argument returns a single settings object.)