You are viewing documentation for an older version. For current documentation - click here.
Pie/Doughnut Chart - JavaScript API

Pie 3D, Pie 2D, Doughnut 3D and Doughnut 2D charts expose a special function for better interactivity. Shown below is a table which contains detailed description of the function:
Function Name Parameter Description
togglePieSlice() id : Number Toggles the slicing state of a pie/doughnut segment. The function takes a id as integer (taking base as 0 i.e., the first segment's index is 0) . As per the id provided to the function, the pie segment status is checked. If the segment is already sliced-out it moves inside. If the pie segment is not yet sliced, it slices out. Hence, this is what is called toggling of pie segment's slice mode.
Usage Example:

Given below is are examples of how to use the function using JavaScript.

togglePieSlice()

 
<html>
  <head>
    <title>Pie/Doughnut slicing API</title> 
    <script type="text/javascript" SRC="../../../Charts/FusionCharts.js"></script>
    <script type="text/javascript">
      function slicePie()
      {
        // get the index of the slice to toggle
        slice = document.getElementById('index').value ;
        // toggle the slice
        FusionCharts("myChartId").togglePieSlice(slice);
      }
    </script>
  </head>
  <body>

    <div id="chartContainer">FusionCharts</div>
    <script language="JavaScript">

      var myChart = new FusionCharts("../../../Charts/Pie3D.swf", "myChartId", "400", "300", "0", "1"); 
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");

    </script>

    <input type="text" id="index" size="5" value="0"/>
    <input type="button" value="Toggle" onclick="slicePie()"/>

  </body>
</html>

In the above code, we have created a Pie 3D chart with four slices. We have created a text input button to take pie slice index value as input. When a number is provided in the input box and Toggle button is clicked, togglePieSlice function is called. The slice id is passed to the function. In effect, the desired slice slices-out or slices-in.

See it live!