4

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.

The result I work on show as below

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
            ];
        }
    }
royhowie
  • 11,075
  • 14
  • 50
  • 67
Tum Lina
  • 477
  • 1
  • 7
  • 18
  • possible duplicate of [Jquery Flot pie charts show data value instead of percentage](http://stackoverflow.com/questions/5673870/jquery-flot-pie-charts-show-data-value-instead-of-percentage) – Nick Coad Jul 20 '15 at 02:09
  • I found that answer that may duplicate my question. But I can't understand the answer that why I decided to ask here again. – Tum Lina Jul 20 '15 at 02:11
  • @TumLina That's why people need to explain their answer more. Lots of *"try this"* answers pop and and are not useful. Anyways what is in your `data`, you can do something similar depending on what `data` is. – Spencer Wieczorek Jul 20 '15 at 02:15
  • @SpencerWieczorek - my data is the result of my calculate in my php function as above. – Tum Lina Jul 20 '15 at 02:23
  • @TumLina agreed, the answer isn't great. I've tried to explain in my own answer below. – Nick Coad Jul 20 '15 at 02:37

1 Answers1

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/

Nick Coad
  • 3,623
  • 4
  • 30
  • 63