Skip to content

Looking at Pie Charts in JQPlot extensively for ASP.NET and how the browsers render it

May 4, 2012

Today I had spent research and focus on the Pie Charts page as to yesterday which had been spent on Line Charts, when coding static data onto the JQPlot pie chart, this had been fairly simple using the demos, it had been working very well on Firefox, however when I added the fourth function to plot and render JSON objects, it abysmally failed even in Firefox, see below.

Image

Looking at this carefully, it had been in fact that the third and fourth function was calling the same web method hence you cannot call the same one as all web browsers failed, but after pointing to the different web methods for obtaining the JSON object, all seemed well.

Image

From when I worked with JQPlot more and more, Mozilla Firefox seemed the most flexible and versatile especially of the naming of variable names in Javascript, if you reuse the variable names like repeating varialbe names for plotting the chart and JSON Renderer methods, Firefox handles them fine, but IE9 & certainly Chrome do not handle them well, you have to name every object differently.

I don’t want to go into so much technical detail with the following code but its the only way of describing my findings: – 

var jsonRenderer = function() {
var ret = [[]];
$.ajax({
async: false,
type: “POST”,
url: “piecharts.aspx/GetThirdData”,
data: “{}”,
contentType: “application/json;”,
dataType: “json”,
success: function(data3) {
var _elements = data3.d;
var array = $.map(_elements, function(item, index) {
var i = [item.Legend, item.Value];
ret[0].push(i);
});
}
});
return ret;
};

var plot3 = $.jqplot(‘chart3’, [], {
title: ‘Popular Mobile Manufacturers’,
dataRenderer: jsonRenderer,
// axes: {
// xaxis: {
// label: “X Axis”,
// pad: 0
// },
// yaxis: {
// label: “Y Axis”
// }
// }
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Turn off filling of slices.
fill: true,
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 6,
// stroke the slices with a little thicker line.
lineWidth: 8
}
},
legend: { show: true, location: ‘e’ }
});

var jsonRenderer2 = function() {
var ret2 = [[]];
$.ajax({
async: false,
type: “POST”,
url: “piecharts.aspx/GetFourthData”,
data: “{}”,
contentType: “application/json;”,
dataType: “json”,
success: function(data4) {
var _elements2 = data4.d;
var array2 = $.map(_elements2, function(item2, index2) {
var i2 = [item2.Legend, item2.Value];
ret2[0].push(i2);
});
}
});
return ret2;
};

var plot4 = $.jqplot(‘chart4’, [], {
title: ‘Popular Mobile Manufacturers’,
dataRenderer: jsonRenderer2,
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Turn off filling of slices.
fill: false,
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 12,
// stroke the slices with a little thicker line.
lineWidth: 20
}
},
legend: { show: true, location: ‘e’ }
});

If you call the variable jsonRenderer for both repeatedly, Firefox is fine, its just that IE9 and Google Chrome complain, after changing jsonRenderer to have the second function called jsonRenderer 2 as in the code, the browser IE9 is fine, but Chrome still complains.

IE9 seems to be happy with the variable names externally once they have been changed, and internally inside the Javascript functions, and renders the JQPlot graph fine.

Image

Image

JQPlot just doesn’t work or bode well with Google Chrome!! Even if it uses the same code for IE9, it now displays things randomly like its a bug on the rendering or something.

Image

Mozilla Firefox works a treat at anything thrown at it!

 

After analysing further, it is actuallImagey in fact the data variable inside the success: function(data) which Google Chrome is particular fussy about, so you have to change this to data* where * is a number for it to be syntactically happy. Google need to have a look at these issues as they have been in the browser game for a relative short period of time.

Image

On a side note, if anyone can work out with the following code as to why parseJSON can render double arrays using numbers but not with strings using JQPlot, they can certainly have a free eBook on me.

Image

With variable names and methods maybe possibly repeated and not in the correct order, Google Chrome simply fell apart as I had expected, so I had to check on the data side of things that the variable names were all different in the success call of the JSON.

With the $.parseJSON(data); I certainly was dealing with an entirely new beast! Firstly I don’t really understand what it does, it just does some magic behind and it works

You can see in the code I commented out jsonRenderer3 as Firefox complained about an unrecognised object when it rendered the JSON.

var arr = [];

//var jsonRenderer3 = function() {
var ret3 = [[]];
$.ajax({
async: false,
type: “POST”,
url: “piecharts.aspx/GetSixthData”,
data: “{}”,
contentType: “application/json;”,
dataType: “json”,
success: function(data6) {
arr = $.parseJSON(data6.d);
}
});
//return ret3;
//};

var plot6 = $.jqplot(‘chart6’, arr, {
title: ‘Popular Mobile Manufacturers’,
//dataRenderer: jsonRenderer3,
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Turn off filling of slices.
fill: false,
showDataLabels: true,
// Add a margin to seperate the slices.
sliceMargin: 12,
// stroke the slices with a little thicker line.
lineWidth: 20
}
},
legend: { show: true, location: ‘e’ }
});

See the screenshots once I had the code in the C# code behind as:-

[WebMethod]
public static string GetSixthData()
{
//return (“[[‘Sony’,6],[‘Samsung’,12],[‘Apple’,8],[‘LG’,2],[‘Nokia’,8]”);
//return (“[[‘Sony’,’Samsung’,’Apple’,’LG’,’Nokia’],[6,12,5,8,2,8]]”);
//return (“[[6, ‘Sony’]]”);
//return (“[[‘Sony’,’Samsung’]],[[3,6]]”);
return (“[[6,12,5,8,2]]”);
}

Image

As I said if anyone is able to find out how to put the text in the pie chart legend, they will get a free eBook!

——————————————————-

I say certainly Chrome has issues with the naming of variable objects because it sometimes fails even when the variable names are all syntactically correct and valid so Google have to get their act of JQuery plugins as most time was spent analysing the code and making sure it works,if it works for IE9 it certainly should work for Chrome, it’s not always the case!

My expectations of Chrome have certainly dropped! And my confidence of Firefox have increased ten fold.

——————————————————-

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: