Arden Thomas was talking to me about some stock visualization stuff he was playing with the other day using Cairo. I thought it would be fun to sit down and make one of his charts look really snazzy.

Over the years, I've written a number of charting views for different domains. I've come to the basic conclusion that the best you can hope for is a gray box set of things that can be used as examples or plugged in at a low level. But when it comes to a reusable "graph" widget, I've come to the conclusion that you're better to just go the custom view route (possibly reusing a couple of low level scaling things).

One of the fun things about using Cairo to do the graphics, is that the alpha channel allows us (to attempt) to integrate the different elements of a chart in a way we probably wouldn't as easily with the traditional graphics engine. We can integrate controls right into the view itself. As well as use background tricks to show axis information.

Here's another audioless wink showing me playing with the chart for a minute. It took a little more than half a day to code it from scratch and tweak it to pleasing.

There are two particular cool tricks in the above if you look close. One is the "electric" glow of the red line. This is accomplished with a loop that looks like:

	31 to: 1
		by: -3
		do: 
			[:width | 
			cr
				source: (ColorBlend red alpha: width reciprocal);
				strokeWidth: width;
				strokePreserve].
	cr newPath

Basically we define the path once, and then we repeatedly stroke it with a smaller and smaller width, but a rapidly increasing alpha value.

The other is the selection rectangle. It uses the "electric line" around it too. But the neat thing about it is how it grays out everything outside of the rectangle. We do this by defining a path composed of two rectangles. The first is the outside rectangle with rounded corners. The second rectangle is the selection rectangle, but its winding direction is backwards from the first. What is meant here is that one of the dimensions of the rectangle (not both) is negative. So the rectangle is defined with its origin at its topRight, and its corner at the bottomLeft. Then it's just a clip, set the source to a color with medium alpha and tell it to paint.

This one is in Arden's sandbox so you'll have to bug him if you want the code in the wild.