FusionCharts API-Event: slicingEnd

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/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the event parameters, and their values, when slicingEnd event is triggered-->
<div id="indicatorDiv">Event name: <strong> slicingEnd </strong> 
    
    <p>Triggered when a pie or a doughnut slice completes slicing out/slicing in.</p>
    <p>All events, when triggered, will provide two parameters for the handler - <strong> eventObj </strong> (object containing information generic to all events) and <strong> dataObj </strong> (object containing information specific to an event).</p>
    <p>Click any pie slice to slice it out. The slicingEnd event is triggered just when the pie slice is sliced out. Scroll down to the table rendered below the chart to view information contained in the dataObj object. To view information contained in the eventObj object, open the console.</p>
    
</div>
<div id="chart-container">FusionCharts will render here</div>
<div>
    <div>
        <div id="header">
            <div class="parameter-name">Parameter Name</div>
            <div class="parameter-value">Parameter Value</div>
        </div>
        <div id="attrs-table"></div>
    </div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong{
  font-weight: bold;
}
#header {
    display: none;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 14px;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
}
#attrs-table {
    text-align: center;
    width: 500px;
}
.parameter-name, .parameter-value {
    width: 250px;
    font-weight: bold;
    text-align: center;
    float: left;
}
.title, .value {
    float:left;
    width: 230px;
    height: 20px;
    background: #fff;
    padding: 5px 10px;
}
.title {
    clear: left;
}
.title:nth-child(4n+1), .value:nth-child(4n+2) {
    background: rgb(0, 117, 194);
    color: #fff;
}
.value {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of revenue by product categories",
                    "subCaption": "Last year",
                    "numberPrefix": "$",
                    "showPercentInTooltip": "0",
                    "decimals": "1",
                    "theme": "fint"
            },
                "data": [{
                "label": "Food",
                    "value": "285040"
            }, {
                "label": "Apparels",
                    "value": "146330"
            }, {
                "label": "Electronics",
                    "value": "105070"
            }, {
                "label": "Household",
                    "value": "49100"
            }]
        },
            "events": {

            /**
             * @description
             * This event is triggered when a pie or a doughnut slice completes slicing out/slicing in.
             *
             * @param {Object} eventObj: An object containing all the details related to this event like eventId, sender, etc.
             * @param {Object} dataObj: An object containing all the details related to chart data, such as the data index of the slice being sliced out.
             */

                "slicingEnd": function (eventObj, dataObj) {
                console.log(eventObj);
                var header = document.getElementById('header');
                header.style.display = 'block';

                var tempDiv = document.createElement('div');
                var attrsTable = document.getElementById('attrs-table');
                var titleDiv, valueDiv;
                for (var prop in dataObj) {
                    titleDiv = document.createElement('div');
                    titleDiv.className = 'title';
                  ...