TimeSeriesGraph — now with flags!!

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:

myGraph.addFlag(date:Date, description:String);

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 = new TimeSeriesGraph(this);
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:

this.addEventListener(Flag.FLAG_CLICK, functionToBeCalled);

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:

function clickFlag(e:Event) {
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

  1. Vely nice!

    Dooier
    Posted May 31, 2008 at 12:38 pm | Permalink
  2. 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,

    Posted June 27, 2008 at 9:40 am | Permalink
  3. 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!!

    Posted June 28, 2008 at 3:21 pm | Permalink
  4. This is cool, super cool

    Morris
    Posted September 1, 2008 at 10:21 am | Permalink
  5. Nice work, keep going!

    James
    Posted September 18, 2008 at 4:14 am | Permalink
  6. 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

    Posted November 9, 2008 at 4:18 pm | Permalink
  7. 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

    shreyas
    Posted November 20, 2008 at 1:31 am | Permalink
  8. If i give output of this in Flash 8 and AS 2 it doesn’t work. Can someone help please?

    Rajiv
    Posted November 23, 2008 at 3:16 am | Permalink
  9. @Rajiv,

    The code is written in ActionScript 3 so will only work with Flash CS3+/AS3.

    Posted November 25, 2008 at 12:21 am | Permalink
  10. Hey, how do i incorporate the chart in .NET 2.0 and later.

    Nura
    Posted December 2, 2008 at 1:50 am | Permalink
  11. indiemaps.com - great domain name for blog like this)))

    Posted January 30, 2009 at 5:06 am | Permalink
  12. Is there an easy way to show the whole data series in the graph after calling drawGraphs()?

    Peter
    Posted February 14, 2009 at 9:48 pm | Permalink
  13. Is this code supported?
    I cannot compile it
    it complains about wholeSlider variable

    Alex
    Posted August 11, 2009 at 11:09 pm | Permalink
  14. @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.

    Posted August 15, 2009 at 2:28 pm | Permalink
  15. 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..

    ???

    nate
    Posted September 24, 2009 at 11:22 am | Permalink
  16. 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.

    Mark Hagers
    Posted March 5, 2010 at 5:32 am | Permalink
  17. Hello,

    I cannot compile it
    wholeSlider variable not defined

    How to get around this problem ??

    Pierre FOURMOND
    Posted March 26, 2010 at 6:24 am | Permalink
  18. 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???

    Sameeksha
    Posted October 29, 2010 at 1:41 am | Permalink
  19. 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

    dima
    Posted January 3, 2011 at 10:02 pm | Permalink
  20. 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

    Alan
    Posted October 8, 2012 at 10:40 am | Permalink

One Trackback

  1. [...] chart with the possibility to add flags for comments. [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *