I made a pie chart using the jqPlot and the pie chart did render, my code is mentioned below
var plot4 = $.jqplot('pie', [[["none",10],["error",20],["click",30],["impression",40]]], {
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions:{ sliceMargin: 0 }
},
legend:{ show: true }
});
the problem that I am facing is that when I hover over the Pie Chart I get an error stating
B.axes[D[0]]._ticks[0] is undefined
On the firebug console. When I click on any of the slice of the pie chart I see a much more strange occurrence where the entire slice where I clicked disappears.
Before the click the pie chart looks as follows:-
after I click on the brown region that pie turns out to be something as shown below and even the brown slice disappears.
Please Provide solution for the above. I have tried out different configurations but din work. And also let me tell you I am using other plugins like the bargraph and cursor on this page.
I have mentioned below the entire source code of my page where I am doing this:-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jqPlot Demo</title>
<!--[if IE]><script src="./js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="./js/jqplot.dragable.min.js"></script>
<script type="text/javascript" src="./js/jqplot.trendline.min.js"></script>
<script type="text/javascript" src="./js/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="./js/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="./js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="./css/jquery.jqplot.min.css"/>
<link rel="stylesheet" href="./css/jqPlot.css"/>
<script>
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var lineGraph=$.jqplot('chart', [[[10, 2],[30,5.12],[50,13.1],[70,33.6],[90,85.9],[11,20.9]]],
{
title:'Exponential Line',
axes:{yaxis:{min:0,max:100},xaxis:{min:0,max:100}},
legend:{
show:true,
location:'se',
xoffset:12,
yoffset:0
},
grid:{
gridLineColor:'#F2F2F2',
background:'#FFFFFF',
borderWidth:1,
borderColor:'#BBBBBB',
shadow:true,
shadowAmgle:45,
shadowWidth:2,
shadowOffset:2,
shadowDepth:2
},
cursor:{
style: 'pointer',
show:false,
showTooltip: true,
followMouse:true,
tooltipOffset:10,
tooltipLocation:'se'
},
highlighter: {
lineWidthAdjust: 2.5,
sizeAdjust: 5,
showTooltip: true,
tooltipLocation: 'nw',
fadeTooltip: true,
tooltipFadeSpeed: "fast",
tooltipOffset: 2,
tooltipAxes: 'both',
tooltipSeparator: ', ',
useAxesFormatters: true,
tooltipFormatString: '%.5P'
},
seriesDefaults:{
trendline:{
show:true,
color:'#A2D379',
lable:'trendX',
lineWidth:2,
shadow:true
},
color:'#058DC7',
lineWidth:5,
fill:true,
fillAndStroke:true,
fillColor:'#E6F4F9'
}
});
var plot4 = $.jqplot('pie', [[["none",10],["error",20],["click",30],["impression",40]]], {
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions:{ sliceMargin: 0 }
},
legend:{ show: true },
cursor: {
show: false
}
});
});
$('document').ready(function(){
$('.column').sortable({
connectWith:'.column',
handle:'h2',
cursor:'move',
placeholder:'placeholder',
forcePlaceholderSize:true,
opacity:0.4,
revert:true
}).disableSelection();
}
);
</script>
</head>
<body>
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1</h2>
<div class="dragbox-content" >
<div id="chart" style="width:100%;height:100%;float:left"></div>
</div>
</div>
</div>
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1</h2>
<div class="dragbox-content" >
<div id="pie" style="width:100%;height:100%;float:left"></div>
</div>
</div>
</div>
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1</h2>
<div class="dragbox-content" >
<div id="chart1" style="width:400px;height:300px;float:left"></div>
</div>
</div>
</div>
<div id="barRender" style="width:400px;height:300px;float:left"></div>
</body>
</html>
Ok I got the answer to the Question. We just need to remove one line of the code and things work great after that
As I remove the above I am invoking individual plugins whenever required and wherever required. When this statement was there then all the plugins were enabled and that was the reason for the weird output.