CODEWITHSUNDEEP
jqplot
Salman Armaan
Salman Armaan

Reputation: 23

Jqplot pie chart rendering only lines

am loading jqplot corresponding files dynamically and passed data to the and chart div but at sometimes am getting the graph and some other time am not getting the graph my code as follows i maid an ajax call to get the values and passed to the graph in object st and the output am getting is shown here http://i43.tinypic.com/wcfns0.png please help me function 

jsFunction3(xyz) {
 jQuery.getCSS = function( url, media )
 {
 jQuery( document.createElement('link') ).attr({ href: url, media: media || 'screen', type: 'text/css', rel: 'stylesheet' }).appendTo('head'); };

 $.getCSS('/redkanproject/plugins/jqplot-0.1/css/jqplot/jquery.jqplot.css','print'); 
 $.getScript('/redkanproject/plugins/jqplot-0.1/js/jqplot/jquery.jqplot.min.js', 

function() { }); $.getScript('/redkanproject/plugins/jqplot-0.1/js/jqplot/excanvas.min.js', function() { });
 $.getScript('/redkanproject/plugins/jqplot-0.1/js/jqplot/plugin/jqplot.pieRenderer.min.js', function() { }); 

var JSONObject = new Object; 
JSONObject.id =xyz;
 JSONstring = JSON.stringify(JSONObject); 
var url = "${createLink(controller:'page', action:'example4')}"; new Ajax.Request(url, { method:'post', contentType:'application/json', postBody:JSONstring, asynchronous:true, onSuccess: function (res) { 
st=(res.responseJSON)
 x="chart" // this is my div to display chart 
var plot1 = $.jqplot (x, [st], { title: 'Bianual Reviews percentage', grid: {
background:'#834100', shadow: true,borderWidth: 0, borderColor: 'white',shadowDepth: 0}, seriesDefaults: {
 // Make this a pie chart. 
renderer: $.jqplot.PieRenderer, rendererOptions: { 
// Put datalabels on the pie slices. 
// By default, labels show the percentage of the slice. 
sliceMargin:6,
showDataLabels: true
 }
 },
 legend: { show:true, location: 'e' } } ); 
$(x).bind('jqplotDataClick', function(ev,seriesIndex, pointIndex, data) 
{ alert(" data: "+data); } 
);
 } 
})//ajax }
------------------------------------------------------------------------

Upvotes: 0

Views: 1065

Answers (1)

Kevin
Kevin

Reputation: 11

I had a similar issue and it turned out that I had a global style on the table element which sets the width to 100%. eg

table{
width:100%
}

I changed that to auto and everything displayed correctly

table{
width:auto;
}

Hope that helps :-)

Upvotes: 1

Related Questions