Stuck - Bus fleet schedule calendar

Question

At my job, I need to create a calendar that shows the days and time slots in each day, and in each slot, I need to show what are the buses that are out each day, who are the bus drivers etc.

This is what I come up with:

Now, here's the problem:

Look at Bus A and Bus B.

If Bus A is instead booked from 12 AM to 4 AM, how would I show that on the calendar, without blocking the Bus B graphic?

And to complicate things, if Bus B is booked from 12 AM to 3 AM, how do I show it without overlapping other blocks?

Basically, on each day, there can be multiple buses going out at all around the same time etc.

I've looked at project management timeline UIs, calendar UIs but can't find anything similar to what I'm trying to do.

Can this sort of data be shown on a calendar, or is it impossible, meaning I've to use tabular list data?

Answer 1

If you can make a table for each day it will be easier to understand the schedule of each bus:

Otherwise you need to divide each day column into sub-columns for each Bus, with a legend for the colors:

BusA: Green, BusB: Purple, etc.

Answer 2

What you're looking for is really complex. You could use a 3-way matrix (see this page for explanation and examples or this one for 3,4 and 5 ways) if you're OK with using tables, or you'll need to go deep on Adjacency Matrices for graphs . If this is your first time at these concepts, then they're really interesting and important, but be aware: they're NOT easy.

However, if you want a simpler solution, you need to ask yourself these questions:

• What do I need to represent?
• How do I need to represent it?
• Why do I need to represent the elements of this specific architecture?
• Which elements do I need?

There are many more questions, but for starters, it's a good beginning. See Alavaro's answer where all these questions were answered for 2 different solutions.

Now, the thing is: your 3-way matrix could be easily rebuild in 2 views of 2-dimentional information. It's really unlikely that you'll need the 3 ways at the same time. And even if you need it, it would be very difficult to visualize (as you accurately describe in your problem)

Also, using the 3-ways with a bar graph on a grid will have a massive cognitive load, since at first glimpse all buses would look as if they're taken for entire days (as in your example for Tom)

So, my solution would be:

• Create a grid where you discriminate hours for each bus/driver on each single day (see Alvaro's example)

• Create another view with occupancy per day. Here you can use a table with numerical data.

See the following example:

Bus  |   Day 1   |   Day 2   |   Day 3
----------------------------------
Tom      3 hours     4 hours     0
Nick     1 hours     0           3 hours
Ryan     4 hours     2 hours     1 hour

This way you'll be able to visualize the important information you need while being able to add totals and simple graphs.

Finally, if you really need all options at once, you can try this:

Where the user can scroll the times up to end of day, with a clickable element to go to next day that also has the information for the following day. But again: previous solutions are cleaner and more elegant

Answer 3

Let's not get too geeky, and do it the lazy way. What got you stuck is time. Time is time whether it is minutes, days or years, what differs is the scale, not the characteristics.

Once you see this the problem becomes simpler and the approaches of solving it are different.

This is an example where the user can zoom in and out of the view to scale time.