Jquery float pie : changing the way the caption appears

Question

I need to change how the float pie legend appears, I need it to appear a label : percentage of the graph. so and to stay

so this

code of js

    (function( $ ) {

    'use strict';

    (function() {
        var plot = $.plot('#flotPie', flotPieData, {
            series: {
                pie: {
                    
                    show: true,
                    combine: {
                        color: '#999',
                        threshold: 0.1
                    },
                    
                }
            },
            legend: {
                show: true,
                
            },
            grid: {
                hoverable: true,
                clickable: true
            }
        });
    })();

}).apply( this, [ jQuery ]);

code of HTML

<div class="chart chart-sm" id="flotPie">
                                                <script type="text/javascript">
                                                    var flotPieData = [{
                                                        label: "Otimo: ",
                                                        data: [
                                                            [1, 1]
                                                        ],
                                                        color: '#0088cc'
                                                    }, {
                                                        label: "Bom:",
                                                        data: [
                                                            [1, 1]
                                                        ],
                                                        color: '#2baab1'
                                                    }, {
                                                        label: "Regular:",
                                                        data: [
                                                            [1, 1]
                                                        ],
                                                        color: '#734ba9'
                                                    }, {
                                                        label: "Ruim:",
                                                        data: [
                                                            [1, 1]
                                                        ],
                                                        color: '#E36159'
                                                    }];
                                                </script>
                                                </div>

I'm using a template, where I pass this information, I thought of concatenating the label + percentage more how would you do that?

Answer 1

in order to show the percentage on the legend label,
you will need to calculate each percentage,
and modify the label accordingly,
before drawing the chart.

first, calculate the total. this is achieved by looping the data set and totaling the y-axis value of each series row.

var total = 0;
$.each(flotPieData, function(indexSeries, series) {
  $.each(series.data, function(indexRow, row) {
    total += row[row.length - 1];
  });
});

next, the loop the data set again,
calculate the percentage,
and modify the label.

$.each(flotPieData, function(indexSeries, series) {
  var percent = 0;
  $.each(series.data, function(indexRow, row) {
    percent += row[row.length - 1];
  });
  flotPieData[indexSeries].label += ' ' + ((percent / total) * 100).toFixed(0) + '%';
});

see following working snippet...

var flotPieData = [{
  label: "Otimo:",
  data: [
    [1, 1]
  ],
  color: '#0088cc'
}, {
  label: "Bom:",
  data: [
    [1, 1]
  ],
  color: '#2baab1'
}, {
  label: "Regular:",
  data: [
    [1, 1]
  ],
  color: '#734ba9'
}, {
  label: "Ruim:",
  data: [
    [1, 1]
  ],
  color: '#E36159'
}];

var total = 0;
$.each(flotPieData, function(indexSeries, series) {
  $.each(series.data, function(indexRow, row) {
    total += row[row.length - 1];
  });
});

$.each(flotPieData, function(indexSeries, series) {
  var percent = 0;
  $.each(series.data, function(indexRow, row) {
    percent += row[row.length - 1];
  });
  flotPieData[indexSeries].label += ' ' + ((percent / total) * 100).toFixed(0) + '%';
});

var plot = $.plot('#flotPie', flotPieData, {
  series: {
    pie: {
      show: true,
      combine: {
        color: '#999',
        threshold: 0.1
      },

    }
  },
  legend: {
    show: true,
  },
  grid: {
    hoverable: true,
    clickable: true
  }
});

.flot {
  left: 0px;
  top: 0px;
  width: 610px;
  height: 250px;
}

#flotTip {
  padding: 3px 5px;
  background-color: #000;
  z-index: 100;
  color: #fff;
  opacity: .80;
  filter: alpha(opacity=85);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>

<div id="flotPie" class="flot"></div>