From 3d3a5541171826fa5ac5e8afb29a320ea35d915c Mon Sep 17 00:00:00 2001 From: Med Karim BCHINI Date: Wed, 23 Jan 2013 12:02:38 +0100 Subject: [PATCH 1/3] Update g.pie.js Add type of pie to options type can be full or half [default 'full'] --- g.pie.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/g.pie.js b/g.pie.js index 82c906b..f36d13a 100644 --- a/g.pie.js +++ b/g.pie.js @@ -34,6 +34,7 @@ o legendothers (string) text that will be used in legend to describe options that are collapsed into 1 slice, because they are too small to render [default `"Others"`] o legendmark (string) symbol used as a bullet point in legend that has the same colour as the chart slice [default `"circle"`] o legendpos (string) position of the legend on the chart [default `"east"`]. Other options are `"north"`, `"south"`, `"west"` + o type (string) type of the pie chart can be "half" or "full" [default `full`] o } ** = (object) path element of the popup @@ -58,7 +59,11 @@ others = 0, cut = opts.maxSlices || 100, minPercent = parseFloat(opts.minPercent) || 1, - defcut = Boolean( minPercent ); + defcut = Boolean( minPercent ), + type = opts.type || "full", + radSize = 360; + + if(type.toLowerCase() =="half") radSize=180; function sector(cx, cy, r, startAngle, endAngle, fill) { var rad = Math.PI / 180, @@ -118,18 +123,19 @@ others && values.splice(len) && (values[cut].others = true); for (i = 0; i < len; i++) { - var mangle = angle - 360 * values[i] / total / 2; + var mangle = angle - radSize * values[i] / total / 2; if (!i) { - angle = 90 - mangle; - mangle = angle - 360 * values[i] / total / 2; + // angle changed to fix pie when it's half + angle = 145 - mangle; + mangle = angle - radSize * values[i] / total / 2; } if (opts.init) { - var ipath = sector(cx, cy, 1, angle, angle - 360 * values[i] / total).join(","); + var ipath = sector(cx, cy, 1, angle, angle - radSize * values[i] / total).join(","); } - var path = sector(cx, cy, r, angle, angle -= 360 * values[i] / total); + var path = sector(cx, cy, r, angle, angle -= radSize * values[i] / total); var j = (opts.matchColors && opts.matchColors == true) ? values[i].order : i; var p = paper.path(opts.init ? ipath : path).attr({ fill: opts.colors && opts.colors[j] || chartinst.colors[j] || "#666", stroke: opts.stroke || "#fff", "stroke-width": (opts.strokewidth == null ? 1 : opts.strokewidth), "stroke-linejoin": "round" }); @@ -237,8 +243,12 @@ }; var legend = function (labels, otherslabel, mark, dir) { + // cpt added to fix legend y + var cpt = 0; + if(type == "half") + cpt = -65; var x = cx + r + r / 5, - y = cy, + y = cy + cpt, h = y + 10; labels = labels || []; @@ -293,4 +303,4 @@ return new Piechart(this, cx, cy, r, values, opts); } -})(); \ No newline at end of file +})(); From 817dd5ab4939c576cfe1affa10e9fbdedfe10861 Mon Sep 17 00:00:00 2001 From: Med Karim BCHINI Date: Wed, 23 Jan 2013 03:04:45 -0800 Subject: [PATCH 2/3] Create piechart3.html --- test/piechart3.html | 46 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 test/piechart3.html diff --git a/test/piechart3.html b/test/piechart3.html new file mode 100644 index 0000000..a6c7d1a --- /dev/null +++ b/test/piechart3.html @@ -0,0 +1,46 @@ + + + + + g·Raphaël Dynamic Pie Chart + + + + + + + + +
+

+ Pie chart with legend, hyperlinks on two first sectors and hover effect. +

+

+ Demo of g·Raphaël JavaScript library. +

+ + From bc7f0b832e607b1307dc699ffab5e2f3aa2ba3d1 Mon Sep 17 00:00:00 2001 From: Med Karim BCHINI Date: Wed, 23 Jan 2013 15:02:19 +0100 Subject: [PATCH 3/3] Update g.pie.js fix for pie half when number change --- g.pie.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/g.pie.js b/g.pie.js index f36d13a..ea7e785 100644 --- a/g.pie.js +++ b/g.pie.js @@ -127,7 +127,7 @@ if (!i) { // angle changed to fix pie when it's half - angle = 145 - mangle; + angle = angle - 180; mangle = angle - radSize * values[i] / total / 2; }