gRaphael pie chart example

Because of the lack of documentation on gRaphael I've already written a tutorial for a line chart. This post will do the same for pie charts and show some of the ways to customize them.

A simple pie chart

First we need to include 3 Javascript files for Raphael and gRaphael. I've also added jQuery because we'll use it later.

<script src="raphael-min.js"></script>
<script src="g.raphael-min.js"></script>
<script src="g.pie-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div id="pie"></div>
<script>
 var paper = Raphael("pie");
 paper.piechart(
   100, // pie center x coordinate
   100, // pie center y coordinate
   90,  // pie radius
    [18.373, 18.686, 2.867, 23.991, 9.592, 9.213] // values
  );
</script>

Even though the gRaphael front page says to use paper.g.piechart make sure to use paper.piechart, or you'll get a type error: "Cannot call method 'piechart' of undefined ".

Adding a legend

The chart above shows Microsoft's revenue breakdown between mid-2011 and mid-2012^*. We can add a legend by adding an options object as the last argument to `piechart`:

 var paper = Raphael("pie");
 paper.piechart(
   100, // pie center x coordinate
   100, // pie center y coordinate
   90,  // pie radius
    [18.373, 18.686, 2.867, 23.991, 9.592, 0.213], // values
    {
    legend: ["Windows/Windows Live", "Server/Tools", "Online Services", "Business", "Entertainment/Devices", "Unallocated/Other"]
    }
  );

^* At least I think so, and I'm no good thinking about finance. Taken from Microsoft Earnings Release FY12 Q4.

You'll notice that the segments are ordered by their values in descending order. As far as I know there is no option to turn that off.

Customizing segment colors

The colors option is very similar to the legend one:

 var paper = Raphael("pie");
 paper.piechart(
   100, // pie center x coordinate
   100, // pie center y coordinate
   90,  // pie radius
    [18.373, 18.686, 2.867, 23.991, 9.592, 0.213], // values
    {
    legend: ["Windows/Windows Live", "Server/Tools", "Online Services", "Business", "Entertainment/Devices", "Unallocated/Other"],
    colors: ["#000038", "#000066", "#0000ff", "#c7c7ff", "#a4a4b7", "#e0e0ef"]
    }
  );

Someone with design skills might even make it look better than the original one...

Other section and the maxSlices option

When there are values that would require lots of small segments gRaphael will merge them into one "Others" segment. Say Microsoft would start divisions for strawberries and carrots:

var paper = Raphael("pie");
 paper.piechart(
   100, // pie center x coordinate
   100, // pie center y coordinate
   90,  // pie radius
    [18.373, 18.686, 2.867, 23.991, 9.592, 0.213, .111, .222], // values
    {
    legend: ["Windows/Windows Live", "Server/Tools", "Online Services", "Business", "Entertainment/Devices", "Unallocated/Other", "Strawberries", "Carrots"],
    colors: ["#000038", "#000066", "#0000ff", "#c7c7ff", "#a4a4b7", "#e0e0ef", "green", "red"]
    }
  );

You can change the text to "Other" by using the legendothers option.

maxSlices can be used to collapse additional segments into "Other".

 var paper = Raphael("pie");
 paper.piechart(
   100, // pie center x coordinate
   100, // pie center y coordinate
   90,  // pie radius
    [18.373, 18.686, 2.867, 23.991, 9.592, 0.213, .111, .222], // values
    {
    legend: ["Windows/Windows Live", "Server/Tools", "Online Services", "Business", "Entertainment/Devices", "Unallocated/Other", "Strawberries", "Carrots"],
    colors: ["#000038", "#000066", "#0000ff", "#c7c7ff", "#a4a4b7", "#e0e0ef", "green", "red"],
    legendothers: "Other",
    maxSlices: 3
    }
  );

gRaphael pie chart example

A simple pie chart

Adding a legend

Customizing segment colors

Other section and the maxSlices option

Comments