From 4b2a5c04328007f0d35607378ea75a21f080cbc6 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 8 Nov 2012 10:38:41 +0000 Subject: [PATCH] Pie chart - old version re-ordered data into order by value. Didn't like this behaviour and it caused problems with the labels/colours so removed it. minPercent and maxSlices functionality modified in order to take account of this. VBarchart - labels fixed (they just didn't work before). Modified behaviour so that if a label overlaps a previous label then Raphel will draw the label lower rather than just removing it. G.Raphael - I was running into a problem where the popup would move up the page each time it appeared. I've fixed this for my case, not sure if it breaks other cases or not though.. --- g.bar.js | 40 ++++++++++++++++++++++++++++------------ g.pie.js | 50 ++++++++++++++++++++++++++++---------------------- g.raphael.js | 10 +++++----- 3 files changed, 61 insertions(+), 39 deletions(-) diff --git a/g.bar.js b/g.bar.js index 166bd65..66969cc 100644 --- a/g.bar.js +++ b/g.bar.js @@ -1,4 +1,4 @@ -/*! +/*! * g.Raphael 0.51 - Charting library, based on Raphaël * * Copyright (c) 2009-2012 Dmitry Baranovskiy (http://g.raphaeljs.com) @@ -313,7 +313,8 @@ labels = labels || []; this.labels = paper.set(); - var L, l = -Infinity; + var L; + var l = [0]; if (opts.stacked) { for (var i = 0; i < len; i++) { @@ -323,17 +324,32 @@ tot += multi ? values[j][i] : values[i]; if (j == multi - 1) { - var label = paper.labelise(labels[i], tot, total); - - L = paper.text(bars[i * (multi || 1) + j].x, y + height - barvgutter / 2, label).attr(txtattr).insertBefore(covers[i * (multi || 1) + j]); + var label = chartinst.labelise(labels[i], tot, total); + var txt = paper.text(bars[j][i].x, y + height - barvgutter / 2, label); + L = txt.insertBefore(covers[i * (multi || 1) + j]); var bb = L.getBBox(); - if (bb.x - 7 < l) { - L.remove(); - } else { + labelLevels = l.length; + var done = false; + for (var k = 0; k < labelLevels; k++) { + if (bb.x - 7 < l[k] && l[k] > 0) { + L.remove(); + + txt = paper.text(bars[j][i].x, y + height - barvgutter / 2 + ((k + 1) * 10), label); + L = txt.insertBefore(covers[i * (multi || 1) + j]); + bb = L.getBBox(); + } else { + this.labels.push(L); + l[k] = bb.x + bb.width; + done = true; + break; + } + } + + if (!done) { this.labels.push(L); - l = bb.x + bb.width; + l.push(bb.x + bb.width); } } } @@ -341,7 +357,7 @@ } else { for (var i = 0; i < len; i++) { for (var j = 0; j < (multi || 1); j++) { - var label = paper.labelise(multi ? labels[j] && labels[j][i] : labels[i], multi ? values[j][i] : values[i], total); + var label = chartinst.labelise(multi ? labels[j] && labels[j][i] : labels[i], multi ? values[j][i] : values[i], total); L = paper.text(bars[i * (multi || 1) + j].x, isBottom ? y + height - barvgutter / 2 : bars[i * (multi || 1) + j].y - 10, label).attr(txtattr).insertBefore(covers[i * (multi || 1) + j]); @@ -593,7 +609,7 @@ for (var i = 0; i < len; i++) { for (var j = 0; j < multi; j++) { - var label = paper.labelise(multi ? labels[j] && labels[j][i] : labels[i], multi ? values[j][i] : values[i], total), + var label = chartinst.labelise(multi ? labels[j] && labels[j][i] : labels[i], multi ? values[j][i] : values[i], total), X = isRight ? bars[i * (multi || 1) + j].x - barheight / 2 + 3 : x + 5, A = isRight ? "end" : "start", L; @@ -671,4 +687,4 @@ return new HBarchart(this, x, y, width, height, values, opts); }; -})(); +})(); \ No newline at end of file diff --git a/g.pie.js b/g.pie.js index 82c906b..6736520 100644 --- a/g.pie.js +++ b/g.pie.js @@ -1,4 +1,4 @@ -/*! +/*! * g.Raphael 0.51 - Charting library, based on Raphaël * * Copyright (c) 2009-2012 Dmitry Baranovskiy (http://g.raphaeljs.com) @@ -56,9 +56,9 @@ angle = 0, total = 0, others = 0, - cut = opts.maxSlices || 100, + maxSlices = opts.maxSlices || 100, minPercent = parseFloat(opts.minPercent) || 1, - defcut = Boolean( minPercent ); + defcut = false; function sector(cx, cy, r, startAngle, endAngle, fill) { var rad = Math.PI / 180, @@ -85,37 +85,44 @@ series.push(paper.circle(cx, cy, r).attr({ fill: opts.colors && opts.colors[0] || chartinst.colors[0], stroke: opts.stroke || "#fff", "stroke-width": opts.strokewidth == null ? 1 : opts.strokewidth })); covers.push(paper.circle(cx, cy, r).attr(chartinst.shim)); total = values[0]; - values[0] = { value: values[0], order: 0, valueOf: function () { return this.value; } }; + values[0] = { value: values[0], valueOf: function () { return this.value; } }; opts.href && opts.href[0] && covers[0].attr({ href: opts.href[0] }); series[0].middle = {x: cx, y: cy}; series[0].mangle = 180; } else { for (var i = 0; i < len; i++) { total += values[i]; - values[i] = { value: values[i], order: i, valueOf: function () { return this.value; } }; + values[i] = { value: values[i], valueOf: function () { return this.value; } }; } + + var totOther = 0; + var tooSmall = 0; + + if (len > maxSlices) { + var sorted = values.slice(0); + sorted.sort(function (a, b) { + return b.value - a.value; + }); + tooSmall = sorted[maxSlices]; + } - //values are sorted numerically - values.sort(function (a, b) { - return b.value - a.value; - }); - - for (i = 0; i < len; i++) { - if (defcut && values[i] * 100 / total < minPercent) { - cut = i; - defcut = false; - } - if (i > cut) { - defcut = false; - values[cut].value += values[i]; - values[cut].others = true; - others = values[cut].value; + for (i = len - 1; i >= 0; i--) { + if ((values[i] * 100 / total < minPercent) || (values[i].value <= tooSmall)) { + totOther = totOther + values[i].value; + values.splice(i, 1); + if (opts.legend.length > i) opts.legend.splice(i, 1); + if (opts.colors.length > i) opts.colors.splice(i, 1); } } len = Math.min(cut + 1, values.length); others && values.splice(len) && (values[cut].others = true); + if (totOther > 0) { + values.splice(values.length, 0, { value: totOther, valueOf: function () { return this.value; } }); + opts.legend.splice(values.length, 0, "Other"); + } + len = values.length; for (i = 0; i < len; i++) { var mangle = angle - 360 * values[i] / total / 2; @@ -130,8 +137,7 @@ } var path = sector(cx, cy, r, angle, angle -= 360 * 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" }); + 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" }); p.value = values[i]; p.middle = path.middle; diff --git a/g.raphael.js b/g.raphael.js index 27f27ca..c3ea5bc 100644 --- a/g.raphael.js +++ b/g.raphael.js @@ -1,4 +1,4 @@ -/*! +/*! * g.Raphael 0.51 - Charting library, based on Raphaël * * Copyright (c) 2009-2012 Dmitry Baranovskiy (http://g.raphaeljs.com) @@ -40,12 +40,12 @@ Raphael.el.popup = function (dir, size, x, y) { size = size || 5; bb = this.getBBox(); - x = typeof x == 'number' ? x : (center ? bb.x + bb.width / 2 : bb.x); - y = typeof y == 'number' ? y : (center ? bb.y + bb.height / 2 : bb.y); + x = typeof x == 'number' ? x : (center ? bb.x2 - bb.width / 2 : bb.x2); + y = typeof y == 'number' ? y : (center ? bb.y2 - bb.height / 2 : bb.y2); cw = Math.max(bb.width / 2 - size, 0); ch = Math.max(bb.height / 2 - size, 0); - this.translate(x - bb.x - (center ? bb.width / 2 : 0), y - bb.y - (center ? bb.height / 2 : 0)); + //this.translate(x - bb.x2 - (center ? bb.width / 2 : 0), y - bb.y2 - (center ? bb.height / 2 : 0)); bb = this.getBBox(); var paths = { @@ -858,4 +858,4 @@ Raphael.g = { return (+val).toFixed(0); } } -} +} \ No newline at end of file