Create a timeline from date to date in Flex/AS3

Answer 1

I think the axes in the Flex Charting package allow you to do such formatting by default.

If you need to do more, Flex Charts also allow you to draw of them. That might be what you're looking for.

Link: http://livedocs.adobe.com/flex/3/html/help.html?content=charts%5Fformatting%5F02.html

You could of course, always do it from scratch yourself if you wanted, but the amount of time you spend on that might not offset the price of the professional edition (To get the charting component, unless you have that already).

Answer 2

I would create a component from scratch, probably based on the Canvas component, and add lines and labels by dividing the width of the component by the number of lines (or something like that - I'm not the best at math).

You could also implement a feature to pop out a box with info when the user mouses over a certain part of the timeline.

What you want has timeline-specific features that chart axes do NOT have. I wouldn't compromise using a component not build for this specific task and introducing bugs or inelegant work-arounds. Flex was built for rapid extensibility, so why not take advantage of this feature?

EDIT: Formulas To get the position of the ticks, you'd have to divide the width of the timeline by the number of ticks minus one. Say we had a 400px timeline with 5 ticks (counting the ones on the far sides of the timeline). We count the ticks starting from 0. All we have to do to get the position of the ticks are divide 400 by 4 and multiply that by the tick number.

In code:

for (var i : int = 0; i < num_ticks; i++) {
    ticks[i].x = timeline_width / num_ticks-1 * i;
    // do some drawing of the ticks
}

I'll walk you through it.

• Tick 0 , at the far left, at x 0. 400 / 4 * 0 = 0

• Tick 1 , near the far left, at x 100. 400 / 4 * 1 = 0

• Tick 2 , in the middle, at x 200. 400 / 4 * 2 = 200

• And so on, Tick 3 at x 300 and 4 at x 400 (far right).

What if the above formula returns a decimal? Round it! Users will barely notice a one-pixel difference (though I think operations like this on integers round automatically).

You can add a margin at either the left of right of the timeline by doing timeline_width-margin (must be an even number), and incrementing the x position of each tick by half of that. This will add some space on each side and center the ticks.

If you're lucky, I might just make a working prototype for you soon ;-)