FusionCharts - Pie Slicing Start and Slicing End Event

Created using FusionCharts Suite XT - www.fusioncharts.com

by Moonmi Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample showcases slicingStart event(slicingEnd event could also be used here). This sample renders the same data in a Pie chart and in a table. By selecting a pie slice the corresponding cell in that table gets highlighted. Events name: 1. slicingStart 2. slicingEnd -->
<div id="chart-container">FusionCharts will render here</div>
<div id="tableCont">
    
</div>

CSS

body {
    font-family:"Arial", "Verdana", "sans";
    font-size:80%;
}
body div {
    float: left;
    padding: 0 10px;
}
h3 {
    margin: 10px 0;
    padding: 5 auto;
}
table {
    margin: 0 auto;
    border-collapse: collapse;
    border: 1px solid;
    border-bottom: 2px solid;
}
th {
    background-color: #333;
    color: #ffffff;
}
th, td {
    border: 1px solid #000;
    padding: 10px 5px;
    min-width: 70px;
    text-align: center;
}
tr:nth-child(1) > td:nth-child(1) {
    border-color: #fff;
}
tr:nth-child(2) > td {
    color: #6baa01;
}

JavaScript

FusionCharts.ready(function () {

    var revenueChart = new FusionCharts({
        type: 'mscombi2d',
        renderAt: 'chart-container',
        width: '450',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Harry's SuperMart",
                    "subCaption": "Sales analysis of last year",
                    "xAxisname": "Month",
                    "yAxisName": "Amount (In USD)",
                    "numberPrefix": "$",
                    "showBorder": "0",
                    "showValues": "0",
                    "paletteColors": "#0075c2,#1aaf5d,#f2c500",
                    "bgColor": "#ffffff",
                    "showCanvasBorder": "0",
                    "canvasBgColor": "#ffffff",
                    "captionFontSize": "14",
                    "subcaptionFontSize": "14",
                    "subcaptionFontBold": "0",
                    "divlineColor": "#999999",
                    "divLineDashed": "1",
                    "divLineDashLen": "1",
                    "divLineGapLen": "1",
                    "showAlternateHGridColor": "0",
                    "usePlotGradientColor": "0",
                    "toolTipColor": "#ffffff",
                    "toolTipBorderThickness": "0",
                    "toolTipBgColor": "#000000",
                    "toolTipBgAlpha": "80",
                    "toolTipBorderRadius": "2",
                    "toolTipPadding": "5",
                    "legendBgColor": "#ffffff",
                    "legendBorderAlpha": "0",
                    "legendShadow": "0",
                    "legendItemFontSize": "10",
                    "legendItemFontColor": "#666666"
            },
                "categories": [{
                "category": [{
                    "label": "Jan"
                }, {
                    "label": "Feb"
                }, {
                    "label": "Mar"
                }, {
                    "label":...