How to create simple and flexible bar charts that can be implemented anywhere.

The second part of this tutorial series will move from creating a single bar graphic to creating a full, multi-colored, aesthetically-pleasing bar graph. Also, since this is the first in the series that references the Processing.js syntax, a few extra pains will be taken to detail the basics of the syntax and structure.

Also, it should be noted that a small bit of CSS was used to style the <canvas> element used in all the examples to give it a gray border and some margin.

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

A Little Setup

Before starting with examples, let's take a moment to look at the initial setup. In Figure 2.1 a basic Processing.js "shell" has been setup with no rendering code.

First, notice the <script> tag on line 18 with the application/processing attribute instead of the normal text/javascript. All Processing.js code will be contained within here.

There are two main functions that will be used in each example – the setup() and draw() function. Both of these functions are fairly self-descriptive: setup() contains the properties that prepare the drawing canvas, and draw() contains the display commands to draw the bar graph.

An important feature of the draw() function is that it loops continuously unless the exit() command is present. Therefore, it has the capability to animate elements, as well as capture mouse and keyboard actions to initiate events.

However, if you do not plan to utilize either of these, the exit() command should be used to keep Processing.js from unnecessarily using your computer's resources.

Now that we know the basic setup, let's start building things.

A Simple Bar

The first example will be quite basic – a single bar. The main function that will be used is the rect() function. The code to accomplish this and resulting display is shown in Figure 2.2.

In this first example (Figure 2.2), several Processing.js properties were utilized:

size(W, H)

Sets the size of the drawing canvas assigning a width and a height value. Usually this will match the <canvas> element's width and height.

background(C)

Sets the background color of the <canvas> element. Color values can be passed via RGB values or as HTML hex codes. You can use shorthand for the RGB values as well, so for example the color white could be input as 255 instead of 255,255,255.

noStroke()

By default, each element drawn in Processing.js has a border (line stroke); this command removes it.

fill(C)

This sets the fill color for an element. It takes the same color arguments as background().

rect(X, Y, W, H)

The main function for this example, rect() is what draws the rectangle for our
bar graph. It takes two sets of arguments to build the rectangle: coordinates and dimensions. You first give it an X and a Y coordinate (the default 0,0 position is the upper left of the <canvas> element) and then set a width and a height.

The Processing.js website has a full list of supported (and unsupported) functions. I recommend referencing it often.

How It Was Built

Now that you are a little more familiar with the syntax, let's summarize how the bar drawn in Figure 2.2 was accomplished.

The first function called is the setup() function. In this function we set the size of the drawing canvas and its background color by using the size() and background() functions, respectively.

Then we call the draw() function to create our graphics. First we remove the border on all elements with noStroke(), set the fill color on all elements that are to be drawn with the fill() function and finally draw the rectangle with the rect() function.

The Loop Cascade

You may have picked up on this already, but just to be sure, let's spend a minute discussing how graphics are rendered. The draw() loop has a cascade principle inherit in the various functions called within it.

For example, when we set the fill() command in Figure 2.2 on line 37, every element rendered past this point will have that specific fill color; unless another fill() command is given at some point. To illustrate this further, compare the two cases below:

In Case A both rectangles are rendered red. In Case B the first rectangle drawn is rendered red, and the second green. This principle applies to other commands as well, such as noStroke(), etc.

Adding Aesthetics

The green bar drawn in Figure 2.2 is rather plain, it seems incomplete. In Figure 2.3 another bar is added to the graphic to create a darker border around the top and right edge of the bar. I'm calling it the shadow bar.

This leads to another principle in the way Processing.js defines graphics – layers. As it loops through the draw() function the element that is drawn first is on the bottom "layer," the next is on top of the first, the next on top of both of those and so on. Though of course an element being drawn on top of another is contingent on where you place it.

So to build the shadow a single bar is drawn with the same dimensions as in Figure 2.2, except with a darker color. Then another bar is drawn on top of the first, but two pixels shorter and thinner so that the bar behind it gives it a two-pixel border on the top and right side. (This technique came from the way Mint used to display bar graphs.)

Now we have a more presentable bar graph. Of course, a single-bar graph isn't a very useful illustration, which leads us to the next step.

Building Multiple-Bar Graphs

To add multiple bars in this graphic all that's necessary is to use the rect() function to build each one with the appropriate coordinates and dimensions. This is accomplished in Figure 2.4 below.

In Figure 2.4, we took the method used to build one bar and applied it six more times, adjusting the rect() parameters for each one. However, the lack of scalability when doing it this way is painfully obvious. What if you have a graph that needs to display 100 bars, or a 1,000? We need a better method.

Luckily, Processing.js is able to handle this with ease. All that's necessary is to create an array for each variable and then use a for() loop to draw our graph. The same bar graph in Figure 2.4 is drawn using this new technique in Figure 2.5.

The for() loop makes it much more manageable and scaleable. Of course you will still have to input the values of the array, but as you'll see later in the series with the tutorial on integration with PHP these types of tasks can be automated as well.

I'm not going to detail the specifics on the for() loop, but the Processing.js website offers a helpful summary on how it works.

Lastly, in Figure 2.6, we'll take the graph from Figure 2.5 and change the code to give each bar a unique color.

The same principle of cycling through an array with a for() loop is applied to give each bar a unique color.

A couple things to note:

• Notice how the arrays are declared and that there are specific arrays depending on the value: color – color[], integers – int[] and so on.
• Note again how we build the shadow for each one first and then the display bar on top of that.

Better than CSS?

Creating bar charts with Processing.js is a simple task. However, the same can be accomplished using CSS, and arguably better since CSS is more accessible than Processing.js (see Accessible Data Visualization with Web Standards). Ultimately you will have to make the call on which method is more suited to your situation.

The next installment of this series – Creating Pie Charts with Processing.js – will move into less ambiguous areas and will highlight the greater benefits of Processing.js's capabilities.