Callbacks

By using the beforeAnimate and afterAnimate callbacks you can display additional information with the chart or perform other actions. The code to use the callbacks is shown below.

Oxygen

65% of the human body mass is made out of oxygen.

Carbon

18.5% of the human body mass is made out of carbon.

Hydrogen

9.5% of the human body mass is made out of hydrogen.

Nitrogen

3.2% of the human body mass is made out of nitrogen.

Calcium

1.5% of the human body mass is made out of calcium.

Phosphorus

1% of the human body mass is made out of phosphorus.

Other

1.3% of the human body mass is made out of other elements.

Script

<script>
$(function(){
   $('#pie').rotapie({
      .......
      beforeAnimate: function (nextIndex, settings) { 
         // Hide all messages.
         $('#messages div').fadeOut(100);
      },
      afterAnimate: function (settings) {
         // Select and show the correct message by using the current index.
         $('#messages div:eq(' + settings.sliceIndex + ')').fadeIn();
      },
   });
});
</script>

Html

<div id="messages">
   <div>
      <h2>Oxygen</h2>
      <p>65% of the human body mass is made out of oxygen.</p>
   </div>
   <div>
      <h2>Carbon</h2>
      <p>18.5% of the human body mass is made out of carbon.</p>
   </div>
   <div>
      <h2>Hydrogen</h2>
      <p>9.5% of the human body mass is made out of hydrogen.</p>
   </div>
   <div>
      <h2>Nitrogen</h2>
      <p>3.2% of the human body mass is made out of nitrogen.</p>
   </div>
   <div>
      <h2>Calcium</h2>
      <p>1.5% of the human body mass is made out of calcium.</p>
   </div>
   <div>
      <h2>Phosphorus</h2>
      <p>1% of the human body mass is made out of phosphorus.</p>
   </div>
   <div>
      <h2>Other</h2>
      <p>1.3% of the human body mass is made out of other elements.</p>
   </div>
</div>