FusionCharts - Using macros to embed percent value, sum, label and data value in dynamic tooltips of a pie chart

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/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Using macros to embed percent value, sum, label and data value in dynamic tooltips of a pie chart Attribute: # plotTooltext Macros: # $percentValue # $sum # $label # $dataValue -->
<div id="chart-container">FusionCharts will render here</div>

CSS

#nameDiv {
    font-size: 14px;
    border-bottom: 1px dashed #666666;
    font-weight:bold;
    padding-bottom: 3px;
    margin-bottom: 5px;
    display: inline-block;
}

JavaScript

FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        type: 'multilevelpie',
        renderAt: 'chart-container',
        width: '550',
        height: '550',
        dataFormat: 'json',
        dataSource: {

            "chart": {
                "caption": "Adwords Snapshot",
                    "bgcolor": "FFFFFF",
                    "pieborderthickness": "2",
                    "piebordercolor": "FFFFFF",
                    "basefontsize": "9",
                    "usehovercolor": "1",
                    "hover": "CCCCCC",
                    "showlabels": "0",
                    "showvalue": "1",
                    "showvalueintooltip": "1",
                    "hoverfillcolor": "CCCCCC",
                    "showborder": "0"
            },
                "annotations": {
                "groups": [{
                    "id": "infobar",
                        "items": [

                    {
                        "id": "label",
                            "type": "text",
                            "text": "ASP.NET",
                            "fillcolor": "194775",
                            "rotate": "90",

                            "x": "$canvasEndX-170",
                            "y": "100"
                    },
                          {
                        "id": "label",
                            "type": "text",
                            "text": "Templates",
                            "fillcolor": "#006600",
                            "rotate": "90",

                            "x": "$canvasEndX-420",
                            "y": "150"
                    }]
                }]
            },
                "category": [{
                "label": "Adwords Clicks",
                    "color": "FFFFFF",
                    "alpha": "20",
                    "category": [{
                    "label": "Development",
                        "value": "41",
                        "color":...