Legends overlapping the flot pie chart - php

Question

In my website I am using Flot pie charts in tabs. In every tab the legends are coming on to the pie chart. I am not understanding where I was wrong. Could anyone please help me. I attached the screen shot.
My code:
<script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/flot/jquery.flot.js"></script>
<script src="assets/plugins/flot/jquery.flot.pie.js"></script>
<script src="assets/plugins/flot/jquery.flot.resize.js"></script>
<script src="assets/plugins/flot/jquery.flot.stack.js"></script>
<script src="assets/plugins/flot/jquery.flot.crosshair.js"></script>
<?php
mysql_select_db($database_finalkms, $finalkms);
$query_getdata2 = "SELECT ComplianceStatus,count FROM indexonboard WHERE zone='PZ' and country is NULL";
$getdata2 = mysql_query($query_getdata2, $finalkms) or die(mysql_error());
$row_getdata2 = mysql_fetch_assoc($getdata2);
$totalRows_getdata2 = mysql_num_rows($getdata2);
?>
<script>
jQuery(document).ready(function() {
Charts1.initPieCharts();
});
</script>
<?php $m=0;do {?>
<input name="grptst5<?php echo $m; ?>" id="grptst5<?php echo $m; ?>" type="hidden" value="<?php echo $row_getdata2['ComplianceStatus']; ?>" />
<input name="datatst5<?php echo $m; ?>" id="datatst5<?php echo $m; ?>" type="hidden" value="<?php echo $row_getdata2['count']; ?>" />
<?php $m++;} while($row_getdata2 = mysql_fetch_assoc($getdata2));?>
<input name="totali5" id="totali5" type="hidden" value="<?php echo $totalRows_getdata2; ?>" />
<?php
mysql_free_result($getdata2);
?>
<div id="interactive5" class="chart" style="
width:400px;height: 400px;;float:right;"></div>
<script>
var Charts1 = function () { //1st
return { //2nd
//main function to initiate the module
init: function () { //3rd
App.addResponsiveHandler(function () { //4th
Charts1.initPieCharts();
}); //4th
}, //3rd
initPieCharts: function () {
var totalid5=$("#totalid5").val();
var data4 =[];
for (var n = 0; n < totali5; n++) {
var one4=document.getElementById("grptst5" + n).value;
var two4 =document.getElementById("datatst5" + n).value;
data4[n] = {
label: one4,
data: two4
}
}
$.plot($("#interactive"), data, {
series: {
pie: {
show: true,
label: {
show: true,
formatter: function(label,point){
return(point.percent.toFixed(2) + '%');
}
}
}
},
colors: ["#00FF00","#FF9933","#6495ED","#B0B0B0"],
legend: {show: true,
backgroundOpacity:0,
sorted:"comparator"
}
});
$("#interactive").bind("plothover", pieHover);
function pieHover(event, pos, obj) {
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
$("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' </span>');
}
}
}; //2nd
}(); //1st

Answer 1

I believe the issue is with your labels being to long and/or the width being to small. Try extending the div width.
<div id="placeholder" style="width:500px;height:300px;"></div>
fiddle -http://jsfiddle.net/Rnusy/46/