Fix for issue #155 (Pie chart with slices of 0 size)

README.markdown

@@ -6,16 +6,12 @@ For more information, see: http://g.raphaeljs.com/
 Changelog
 ---------
 
-**v0.5**
+This branch has made a few modifications to g.pie.js
 
- * Refactored codebase and API to work with Raphaël 2.0
- * `g` is no longer a namespace, but instead a prototype object that all charts inherit. See documentation for all configurable options on the `g` prototype.
- * `g.markers` has been removed. The marker parameter strings now just try and resolve functions on the Paper prototype.
- * All primitive shapes have been removed. They are now part of Raphaël core in `plugins/`
- * The companion function `original` to the brightness functions `lighter` and `darker` has been renamed to `resetBrightness` to account for the `g` namespace removal
- * Tooltips have been modified/enhanced in the following ways:
-   * All tooltips can now be called on any Element or Set instance, as well as from the paper object.
-   * All tooltip `update` functions have been removed. Tooltip functions now return their path element. It is up to the caller to manage both the Element or set that is used as the context and the path element that was drawn by the tooltip function.
-   * All tooltip `dir` options have been changed from `0`, `1`, `2`, `3`, to `'down'`, `'left'`, `'up'`, `'right'` repectively.
-   * `blob` and `drop` tooltips no longer accept `size` parameters. Instead, the bounding box of the Element/Set being used as content is used to automatically determine the size.
-   * `popupit` and `labelit` have been removed. Their functionality is now the default behavior of all tooltips
+ * Sectors with a value of 0, will now have stroke set to 0, to avoid the arbitrary line on the chart
+ * Added an sort flag, opts = {sort: false} will keep the chart from being sorted
+ * Added opacity, opts = {opacity: [0.5, ...]}
+ * Added an inside radius option, to allow for the creation of donut charts, opts = {insideRadius: 50}
+
+
+Examples can be found at http://wargoats.com/pie/

g.pie.js

@@ -23,19 +23,41 @@
             defcut = true;
 
         function sector(cx, cy, r, startAngle, endAngle, fill) {
-            var rad = Math.PI / 180,
-                x1 = cx + r * Math.cos(-startAngle * rad),
-                x2 = cx + r * Math.cos(-endAngle * rad),
-                xm = cx + r / 2 * Math.cos(-(startAngle + (endAngle - startAngle) / 2) * rad),
-                y1 = cy + r * Math.sin(-startAngle * rad),
-                y2 = cy + r * Math.sin(-endAngle * rad),
-                ym = cy + r / 2 * Math.sin(-(startAngle + (endAngle - startAngle) / 2) * rad),
-                res = [
-                    "M", cx, cy,
-                    "L", x1, y1,
-                    "A", r, r, 0, +(Math.abs(endAngle - startAngle) > 180), 1, x2, y2,
-                    "z"
-                ];
+            if (opts.insideRadius && opts.insideRadius > 0) {
+                var ir = opts.insideRadius;
+                var rad = Math.PI / 180,
+                    ox1 = cx + r * Math.cos(-startAngle * rad),
+                    ox2 = cx + r * Math.cos(-endAngle * rad),
+                    ix1 = cx + ir * Math.cos(-startAngle * rad),
+                    ix2 = cx + ir * Math.cos(-endAngle * rad),
+                    xm = cx + r / 2 * Math.cos(-(startAngle + (endAngle - startAngle) / 2) * rad),
+                    oy1 = cy + r * Math.sin(-startAngle * rad),
+                    oy2 = cy + r * Math.sin(-endAngle * rad),
+                    iy1 = cy + ir * Math.sin(-startAngle * rad),
+                    iy2 = cy + ir * Math.sin(-endAngle * rad),
+                    ym = cy + r / 2 * Math.sin(-(startAngle + (endAngle - startAngle) / 2) * rad),
+                    res = [
+                        "M", ix1, iy1,
+                        "A", ir, ir, 0, +(Math.abs(endAngle - startAngle) > 180), 1, ix2, iy2,
+                        "L", ox2, oy2,
+                        "A", r, r, 0, +(Math.abs(endAngle - startAngle) > 180), 0, ox1, oy1,
+                        "z"
+                    ];
+            } else {
+                var rad = Math.PI / 180,
+                    x1 = cx + r * Math.cos(-startAngle * rad),
+                    x2 = cx + r * Math.cos(-endAngle * rad),
+                    xm = cx + r / 2 * Math.cos(-(startAngle + (endAngle - startAngle) / 2) * rad),
+                    y1 = cy + r * Math.sin(-startAngle * rad),
+                    y2 = cy + r * Math.sin(-endAngle * rad),
+                    ym = cy + r / 2 * Math.sin(-(startAngle + (endAngle - startAngle) / 2) * rad),
+                    res = [
+                        "M", cx, cy,
+                        "L", x1, y1,
+                        "A", r, r, 0, +(Math.abs(endAngle - startAngle) > 180), 1, x2, y2,
+                        "z"
+                    ];
+            }
 
             res.middle = { x: xm, y: ym };
             return res;
@@ -56,9 +78,11 @@
                 values[i] = { value: values[i], order: i, valueOf: function () { return this.value; } };
             }
 
-            values.sort(function (a, b) {
-                return b.value - a.value;
-            });
+            if (opts.sort == null || opts.sort) {
+                values.sort(function (a, b) {
+                    return b.value - a.value;
+                });
+            }
 
             for (i = 0; i < len; i++) {
                 if (defcut && values[i] * 360 / total <= 1.5) {
@@ -89,8 +113,17 @@
                     var ipath = sector(cx, cy, 1, angle, angle - 360 * values[i] / total).join(",");
                 }
 
-                var path = sector(cx, cy, r, angle, angle -= 360 * values[i] / total);
-                var p = paper.path(opts.init ? ipath : path).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#666", stroke: opts.stroke || "#fff", "stroke-width": (opts.strokewidth == null ? 1 : opts.strokewidth), "stroke-linejoin": "round" });
+                var p, path = sector(cx, cy, r, angle, angle -= 360 * values[i] / total);
+
+                if (values[i].value < total) {
+                    var strokewidth = 0;
+                    if (values[i].value > 0) {
+                        strokewidth = (opts.strokewidth == null ? 1 : opts.strokewidth);
+                    }
+                    p = paper.path(opts.init ? ipath : path).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#666", opacity: opts.opacity && opts.opacity[i], stroke: opts.stroke || "#fff", "stroke-width": strokewidth, "stroke-linejoin": "round" });
+                } else {
+                    p = paper.circle(cx, cy, r).attr({ fill: chartinst.colors[0], opacity: opts.opacity && opts.opacity[i], stroke: opts.stroke || "#fff", "stroke-width": opts.strokewidth == null ? 1 : opts.strokewidth })
+                }
 
                 p.value = values[i];
                 p.middle = path.middle;