|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/JavaScript/API/SpecialCharts/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pie/Doughnut Chart - JavaScript API </title>
<link rel="stylesheet" href="../../../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../../../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../../../assets/prettify/prettify.css" />
<script type="text/javascript" src="../../../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../../../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../../../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../../../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../../../Introduction/Overview.html", "FusionCharts XT and JavaScript|../../JS_Overview.html", "API Reference|../Overview.html", "Chart Specific API", "Pie/Doughnut chart JavaScript API" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Pie/Doughnut Chart - JavaScript API </td>
</tr>
<tr>
<td valign="top" class="text"><p>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:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><table width="100%" border="0" cellpadding="2" cellspacing="0" class="table">
<tr>
<td width="20%" class="header">Function Name</td>
<td width="15%" class="header">Parameter </td>
<td width="65%" class="header">Description</td>
</tr>
<tr>
<td width="20%" valign="top" class="codeInline"><a name="togglepieslice" id="togglepieslice"></a>togglePieSlice()</td>
<td width="15%" valign="top" class="text">id : Number </td>
<td width="65%" class="text">
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. </td>
</tr>
<tr>
<td valign="top" class="codeInline"><a name="enableslicingmovement" id="enableslicingmovement"></a>enableSlicingMovement()
<div class="version-info">Since v 3.2.2</div></td>
<td valign="top" class="text">None</td>
<td class="text">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. </td>
</tr>
<tr>
<td valign="top" class="codeInline"><a name="enablelink" id="enablelink"></a>enableLink()<div class="version-info">Since v 3.2.2</div></td>
<td valign="top" class="text">None</td>
<td class="text">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. </td>
</tr>
</table> </td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td valign="top" class="header">
Usage Example:</td>
</tr>
<tr>
<td valign="top" class="text"><p>Given below are examples of how to use the function using JavaScript.</p>
<p class="header" style="padding:3px;"><a name="toggle"></a>togglePieSlice()</p></td>
</tr>
<tr>
<td valign="top" class="text"></td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint"><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="<strong>slicePie</strong>()"/>
</body>
</html></pre>
<p>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, <span class="codeInline">togglePieSlice</span> function is called. The slice ID is passed to the function. In effect, the desired slice slices-out or slices-in. </p>
<p>See it <a href="../../../../Code/JavaScript/PieDoughnut/togglePieSlice.html" target="_blank">live</a>!</p> </td>
</tr>
<tr>
<td valign="top" class="header" style="padding:3px;"><a name="enableSlicing"></a>enableSlicingMovement()</td>
</tr>
<tr><td class="text"> </td></tr>
<tr>
<td valign="top" class="text"><pre class="code_container prettyprint"><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><br />
<input type="button" value="Enable Slicing interactivity" onclick="enableSlicing()" />
</body>
</html></pre>
<p>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 <span class="codeInline">enableSlicing</span> function. The function, in turn, will call the <span class="codeInline">enableSlicingMovement</span> 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. </p>
<p>See it <a href="../../../../Code/JavaScript/PieDoughnut/enableSlicingMovementAndLink.html" target="_blank">live</a>!</p></td>
</tr>
<tr>
<td valign="top" class="header" style="padding:3px;">enableLink()</td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><pre class="code_container prettyprint"><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="<strong>enableChartLinks</strong>()"/>
</body>
</html></pre>
<p>
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 <span class="codeInline">enableChartLinks </span>function. This function calls the <span class="codeInline">enableLink</span> API function of the chart. The links of the slices will get enabled and user can now click on the slices to invoke links.</p>
<p>See it <a href="../../../../Code/JavaScript/PieDoughnut/enableSlicingMovementAndLink.html" target="_blank">live</a>!</p></td>
</tr>
<tr>
<td valign="top" class="text"></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Zoom chart JavaScript API|ZoomLine_JSAPI.html","Example application|../../JS_Example.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>