A Google Finance-esque Charting Class for Flash written in AS3
Over at Google Code you’ll find my new time-series-graph class. It’s a simple charting class that lets you insert a chart similar (very similar) to that used by Google in their Finance Pages.
Go over to my project page or just download the .zip file of the class. The .zip file includes
- a folder called “Charting” that contains a .fla file that includes the movie clips necessary for the class (compile this for an example of the class)
- a folder lib/com/indiemaps/charting that contains the actual .as file of the class
To use the charting class, do the following:
- Drop my indiemaps folder into your lib/com directory
- Open up Charting/charting.fla and copy the files in its library into your .fla file’s library
- Use the following code in your .as or .fla file
myGraph.setGraphSize(width, height);
myGraph.drawGraphs(valueArray, dateArray);
myGraph.applySecondGraph(valueArray,dateArray);
addChild(myGraph);
The above code should be pretty self-explanatory, except perhaps for the arrays. You need to have your data that you’d like to graph in two arrays. The first is an array of your data values, from first to last, in chronological order. The second needs to be an array of date objects that corresponds to your value array. Creating these arrays is up to you, though it should be pretty simple.
Other public methods include
changeLabels("First Label", "Second Label", "First Units", "Second Units")
mainAverage() //returns the average value of the currently viewed main window
mainMin() //returns the minimum value in the currently viewed main window
mainMax() //returns the maximum value in the currently viewed main window
Below you’ll find an example of the chart in action. I’ve loaded in George W. Bush’s Gallup Poll approval ratings on the main graph window and those who responded “unsure” in the smaller bar chart.
This was originally a part of the Hydrologic Dashboard that I’m working on for UW Sea Grant. I recoded it as a general class so that I (and others) could simply add it to any project. Of course, there’s plenty more to do. I can think of a dozen more public methods that could be added to the class. So if you’re interested, go ahead and check out the code and go to town.
Coding this has also made me realize that I need to learn Flex. Brendan Meutzner has already coded a very similar but better charting component for use in Flex. And apparently it took much less than the dozen+ hours it took me to create time-series-graph, thanks mostly to the use of mxml and Flex’s built-in charting components. I hadn’t seen Brendan’s component until after I completed mine; at least now Flash programmers can get in on the charting fun.
4 Comments
Hi!
It is great tool. But how can i add a few lines to this chart?
You mean multiple lines in the main window? There’s currently no method for this, though it wouldn’t be too hard to implement if you know a bit of AS3. Someday I’ll get around to fixing a few things on the time-series-graph… For now, I’d just suggest looking through the TimeSeriesGraph.as class to see what you’d need to modify to add an additional line.
This is exactly the type of graph I am looking for; however, I am not a programmer and am looking for a software program that would allow me to import a data set and create a graph like this. Any suggestions? Thanks!
Hi Dustin, If you have access to Flash, the example provided in the zip file should be able to get you started. Even if you’re not a programmer, I hope the charting classes are easy to use, though they could certainly use some work. Just try replacing the code in the examples with code that will work for your dataset. And let me know if you have specific questions.
One Trackback
[...] (after processing the approval data into two arrays — one of dates, the other of data (see my original post for more info)): myGraph = new TimeSeriesGraph(this); [...]