HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Pie Chart jQuery-UI plugin

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
chartpluginjquerypie

Problem

I would greatly appreciate the input of any gurus out there. I have recently begun learning JavaScript and then jQuery and jQuery-UI and have thought I would take a stab at writing my own jQuery-UI plugin, the result of which you can see here:

http://jsfiddle.net/ben1729/djA6G/ .

It's basically a pie chart into which you can drill down, rendered using HTML5 canvas. The data provided is dummy and so just oscillates between two data sets. I envisaged it displaying population of continents then by country upon drilldown etc.

What I'm after is constructive criticism. If there are any best practices I have violated or any obvious functionality I have missed then please let me know.

jQuery UI plugin:

```
(function($) {

// Utility object with helper functions
var utils = {
tau: 2 * Math.PI,
angleOrigin: -Math.PI / 2,
sum: function(toSum) {
var total = 0;
$.each(toSum, function(n, value) {
total += value;
});
return total;
},
normalise: function(toNormalise) {
var total = utils.sum(toNormalise);
var toReturn = [];
$.each(toNormalise, function(n, value) {
toReturn.push(utils.tau * value / total);
});
return toReturn;
},
distanceSqrd: function(x1, y1, x2, y2) {
return Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
},
bearing: function(x, y, originX, originY) {
var toReturn = Math.atan2(x - originX, originY - y);
if (toReturn = 0) {
renderer.clear(widget);
renderer.drawData(widget, opacity);
setTimeout(fadeOut, 20);
} else {
callback();
}
};
setTimeout(fadeOut, 50);
}
};

$.widget("ui.piChart", {

canvas: null,
$canvas: null,
context: null,
centreX: null,
centreY: null,
dataArray: null,
isAnimating: false,
radiusSqrd: null,
hoverIndex: -1,

// These options will be used as d

Solution

There is a javascript concept about one var per scope. Personally I'm not a big fan of it but you might want to read this: http://wonko.com/post/try-to-use-one-var-statement-per-scope-in-javascript

Context

StackExchange Code Review Q#10282, answer score: 2

Revisions (0)

No revisions yet.