Skip to content
This repository

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

coin opened this Issue · 7 comments

7 participants

Tiago Travis Britt N. Brad Garrett Giovanni Cappellotto Mark Story collymitch

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.

Travis Britt

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 () {};
N. Brad Garrett

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

N. Brad Garrett

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

Giovanni Cappellotto

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

Mark Story

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.