Create a timeline from date to date in Flex / AS3
I need to create a timeline between two given dates, that is: 2006-01-20 - 2009-02-14
The timeline must be drawn at a given width (can be resized), i.e . : 600px
But I need to add markers starting from the beginning of the year and others 4 times throughout the year (every 73 days aprox):
Any advice?
source to share
I think the axes in the Flex Charting package allow for this kind of formatting by default.
If you need to do more, Flex charts also let you draw them. This might be what you are looking for.
Link: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_formatting_02.html
You could, of course, always do it from scratch yourself if you want, but the amount of time you spend doing this may not offset the price of the professional edition (to get the diagram component if you already have it).
source to share
I would create a component from scratch, perhaps based on the Canvas component and adding strings and labels, dividing the component's width by the number of lines (or something like that - I'm not the best at math).
You can also implement a function to pop up an info box when the user translates a specific part of the timeline.
What you want has timeline dependent features that don't have a chart axis. I would not compromise on using a component not built for this specific task and introducing errors or non-standard actions. Flex was built for fast extensibility, so why not take advantage of this opportunity?
EDIT : Formulas To get the tick position you will need to divide the timeline width by the number of ticks minus one. Let's say we had a 400px timeline with 5 ticks (counting those on the far sides of the timeline). We count ticks starting at 0. All we have to do to determine the tick position is dividing 400 by 4 and multiplying by the number of ticks.
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 get through this.
-
Mark 0, at the far left, at x 0.400 / 4 * 0 = 0
-
Mark 1, next to far left, x 100.400 / 4 * 1 = 0
-
Mark 2, in the middle, at x 200.400 / 4 * 2 = 200
-
And so on, mark 3 at x 300 and 4 at x 400 (at the far right).
What if the above formula returns a decimal number? Around! Users will barely notice the one-pixel difference (although I think operations like this with integers are automatic).
You can add margin to the left or right of the timeline by doing the timeline_width-margin (must be an even number) and increasing the x position of each tick by half that. This will add some space on each side and center the ticks.
If you're lucky, I can just make a working prototype for you shortly; -)
source to share