Learn how to easily create simple, flexible pie charts that you can implement “on the fly.”

In the previous tutorial on building bar charts with Processing.js we learned the basics of building a graphic with Processing.js. This tutorial will build on that knowledge – especially the setup – so if you haven't read the previous tutorial and are not familiar with Processing.js then I would recommend reading that one first.

Note: As mentioned in the introduction of this series (though included as an addendum), IE support is currently not included with these tutorials.

Using the arc() Function

The process of creating a pie chart¹ generally parallels that of our bar chart example in the previous tutorial. We will be using the arc() function to build individual arcs that complete a full circle. The arc() function takes the following arguments:
arc(X-coord., Y-coord., width, height, start-angle, end-angle)

The X and Y coordinates set the center pointer from which to draw the arc; by default the coordinates are measured from the upper left corner.

If you are familiar with the way arcs are constructed, the next two parameters of width and height may appear odd because an arc has a radius, not a width or height. I don't know why you have to input the data this way, but the second value (the "height") is the controlling factor. So both arc(0,0,50,100,0,PI) and arc(0,0,5000,100,0,PI) would result in an arc that has a radius of 100. For clarity’s sake, I enter the radius as both the width and height. Therefore – referring to the previous example – I would write it as arc(0,0,100,100,0,PI).

The two end values are the angle at which to begin the arc and end the arc. The default starting point – in terms of a clock's hand – is at 3 o'clock. Though it is easy to change this by adding a constant number of degrees (or radians) to each value to "push" it around to a new starting point.

Finally, the default format for inputing angle values is radians.² However it’s easy to use degrees by converting them to radians with the radians() function. So, PI is the same as radians(180).

Now that we have familiarity with the arc() function, let us build our first arc (Figure 3.1).

Create a Pie Chart

In Figure 3.2, several more arcs are built around the same midpoint to create a full pie chart.

Efficiency

Like the bar chart example where each bar's location and dimensions were entered by hand, this method is obviously unscalable; so in a similar fashion as before, a for() loop will be used to automate the process. This code and resulting display is shown in Figure 3.3.

A few things to note in this last example:

• The last_angle variable is set with float instead of int since it's a radian value (radian values have decimals).
• The last_angle variable is recalculated with each loop (see lines 40 and 47) to keep the arcs moving around the circle.
• Notice how the colors were calculated for the second, mono-chromatic pie chart: instead of a value being passed each time via an array it is an RGB value that is calculated based on the cycle number of the for() loop (line 45).

Why Make Pie Charts with Processing.js?

A good question, why not use Flash or just create it in Illustrator? The significance of being able to create a pie chart with Processing.js lies in its simplicity and maintainability.

Simplicity

I was talking to someone once about a web application interface and he mentioned that his client base liked to see pie charts. I began to calculate the overhead required to do that with Flash: plugins, learning ActionScript, passing values via XML, etcetera. Now granted I know near nothing about Flash, so it requires a steeper learning curve on my end, but Processing.js runs on existing browser technology and is simple to learn – a very friendly option for when you need to create quick graphics that are outside the bounds of CSS.

Of course it's important to remember that Flash is currently much more compatible with the gamut of browsers. In most situations the lack of proper support for the <canvas> element in Internet Explorer will rule out the use of Processing.js. Though in my opinion the <canvas> element is nearly guaranteed to be fully supported by all browsers in the future; not to mention I would argue that Processing.js is a more mobile-friendly option at the moment since it runs on JavaScript. For these reasons, I'm predicting that Processing.js will soon be Flash's equal in the category of browser compatibility.

Maintainability

You could also create pie charts in a graphics editor that would be completely cross-browser compatible. After all, GIFs and PNGs render more or less the same no matter what the device. But what about when you need to update a graphic? With Processing.js you just change a number in your code. I don't need to spell out the benefits of this advantage.

As in most cases, the best choice depends on the context, assess the situation and make a wise choice.

On Deck

The next installment will show you how easy it is to integrate Processing.js with native JavaScript code; in our case we'll look at jQuery. Stay tuned!