Developers who have been using Google Analytics for any time can appreciate the flexibility and power behind some of the graphing software it offers. I recently found myself wondering just how they get the incredibly usable effect they have, so I began tinkering with some Actionscript and soon found myself with a very workable base that not only could be modified and grown to match what this software offers but is also surprisingly simplistic in nature.

Basically, we simply have our main application (or graph in this case) that can take any number of argument values and calculate not only their position based on ratio but also spreads them across the graph in a readable way. So, we create a simple point object that handles the visuals – both the expanding and contracting as well as the showing and hiding of the value text – and allow our graph to do some very simple calculations to spread them out evenly.

Quite simply, we just have to divide our overall width into regions: one region for each point of our graph. Once that is done, we simply place the point’s x position at the center of our region, use a little math to calculate a ratio for the y position (based on the maximum point displayed), and the rest falls right into place. What was most interesting to me was using the regions themselves for the MouseEvent to resize the points and show the values rather than specifically targeting the points. This is one of the behaviors of the Google graphs that has intrigued me. When I figured out how to simulate the same effect, I was amazed at the simplicity of it.

I hope this is of some help to you. As always, I’m providing the full source code and SWF below. To try out different combinations, simply replace the array in the loadPoints() method call at line 25 of the main file. Change things up, too: put only one point in, make massively different numbers or just be creative to see the different effects. Take a little additional time to calculate the adjustment to the Point.valMC, and you can be sure to keep all visuals within the bounds of the graph (as is done by Google). Great stuff!

Download Full Source Code