How to get data text in Flot Pie Chart left panel

Question

We made some section in Flot Pie Chart but we can't get data for jquery data setting which is coming in left side area in default plugin show two field but we want to show three data. We are using flot pie chart jquery plugin :-

please see the image:-

jquery setting :-

// Flot Pie Chart - Traffic Sources bar
    $(function() {

        var data = [{
            label: "Direct",
            data: 15,
            color: "#d3d3d3",
        }, {
            label: "Display",
            data: 5,
            color: "#bababa",
        }, {
            label: "Organic",
            data: 30,
            color: "#79d2c0",
        }, {
            label: "Paid",
            data: 15,
            color: "#1ab394",
        }, {
            label: "Referral",
            data: 20,
            color: "#049e7f",
        }, {
            label: "Social",
            data: 15,
            color: "#00775f",
        }];

        var plotObj = $.plot($("#traffic-sources"), data, {
            series: {
                pie: {
                    show: true                      
                }
            },
            grid: {
                hoverable: true
            },
            tooltip: true,
            tooltipOpts: {
                content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                shifts: {
                    x: 20,
                    y: 0
                },
                defaultTheme: false
            }
        });

        var addTd = '<td class="legendData"> hello </td>';
        $('#traffic-sources').find('.legendColorBox').next().before(addTd);

    });

Answer 1

$(function() {

  var data = [{
    label: "Direct",
    data: 15,
    color: "#d3d3d3",
  }, {
    label: "Display",
    data: 5,
    color: "#bababa",
  }, {
    label: "Organic",
    data: 30,
    color: "#79d2c0",
  }, {
    label: "Paid",
    data: 15,
    color: "#1ab394",
  }, {
    label: "Referral",
    data: 20,
    color: "#049e7f",
  }, {
    label: "Social",
    data: 15,
    color: "#00775f",
  }];

  for (var i = 0; i < data.length; i++) {
    //put the data value into the label
    data[i].label = ' ' + data[i].data + '% ' + data[i].label;
  }

  var plotObj = $.plot($('#traffic-sources'), data, {
    series: {
      pie: {
        show: true,
      }
    },

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/flot/flot/958e5fd4/jquery.flot.js"></script>
<script src="https://cdn.rawgit.com/flot/flot/master/jquery.flot.pie.js"></script>
<div id="traffic-sources" style="width:500px;height:400px;"></div>

loop through all your data object and concatenate your label with data data[i].label = ' '+data[i].data+'% '+data[i].label; and then show it.