Timelines in Flex
For work, I needed to add a timeline to a chart. After first investigating the Timeline stuff Adobe is working on, I decided I’d be better off just building my own. Though the adobe version will probably be useful at some point, the amount of wrangling I would’ve had to do just to get it to display a simple one-line timeline seemed a bit odd. Also, on top of a normal timeline, I had need of a specialized timeline renderer which would display a certain step-value over time. This was a value that could change from day to day, but would most likely remain constant for large periods of time.
Instead of the Adobe timeline, I looked to our old friend the MXML charting components–which already do most of what you’d expect for a timeline: take a data source and render it along a linear axis. The “rigorous” thing would probably be to actually take the classes like LinearAxis and start building new components on top of them… but I didn’t have time to be rigorous. What I’ve done instead is build a specialized wrapper around the Cartesian Chart class which draws its own background, strips out all the look of a regular chart, and simply displays the data in a single line. Rather than run a demo with our top secret data, I whipped up the example below:
The timeline, top, marks the last dozen or so Giants games where Barry Bonds has hit a home run. The value-based timeline below it shows the Giants’ win-loss streaks for that same period. It would’ve turned out prettier if they weren’t so up and down, but I was stumped for other data sources to use… Well, okay, I thought it would be kind of cool to graph the U.S. terror threat level since 9/11, but I tend to avoid the political. I just liked that data-set because there is a clear range of 5 values (although we only really ever see yellow or orange, I guess).
The examples below (with source) aren’t really all that pretty, but I thought they might be helpful to someone. It’s all pretty easy to modify, regardless.
Source: test.mxml, Timeline.as, TimelineRenderer.as, ValueRenderer.as
