CODEWITHSUNDEEP
jqueryjqplot
Snuffleupagus
Snuffleupagus

Reputation: 6715

jqPlot show percent and value on pie chart

I'm using jqPlot with jqplot.PieRenderer to try and display a pie chart. On the label I'd like to show value (percent). The documentation says you can pass dataLabel an array of label types (source), however, putting %d%% (for percent) and %d (for value) in the dataLabelFormatString option end up showing nothing.

Any ideas here?

{ 
    seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
            showDataLabels: true,
            dataLabels: ['value', 'percent'],
            dataLabelFormatString: "%d %d%%",
            sliceMargin: 4,
            fill: false
        }
    }, 
    legend: { show:true, location: 'e' }
}

Upvotes: 8

Views: 15856

Answers (2)

Diogenes Chepe Ardines Salazar
Diogenes Chepe Ardines Salazar

Reputation: 159

use 

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

Upvotes: 0

Mark
Mark

Reputation: 108512

I read those docs a little differently. It's the options 'value', 'percent', 'label' OR an array of labels. Not an array of options. To do what you want you'll need to create your datalabels as a real array of labels.

For example:

data = [
    ['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14], 
    ['Out of home', 16],['Commuting', 7], ['Orientation', 9]
];

var total = 0;
$(data).map(function(){total += this[1];})

myLabels = $.makeArray($(data).map(function(){return this[1] + " " + Math.round(this[1]/total * 100) + "%";}));

See example fiddle here.

Upvotes: 20

Related Questions