JQuery flot pie chart size bug

Question

---

I am using JQuery flot to create some awesome pie charts and the result is exactly what I am looking for, exept for one thing. The size of the pie itself is diferent depending on the amount of data in it. i'll post the code below aswell as a fiddle link to the working example http://jsfiddle.net/2dHVY/1/

HTML

<div id="canvas"></div>

Javascript

for (var i = 0; i < 3; i++) {
 createPie(i);
}


function createPie(i) {
  var a;
  var b;
  if (i == 0){a=33; b=66}
  if (i == 1){a=3; b=2}    
  if (i == 2){a=1; b=1}


     $("#canvas").append("<div  id='placeholder"+i+"' class='placeholder'></div>");
    var data = [{
        label: "a",
        data: a,
        color: "#299a0b"
    }, {
        label: "b",
        data: b,
        color: "#f79621"
    },];

    var placeholder = $("#placeholder"+i);
    placeholder.unbind();
        $.plot(placeholder, data, {
series: {
  pie: {
    show: true,
    radius: 1,
    label: {
      show: true,
      radius: 1,
      formatter: labelFormatter,
      background: {
        opacity: 0.8
      }
    }
  }
},
grid: {
  hoverable: false,
  clickable: true
},

legend: {
  show: false
}
});

}

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

I dont know what the problem is but I guess it's the way flot renders the pie becous the one that got a 50/50 value ratio is smaller then the once with 60/40 and that one is smaller then the one with 67/33. altho the placeholder is the same size. Any ideas why and how this is happening

Answer 1

It looks like its to do with where the labels on the pie chart's are rendered. You could try changing the position of the labels so they are inside the pie chart.

Look at this site: http://www.flotcharts.org/flot/examples/series-pie/ which shows you the difference between 2 different label styles.

You need to change the label property in your JavaScript like this:

label: {
      show: true,
      radius: 1,
      formatter: labelFormatter,
      background: {
        opacity: 0.8
      }

to:

label: {
      show: true,
      radius: 3/4,   //This sets where the labels position themselves on the pie chart
      formatter: labelFormatter,
      background: {
        opacity: 0.8
      }

I have created a fiddle for you to check out.

There is a difference between "Label Styles #1" and "Label Styles #2" as presented on the Flot website: