jqPlot show percent and value on pie chart

Question

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' }
}

Mark Mark · Accepted Answer · 2012-07-19T15:07:23

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.

jqPlot show percent and value on pie chart

2 Answers