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!!
20 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()?
Is this code supported?
I cannot compile it
it complains about wholeSlider variable
@Alex: Sorry, no, completely unsupported. Indeed it’s by far the nastiest code I’ve ever released and I wouldn’t use it if I were you.
How do I even get this working at all? I loaded the .FLA and pasted the .AS into the Action Script and tested it. Nothing came up.
It’s reading from a CSV for data.. I can write that using PHP, and get this working.. if I can get this to compile..
???
TimeSeriesGraph looks very promising for a project I’m working on. However I need to combine several line charts in one graph, to allow comparing two data series directly. (similar to Google finance where you can compare two stocks). Can something like that be done with TimeSeriesGraph?
It’s not that I’m to lazy to try this out for myself, I just want to avoid spending loads of time to find out that TimeSeriesGraph isn’t what I’m looking for.
Hello,
I cannot compile it
wholeSlider variable not defined
How to get around this problem ??
I am getting this kind of error at runtime.
RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/addChildAt()
at com.indiemaps.charting::TimeSeriesGraph()[E:\SOFTWARES\PQP\src\com\indiemaps\charting\TimeSeriesGraph.as:110]
at Charting()[E:\SOFTWARES\PQP\src\Charting.as:38]
What should i do???
Hi Zac,
You have done a great job even you seem to be rude against your coding.
I am having a look to your classes to integrate them in one of my project.
I will give some news with my incoming integration (specially concerning CPU time consumption as I have to plot data dynamically).
And I will try to donate something if my project catch some client
Dima
hi Zac, I loved your time series flash presentation.
If I have a couple million rows of data measured at different times would your implementation be reasonable fast? thanks,Alan
One Trackback
[...] chart with the possibility to add flags for comments. [...]