Slice Data Plot using API

FusionCharts Suite XT includes advanced features that offers a wide range of APIs that you can use for different stages in the ife cycle of a chart or when you interact with a chart. These features include completion of rendering of the chart, handling the radio button at runtime, etc.

This article focuses on how you can slice out the data plots of a Pie 2D chart using chart specific custom API. The chart will be rendered using FusionCharts PHP wrapper.

A chart configured to slice out the data plots of a pie2d chart, is shown below:

FusionCharts will load here..
    "chart": {
        "caption": "Market Share of Web Servers",
        "plottooltext": "<b>$percentValue</b> of web servers run on $label servers",
        "showPercentValues": "1",
        "useDataPlotColorForLabels": "1",
        "enableMultiSlicing": "0",
        "showlegend": "0",
        "theme": "fusion"
    "data": [
            "label": "Apache",
            "value": "32647479"
            "label": "Microsoft",
            "value": "22100932"
            "label": "Zeus",
            "value": "14376"
            "label": "Other",
            "value": "18674221"

The full code for the above chart is shown below:

<!DOCTYPE html>
    /* Include the `../src/fusioncharts.php` file that contains functions to embed the charts.*/

    <title>FusionCharts | Slice Data Plot using API</title>
    <!-- FusionCharts Library -->
    <script type="text/javascript" src="//"></script>
    <script type="text/javascript" src="//"></script>
        plotClickHandler = function(event){
                clickedPlot = (;
                    if (selectedItem !== clickedPlot) {
                        selectedItem = clickedPlot;
                    } else{
                        selectedItem = 'none';
            selectedItem = "none";
            getFusionChart = function(){
                return FusionCharts("chart-1");
            noneChecked = function(){
            apacheChecked = function(){
            microsoftChecked = function(){
            zeusChecked = function(){
            otherChecked = function(){


        $chartData ="{  
                \"caption\": \"Market Share of Web Servers\",
                \"plottooltext\": \"<b>\$percentValue</b> of web servers run on \$label servers\",
                \"showLegend\": \"0\",
                \"enableMultiSlicing\": \"0\",
                \"showPercentValues\": \"1\",
                \"legendPosition\": \"bottom\",
                \"useDataPlotColorForLabels\": \"1\",
                \"theme\": \"fusion\"
            \"data\": [{ 
                    \"label\": \"Apache\",
                    \"value\": \"32647479\"
                }, { 
                    \"label\": \"Microsoft\", 
                    \"value\": \"22100932\" 
                }, { 
                    \"label\": \"Zeus\", 
                    \"value\": \"14376\" 
                }, { 
                    \"label\": \"Other\",
                    \"value\": \"18674221\" 

        // chart object
        $Chart = new FusionCharts("pie2d", "chart-1" , "450", "250", "chart-container", "json", $chartData);
        // Attach message with message string.
        $Chart->addEvent("dataplotClick", "plotClickHandler");
        // Render the chart
    <h3>Example of event(SpecialChartType API)</h3>
    <div align="center" id="chart-container">Chart will render here!</div>
    <br />
    <br />
    <div id="controllers" align="center" style="font-family:'Helvetica Neue', Arial; font-size: 14px;">
        <label style="padding: 0px 5px !important;">
            <input type="radio" name="rdGrp-options" checked onClick="noneChecked()" /> None
        <label style="padding: 0px 5px !important;">
            <input type="radio" name="rdGrp-options" onClick="apacheChecked()" /> Apache
        <label style="padding: 0px 5px !important;">
            <input type="radio" name="rdGrp-options" onClick="microsoftChecked()" /> Microsoft
        <label style="padding: 0px 5px !important;">
            <input type="radio" name="rdGrp-options" onClick="zeusChecked()" /> Zeus
        <label style="padding: 0px 5px !important;">
            <input type="radio" name="rdGrp-options" onClick="otherChecked()" /> Other



The above chart has been rendered using the following steps:

  1. Include the fusioncharts.php file which contains functions to embed the charts.

  2. Include the necessary libraries and components using <script> tags. For example, fusioncharts.js, fusioncharts.theme.fusion.js.

  3. Store the chart data in a JSON object.

  4. Store the chart configuration in a JSON object. In the JSON object:

    • Set the chart type as pie2d. Find the complete list of chart types with their respective alias here.
    • Set the width and height of the chart in pixels.
    • Set the dataFormat as JSON.
    • Embed the json data as the value of dataSource.
  5. Create Radio Buttons and add functionalities to change themes at runtime.

  6. Create the <div> element to render radio buttons.