How to show percentage and number in pie chart?

Question

I am working on pie chart to show my data. I can work fine with it just now to show only percentage. But what I wish to do is to show both percentage and number.

JS:

$(function() {
        var data = [];
        @if(count($data) > 0)
          data = <?php echo json_encode($data)?>;
        @endif
        var options = {
            series: {
                pie: {
                    show: true
                }
            },
            legend: {
                show: false
            },
            grid: {
                hoverable: false,
                clickable: true
            },
            colors: ["#94BEE0", "#D9DD81", "#E67A77","#747ddd","#669aaa","#aa7765"],
            tooltip: true,
            tooltipOpts: {
                defaultTheme: false
            }
        };
        $.plot($("#pie-chart #pie-chartContainer"), data, options);
};

My data result

$total_amount = array_sum($interest_income);
    foreach($interest_income as $key => $inc){
        if($inc > 0){
            $per_value = ($inc * 100)/$total_amount;
            $data[] = [
                'label'=> $label[$key],
                'data'=> $per_value
            ];
        }
    }

Answer 1

Your PHP is generating percentages, but you'll need to change it to generate the raw numbers (Flot can work out the percentages automatically):

foreach($interest_income as $key => $inc){
    if($inc > 0){
        $data[] = [
            'label'=> $label[$key],
            'data'=> $inc
        ];
    }
}

Then, in your JavaScript, use a formatter for your labels like this:

formatter: function (label, series) {
    var labelName = label;
    var labelNumber = series.data[0][1];
    var labelPercent = series.percent;
    var labelContent = label + '<br/>' + labelNumber + ' (' + labelPercent + '%)';
    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + labelContent + '</div>';
},

You would include this in your options, like this:

var options = {
    series: {
        pie: {
            show: true,
            label: {
                formatter: function (label, series) {
                    var labelName = label;
                    var labelNumber = series.data[0][1];
                    var labelPercent = series.percent;
                    var labelContent = label + '<br/>' + labelNumber + ' (' + labelPercent + '%)';
                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + labelContent + '</div>';
                },
            }
        }
    },
    legend: {
        show: false
    },
    grid: {
        hoverable: false,
        clickable: true
    },
    colors: ["#94BEE0", "#D9DD81", "#E67A77","#747ddd","#669aaa","#aa7765"],
    tooltip: true,
    tooltipOpts: {
        defaultTheme: false
    }
};

JSFiddle: http://jsfiddle.net/LvLfcdur/