I’ve made a few changes to my AS3 Time Series Graph charting class. The biggest is the addition of flagging. Now you (the Flash programmer using the TimeSeriesGraph class) can easily add flags to your application’s chart (much like on the Google Finance charts, upon which TimeSeriesGraph is based).
It’s easy. To add a flag (after creating an instance of TimeSeriesGraph and passing it some data), just use the following public method:
So here’s a new version of my example chart — George W. Bush’s approval ratings, now with a few key events from his presidency to explain some spikes.
The above was created with the following lines of code (after processing the approval data into two arrays — one of dates, the other of data (see my original post for more info)):
myGraph.setGraphSize(stage.stageWidth, stage.stageHeight);
myGraph.drawGraphs(approval, dateArray);
myGraph.applySecondGraph(unsure, dateArray);
myGraph.changeLabels("Approval Rating", "Unsure", "%", "%");
myGraph.addFlag(new Date(2001,8,11), "September 11th attacks on American soil");
myGraph.addFlag(new Date(2003,2,20), "Beginning of Operation Iraqi Freedom");
myGraph.addFlag(new Date(2003,11,13), "Saddam Hussein captured in Iraq");
There’s nothing fancy about these flags — their behavior is not as cool or complex as those on Google Finance. But they work fine, and provide a minimal, quick way of flagging key points in your data
The current behavior (seen above) is just to show the flag’s description in the top bar on mouseover. However, there is one publicly broadcast (or dispatched) listener that you can listen for, if you’d like to perform some action whenever the user clicks on a flag. Simply use the following code anywhere in your application:
The description of each flag is stored as a public variable, so here’s an example of a function to simply trace the description of the clicked flag:
trace(e.target.description);
}
The latest .zip file of the charting class (and examples) can be found here. Or, feel free to go to town and check out my Subversion repository. Enjoy!!
12 Comments
Vely nice!
RE: Google-esq graphs.
I’ve downloaded and noticed zip files are for only MacOSX?
Where could I find basic information on how to pull data from an sql database for the plot.
I’m a bit of newbie but is there any beta on how to incorporate the charts into a web page?
Thanks for your help.
best,
Hi Joseph,
Nope, the classes work on whatever system you’re using Flash. There may be a system file or two in the zip, only because my system put them in there.
The class requires two arrays (one of date objects, the other of values). How you create these is up to you. For pulling from a sql table on a server, you’ll need to look into a remoting solution (see amfphp) or Asql, which I’ve never used.
For embedding in a web page, just google something like “flash embed”.
Good luck!!
This is cool, super cool
Nice work, keep going!
hello
i m ali sadr
i m iranian
im english languege very bad
but im need to Information about google finance chart
im developering web / action script /php/
i m need link for download google finance chart .
and
what send data to google finance chart ?
and
what mould data?
im sorry for english langueg bad
HI,
I want to use google charts to show case a timesetries data (which would have huge no. of datapoints). But am stuck with the url limit of 2048 characters. How to get around this problem ??
TIA
If i give output of this in Flash 8 and AS 2 it doesn’t work. Can someone help please?
@Rajiv,
The code is written in ActionScript 3 so will only work with Flash CS3+/AS3.
Hey, how do i incorporate the chart in .NET 2.0 and later.
indiemaps.com - great domain name for blog like this)))
Is there an easy way to show the whole data series in the graph after calling drawGraphs()?
One Trackback
[...] chart with the possibility to add flags for comments. [...]