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.
8 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.
Hey Zach! This is such a brilliant piece of work. You have offered beginning AS developers like me around the world with a light of hope of creating time series charts.
However, just found a little bug, this package does not work well when the number of data is less than 100, the small graph disappears, moveDot does not show every data’s specifics.
Can you please kindly explain why and how to tune it??
Also, I realised that you have achieved the zoom in/out effect by creating a graphHolder and use the mainGraph as a mask of this graphHolder. But this requires plotting every single data in the array for both the main graph and small graph.
Do you think its possible (and logical) to plot the data in the mainGraph by coupling the mainGraph with smallGraph? So that the mainGraph only plots the data that are bound by the zoom window’s left and right boundaries rather than plotting every data in drawGraphs.
Many thanks for your time and effort!!! hope to hear from you soon!!!
Also, Zach, if you don’t mind, I would like to have your email and would like to seek for your consultation in some of design logics behind this brillian piece of work!
If you feel like, you may reply my post to my email
Great work. Thanks to you and a google search for - google finance flash - I found your code. Time to learn Flash on Linux… I needed a better way to display/analyze my home power usage than what came with TED5000 or GooglePowerMeter. You would think since Google has the Finance graph ability, they would build on reuse in the best of ways. - Thanks agin.
Stuart - Tampa
It has been some time since this post was written, but I was wondering your thoughts on comparing Flash charting vs. JS based charting such as Flot.
I am quite happy with Flot so far on my web app http://gaevolution.appspot.com, but I notice that if I have a lot of elements, it can be pretty CPU intensive to render the graphics. I am not sure if it is the DOM crawling (which would be a problem regardless of using a JS or flash chart) & assembly or in the actual rendering.
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); [...]