How can I display a schedule with overlapping events?

Question

I'll do the best to explain this, but please ask clarifying questions as needed:

I basically have a schedule attempting to map out seven stages of an event, which occurs over a period of roughly a week. This data is presently in timestamps which are difficult to read and hard to draw conclusions from, and I would like to present it visually some how.

Each stage has an estimated period of time in which it might occur, and these times can overlap with other stages because they are estimates (and in fact typically will).

In addition to the estimates, in certain stages I will sometimes know when part of the stage is known, with certainty, to be occurring.

The purpose of this map/schedule is to allow a user to look at the schedule and instantly recognize what periods of time stages are likely to occur, and what periods of time stages are definitely occurring.

How do I translate my timestamps into some sort of visual to convey this information?

Answer 1

Your stages sound exactly like activities in a project. Visualizing the planning for a project is usually done with a Gantt Chart. A simple one might look like:

The dark part of each bar represents the minimum time an acitivity takes, the transparent part indicates the margin on the duration.

When project activities can depend on each other, for example B should not start before A has also started and only when C has ended, these relationships can also be visualized by including lines/arrows between activities. For example:

Just google for images of Gantt chart to get some inspiration.

Update in response to comment:

Each stage:

• can have margins on both start time and end time
• latest start time does not necessarily occur before the earliest end time
• can have minimum time (latest start time until earliest end time)
• can not occur at all (latest start time after earliest end time)
• can be happening at report time

I think you can get a long way with a bit of clever shading and an indication of the actual start/end times:

• Use a different shade saturation for stages that have a minimum duration and those that do not.
• Indicate the start and end time margins with horizontal bar (at a different height) above the stage bar.
• Indicate actual start time and/or end time by shading with a highlight color.
• Use transparency in the highlighting so the original information isn't hidden.

^{download bmml source – Wireframes created with Balsamiq Mockups}