How do I line up duration events to be at the same horizontal location as the next one, even if they overlap?

[lesm]

Our team is considering using this timeline for a project.

 

The verticle placement of duration events and non-duration events seems to be random.

 

1. How do I line up duration events to be at the same horizontal location as the next one, even if they overlap?
2. Can I define the order in which event nodes are placed when multiple events occur close to each other?

[fgalah]

Hi - the horizontal placement is done according to the exact start and end date of the event so if you want them to be at the same horizontal location, they will need to have the same date. I have done this by rounding dates down to the nearest display interval (day, week, month, etc.)

The vertical placement is done according to the next available space for an event.

The order of the events will depend on the JSON string that the Timeline script is reading from. So if you are able to manipulate your JSON string you should be able to set the order.

Does that make sense?

FG

[Michael Nosal]

This isn't entirely correct.

Timeline doesn't position events at 'random' and the vertical ordering of events depends both on the date of the event and the space required to display the event and it's label. You do not need to manipulate your JSON strings to set the order. 

By default, Timeline will draw events starting with the latest date and working backward to the earliest date. The vertical position is calculated to avoid labels/duration bars/icons overlapping with other events. I've posted sample code to this list describing how to change the iteration to go from earliest date to latest date, which produces a more natural-looking 'cascade' of events over time. 

You can control the display of events in many different ways. 

If you know explicitly how you wish to lay out your events, you may include a "trackNum" attribute in your event data. Thus you are able to force events into a specific track, regardless of whether they overlap. 

You may also write a custom function for calculating trackNums for your events, allowing you to change their vertical position dynamically. This allows you to decide how to handle collisions between events close to each other (on the display, not necessarily in time). Or to allow different "groupings" of events within a band.

Attempting to manipulate the start dates for your events in an effort to control the display is just asking for frustration, as you still need to worry about how long your label text is (and what theme metrics you have defined, what styles are being used, etc.) 

Much better to use trackNum (either explicit or calculated) and directional ordering (forward or reverse iteration).

At the extreme end of customization, you can also write a custom painter. See api/scripts/compact-painter.js

--Mike