Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Pie Chart href not always is in the same order that the labels #4

coin opened this Issue · 7 comments

7 participants


First of all, stay with the good work you are doing, really nice graphs you have made, the issue I find here is that the href most of the times don't is associate to the right label, I try to find the reason, the only conclusion I made is that have to be with the % of each part of the pie, I have made just a few changes in your implementation, just enough to serve my needs, as you can see in the code below, I just passed 3 arrays that were fill at the same time so the order is same.

Function draw(labels,clicks,links) {

var r = Raphael("holder");
r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";

      r.g.text(320, 100, "Links").attr({"font-size": 20});

      var pie = r.g.piechart(320, 240, 100, clicks, {legend: labels, legendpos: "west", href: links});
      pie.hover(function () {
          this.sector.scale(1.1, 1.1,,;
          if (this.label) {
              this.label[1].attr({"font-weight": 800});
      }, function () {
          this.sector.animate({scale: [1, 1,,]}, 500, "bounce");
          if (this.label) {
              this.label[0].animate({scale: 1}, 500, "bounce");
              this.label[1].attr({"font-weight": 400});



I can confirm this bug, was just about to file an issue myself.


I fixed this! The values are indexed via the order attribute. So after the values have been sorted you need to reference items in the other arrays via the index based on the order attribute, not the position of the value in the values array. Specifically, in the for loops around 62 and 82, do something like this:

    var optsIndex = values[i].order;

And then use optsIndex to reference anything in the opts array. Code:

    for (var i = 0; i < len; i++) {
        var optsIndex = values[i].order;
        var mangle = angle - 360 * values[i] / total / 2;
        if (!i) {
            angle = 90 - mangle;
            mangle = angle - 360 * values[i] / total / 2;
        if (opts.init) {
            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 = this.path(opts.init ? ipath : path).attr({fill: opts.colors && opts.colors[optsIndex] || this.g.colors[optsIndex] || "#666", stroke: opts.stroke || "#fff", "stroke-width": (opts.strokewidth == null ? 1 : opts.strokewidth), "stroke-linejoin": "round"});
        p.value = values[i];
        p.middle = path.middle;
        p.mangle = mangle;
        opts.init && p.animate({path: path.join(",")}, (+opts.init - 1) || 1000, ">");
    for (var i = 0; i < len; i++) {
        var optsIndex = values[i].order;
        var p = paper.path(sectors[i].attr("path")).attr(this.g.shim);
        opts.href && opts.href[optsIndex] && p.attr({href: opts.href[optsIndex]});
        p.attr = function () {};

This is a major league issue that has remained unfixed in the official release for 10 months?


If anyone's interested in something that works correctly, check here:


You can use google chart API or close this issue merging this commit from my fork


potomak: Thanks for the commit, it fixed my issue, which was related to colours being out of order after the values are sorted.


Am I correct in stating that the fix / commit by potomak only fixes the color issue and not the href issue that this issue #4 was created for?

@collymitch collymitch referenced this issue from a commit in collymitch/g.raphael
@collymitch collymitch Fix to issue #4 (href issue, where ordered list of href's is not foll…
…owed. Only fixes issue #4 specifically - i.e. doesn't include color fix.

Identified by tbritt in issues post but did not appear to be forked.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.