FusionCharts - MultiLevel DataPlotClick

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample highlights the use of events that can be trapped by developers to their advantage and take necessary actions on the chart or affect/update the chart environment -->
<div id="chart-container">FusionCharts will render here</div>
<div>
    <div id="indicatorDiv" style="color: #1790e1; width: 480px; font-family: 'Arial','Helvatica'; font-size: 14px; padding: 10px; ">Click on any of the pie slice to view details.</div>

JavaScript

FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        "type": "multilevelpie",
            "renderAt": "chart-container",
            "id": "myChart",
            "width": "500",
            "height": "500",
            "dataFormat": "json",
            "dataSource": {
            "chart": {
                "caption": "Split of Top Products Sold",
                    "subCaption": "Last Quarter",
                    "captionFontSize": "14",
                    "subcaptionFontSize": "14",
                    "baseFontColor": "#333333",
                    "baseFont": "Helvetica Neue,Arial",
                    "basefontsize": "9",
                    "subcaptionFontBold": "0",
                    "bgColor": "#ffffff",
                    "canvasBgColor": "#ffffff",
                    "showBorder": "0",
                    "showShadow": "0",
                    "showCanvasBorder": "0",
                    "pieFillAlpha": "60",
                    "pieBorderThickness": "2",
                    "hoverFillColor": "#cccccc",
                    "pieBorderColor": "#ffffff",
                    "useHoverColor": "1",
                    "showValuesInTooltip": "1",
                    "showPercentInTooltip": "0",
                    "numberPrefix": "$",
                    "plotTooltext": "$label, $valueK, $percentValue"
            },
                "category": [{
                "label": "Sales by category",
                    "color": "#ffffff",
                    "value": "150",
                    "category": [{
                    "label": "Food & {br}Beverages",
                        "color": "#f8bd19",
                        "value": "55.5",
                        "category": [{
                        "label": "Breads",
                            "color": "#f8bd19",
                            "value": "11.1"
                    }, {
                        "label": "Juice",
                            "color": "#f8bd19",
   ...