I am just trying to draw a simple pie chart using flotr(an open source javascript for developing various charts). But the code i gave works a little part. The chart was drawn and the explode properties, horizontal and vertical lines all works fine. But the mouse tracker and the legends are not working. I think i have made some mistake in code. but i am not able to clear it. Anyone help me out please. Thanks in advance.
<html>
<head>
<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="flotr.js"></script>
</head>
<body>
<div id="container" style="width:600px;height:300px;" ></div>
<script type="text/javascript">
(function basic_pie(container) {
var
d1 = [[0, 4]],
d2 = [[0, 3]],
d3 = [[0, 1.03]],
d4 = [[0, 3.5]],
graph;
graph = Flotr.draw('container', [
{ data : d1, label : 'Comedy' },
{ data : d2, label : 'Action' },
{ data : d3, label : 'Romance',
pie : {
explode : 50
}
},
{ data : d4, label : 'Drama' }
], {
HtmlText : false,
grid : {
verticalLines : false,
horizontalLines : false
},
xaxis : { showLabels : false },
yaxis : { showLabels : false },
pie : {
show : true,
explode : 6
},
mouse : { track : true },
legend : {
position : 'se',
backgroundColor : '#D2E8FF'
}
});
})(document.getElementById("editor-render-0"));
</script>
</body>
</html>
You might have an error in your legend configuration, I deleted it and the legend appeared correctly. Take a look: http://jsfiddle.net/Kpmcn/