Pie/Doughnut Chart - JavaScript API

You are viewing documentation for an older version. For current documentation - click here.

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 functions:

Function Name	Parameter	Description
togglePieSlice()	id : Number	Toggles the slicing state of a pie or doughnut segment. The function takes an ID as integer (taking base as 0, that is, 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.
enableSlicingMovement() Since v 3.2.2	None	Makes the slicing interactivity accessible to the user. This also disables link activities of the slices of the chart. The effect is same as clicking "Enable Slicing Movements" option from the chart's context menu.
enableLink() Since v 3.2.2	None	Makes links attached to the chart slices accessible to the user. This will disable the slicing or rotation interactivity of the chart. The effect is same as that of clicking "Enable Links" option from the chart's context menu. Please note that if the chart does not contain any link, this function will not produce the desired effect.

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

<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!

<html>
  <head>
    <title>Pie/Doughnut Enable Slicing Interactivity - API</title> 
    <script type="text/javascript" SRC="../../../Charts/FusionCharts.js"></script>
    <script type="text/javascript">
      function enableSlicing()
      {
        // Enable the slicing interactivity of the chart 
        FusionCharts("myChartId").enableSlicingMovement();
      }
    </script>
  </head>
  <body>

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

      var myChart = new FusionCharts("../../../Charts/Pie3D.swf", "myChartId", "400", "300", "0", "1"); 
      myChart.setXMLData("<chart><set value='25' label='Minor' link='j-sliceClicked-25,Minor' /><set value='50' label='Major' link='j-sliceClicked-50,Major' /></chart>");
      myChart.render("chartContainer");

    </script>

    <input type="button" value="Enable Slicing interactivity" onclick="enableSlicing()" />

  </body>
</html>

In the above code, we have created a Pie 3D chart with slices having links. When the chart is rendered, it enables links of the slices and disables the slicing interactivity. We have created a button which when clicked, will call enableSlicing function. The function, in turn, will call the enableSlicingMovement API function of the chart. The links of the slices will get disabled and a user can click on a slice to achieve desired slicing movements.

See it live!

<html>
  <head>
    <title>Pie/Doughnut slicing API</title> 
    <script type="text/javascript" SRC="../../../Charts/FusionCharts.js"></script>
    <script type="text/javascript">
      function enableChartLinks()
      {
        // enable links of the charts
        FusionCharts("myChartId").enableLink();
      }
    </script>
  </head>
  <body>

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

      var myChart = new FusionCharts("../../../Charts/Pie3D.swf", "myChartId", "400", "300", "0", "1"); 
      myChart.setXMLData("<chart><set value='25' label='Minor' link='j-sliceClicked-25,Minor' /><set value='50' label='Major' link='j-sliceClicked-50,Major' /></chart>");
      myChart.render("chartContainer");

    </script>
    <input type="button" value="Enable Slicing interactivity" onclick="FusionCharts('myChartId').enableSlicingMovement();" />
    <input type="button" value="Enable Link interactivity" onclick="enableChartLinks()"/>

  </body>
</html>

In the above code, we have created a Pie 3D chart with slices having links. When the chart is rendered, it enables links of the slices and disables the slicing interactivity. We have created two buttons. The first button, when clicked will enable slicing interactivity of the chart and subsequently disable link interactivity of the slices. The other button will call enableChartLinks function. This function calls the enableLink API function of the chart. The links of the slices will get enabled and user can now click on the slices to invoke links.

See it live!