FusionCharts API-Methods: isPlotItemSliced

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the isPlotItemSliced() method. -->
<div id="indicatorDiv">Method Name: <strong>isPlotItemSliced()</strong>

    
   <p>Checks whether a particular slice of the pie/doughnut chart is sliced-out or sliced-in.</p>
   <p>Select a pie-slice from the drop-down given below. Click <strong>Check Status</strong>. The text <strong>The selected data plot is </strong>, rendered below the button, is updated to reflect the status of the slice (sliced/not sliced).</p>
    
    
        <div class="text-center mb-20">
        	<select id="slice_name">
        	    <option value="0">Teenager</option>
        	    <option value="1">Adult</option>
        	    <option value="2">Mid-age</option>
        	</select>        	
        	
        	<button id="check_status">Check Status</button>       
       </div>
        
        <div id="status" class="text-center mb-20">The selected pie slice is <span id="msg"></span></div>
        
        <div id="chart-container">FusionCharts will render here</div>

</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}

p {
  margin: 10px auto;
}

.mb-20 {
  margin-bottom: 20px;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#slice_name {
    height: 25px;
    font-size: 12px;
}
#check_status {
    height: 25px;
    font-size: 13px;
}
#status {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#msg {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
.slice_status {
    color: #ee0930;
}

JavaScript

FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '500',
        height: '250',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Visitors by Age Group",
                    "subCaption": "Last year",
                    "theme": "fint",
                    "captionFontSize": "13",
                    "subcaptionFontSize": "12"
            },
                "data": [{
                "label": "Teenage",
                    "value": "1250400"
            }, {
                "label": "Adult",
                    "value": "1463300"
            }, {
                "label": "Mid-age",
                    "value": "1050700"
            }]
        }
    }).render();

    var msg = document.getElementById("msg");
    /**
     * @description
     * The isPlotItemSliced() method checks whether a particular slice of the pie/doughnut chart is sliced-out or sliced-in.

     *
     * @param {Number} index: Index of the pie/doughnut slice being checked
     *
     *
     * usage: chartObj.isPlotItemSliced(index);
     *         
     */
    function slice() {
        var plot_no = document.getElementById("slice_name");
        var flag = ageGroupChart.isPlotItemSliced(plot_no.value);
        if (flag === true) {
            msg.innerHTML = "<span class='slice_status'>sliced.</span>";
        } else {
            msg.innerHTML = "<span class='slice_status'>not sliced.</span>";
        }
    }
    document.getElementById("check_status").addEventListener("click", slice);

});