Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

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

coin opened this Issue Oct 15, 2009 · 7 comments


None yet
7 participants

coin commented Oct 15, 2009

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, this.cx, this.cy);
          if (this.label) {
              this.label[1].attr({"font-weight": 800});
      }, function () {
          this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 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.

tbritt commented Nov 30, 2009

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 () {};

Brade commented Aug 25, 2010

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

Brade commented Aug 25, 2010

If anyone's interested in something that works correctly, check here: http://code.google.com/apis/visualization/documentation/using_overview.html

potomak commented Aug 28, 2010

You can use google chart API or close this issue merging this commit http://github.com/potomak/g.raphael/commit/f6bf46abece254a8502c72809319c725d6de4b86 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 added a commit to collymitch/g.raphael that referenced this issue Sep 13, 2011

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