This sample demonstrates an example usage of a Graduated Panel to draw ticks and text labels along a timeline.

The Panel uses a Panel.graduatedTickUnit of 1 to represent one day, and ticks are drawn at Shape.intervals of 7 to represent weeks.

Labels are drawn at TextBlock.intervals of 14, or every two weeks. As the timeline is resized, the interval is updated to prevent overlaps. Text strings are generated by setting the TextBlock.graduatedFunctionto convert from values in the graduated range to date strings. Also notice that labels use the GraphObject.alignmentFocus, GraphObject.segmentOrientation, and GraphObject.segmentOffset properties to place text below the timeline bar.

Try resizing the timeline: select the timeline and drag the resize handle that is on the right side. Event nodes will automatically be laid out relative to the timeline using the TimelineLayout. TimelineLayout converts a date to a value, then uses Panel.graduatedPointForValue to help determine where event nodes will be placed.