You can do all of this simply with php and the gd library.
You have 24 hours in a day, or 48 "30-minute" sections of a day, or 96 15-minute sections, or 86400 seconds in a day. So depending upon how accurate you want to be, you can break it down from there. Oh! Let's not forget that you could just use percentages as well (i.e. 2 hours = 1/12 of a day = 8%😉.
So let's say that you round to the nearest 15 minutes. We want a maximum height of 500 pixels let's say. That means that for every 15 minutes, there will be about 5 pixels of a bar. That was deduced from 500px / 96 segments = 5.2083 ~ 5px/segment.
So let's say you have those times you gave above. Knowing that there are 5 pixels per segment, you can then say:
8:00 - 11:30 = 3.5 hours :: 3.5 hours 4 15-min segments = 14 segments = 70 pixels
11:30 - 12:30 = 1 hour :: 1 hour 4 15-min segments = 4 segments = 20 pixels
12:30 - 13:00 = 1/2 hour :: 1/2 hour 4 15-min segments = 2 segments = 10 pixels
13:00 - 16:00 = 3 hours :: 3 hours 4 15-min segments = 12 segments = 60 pixels
16:00 - 17:00 = 1 hour :: 1 hour * 4 15-min segments = 4 segments = 20 pixels
So we have a graph totaling 180pixels in height. We know that we start at 8 am, and since midnight is 00:00, let's equate that to 0 on the Y-axis.
So 8 am is 8 hours, times 4 15-min segments which is 32 segments * 5 pixels per segment which is 160 pixels.
Now we know where our day "starts" (0, 160). So now we can tell GD to draw a rectangle staring at an x position of 0 and a y position of 160. Draw it until an x position of 0 + width of the bar (we'll say 15 pixels) and a y-position of 160 + the first time-period (70 pixels). So we have our 2 points: (0, 160) and (15, 230).
Then staring at (0,230) you can draw another rectangle from 0,230 to 15,250. Then from 0,250 you can draw one to 15,260. And another from 0,260 to 15,320. Then from 0,320 to 15,340. So you have the following boxes:
[ (0,160) to (15,230) ]
[ (0,230) to (15,250) ]
[ (0,250) to (15,260) ]
[ (0,260) to (15,320) ]
[ (0,320) to (15,340) ]
You can fill those with different colors, and what not. If you wanted to stagger them, you could just at 15 or 20 pixels to each X position:
[ (0,160) to (15,230) ]
[ (20,230) to (35,250) ]
[ (40,250) to (55,260) ]
[ (60,260) to (75,320) ]
[ (80,320) to (95,340) ]
You would only need to use a few gd functions like [man]imagecreate[/man], [man]imagerectangle[/man], [man]imagecolorallocate[/man] (for colors), and if you really wanted to get fancy, you could use [man]imagearc[man] or [man]imagefilledarc[man] to create "rounded" corners.
Hope that helps.
