Question

Background

I was able to get the graphael example of a dynamic pie chart working. However, I’m having a problem understanding the syntax…

The example passes in two HTML links and seems to associate the links with two labels and two specific slices of the pie but it’s not obvious how those correlations or associations happen in the string that’s passed into the “piechart” method. I tried to pass in a few more links but the code seems to randomly associate the links with the labels. There doesn’t seem to be an obvious way to ensure that Link1 is always associated with Label1.

Question

Does anyone know how to clearly explain what’s happening in the code? How are the two links being associated with only two slices of the pie? How could I consistently associate links with labels and specific slices of the pie?

Note

I personally don’t like that the piechart function takes in three “separate” strings of values, labels, and links that are not collocated with each other, as it makes the code hard to read. The original looks as follows…

Example

pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]}); r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });)

Instead it would be nicer to be able to pass in an array of arrays… array = [[SliceValue1, label1, link1], [SliceValue2, label2, link2], etc. If anyone has an idea of how to do this, it would be a great way to clean the code up and make it more readable.

Source Code

<script>
  window.onload = function () {
    var r = Raphael("holder"),
    pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
    r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
    pie.hover(function () {
      this.sector.stop();
      this.sector.scale(1.1, 1.1, this.cx, this.cy);
      if (this.label) {
        this.label[0].stop();
        this.label[0].attr({ r: 7.5 });
        this.label[1].attr({ "font-weight": 800 });
      }
    }, function () {
    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
    if (this.label) {
    this.label[0].animate({ r: 5 }, 500, "bounce");
    this.label[1].attr({ "font-weight": 400 });
    }
    });
  };
</script>

Answer 1

The better answer for this was using D3.js. Here’s a working example… “Multiple D3 Pie Charts Mixed In With HTML Layout Constructs“.