protovis javascript charts: part 1

Creating a chart

So lets make an area chart inside our example panel. Type example.add.pvArea

This calls Protovis class file that describes an area chart. See the pattern?

Next, we need data for the chart in the form of an array. The array is the series of numbers inside the square brackets. Each number has a position, starting with 0. That may seem odd but we need to do this because we use 10-base math.

Now we have to describe the parameters of the chart. Since we want the chart to start at the bottom we set that to 0.

Next, lets set the height of the data point. We do that with a function. Remember, the data has traveled down the chain. The d in the parenthesis looks at the data at each position in the array to do some basic math to calculate the height.

For example, if d = 1 and is multiplied by 75, the height of the first data point is 75

When d = 1.2 and is multiplied by 75, the height of the second data point is 90

Because all of the data points are less than two, they all fit in our 150 pixel panel.

Now we need to describe how the data points are stretched across the panel starting from the left. We declare a second function that looks at this.index. This represents the position of each data point in the array that has traveled down the chain. Each position is multiplied by 25 to move it to the right 25 pixels.

Finally, we need to tell the example panel to render and add our semicolons.

An area chart appears on the right.