ul, li {
list-style-type: none;
padding: 0;
}
.timeline {
margin-left: 5em;
height: 30em;
}
.timeline li {
border-left: 2px solid #000;
}
.timeline li strong, .timeline li span.date {
padding-left: 1em;
border-bottom: 1px solid #000;
}
.timeline li.end *, .timeline li.start * {
position: relative;
left: -5em;
background: #ccc;
}
<?php
$startTime = mktime(0, 0, 0, 1, 1, 1995);
$endTime = mktime(0, 0, 0, 1, 1, 2011);
$milestones = array(
array(
'time' => mktime(0, 0, 0, 1, 1, 2001),
'task' => 'Important stuff 3',
),
array(
'time' => mktime(0, 0, 0, 1, 1, 1998),
'task' => 'Important stuff 1',
),
array(
'time' => mktime(0, 0, 0, 1, 1, 2007),
'task' => 'Important stuff 4',
),
array(
'time' => mktime(0, 0, 0, 9, 1, 2007),
'task' => 'Important stuff 5',
),
array(
'time' => mktime(0, 0, 0, 1, 1, 1999),
'task' => 'Important stuff 2',
),
);
function byTime($a, $b)
{
if ($a['time'] == $b['time'])
return 0;
return ($a['time'] < $b['time'] ? -1 : 1);
}
usort($milestones, 'byTime');
$totalT = $endTime - $startTime;
$mh = 100 * ($milestones[0]['time'] - $startTime) / $totalT . '%';
echo "<ul class='timeline'>\n"
."<li class='start' style='height:$mh'><span class='date'>"
.date('Y-m-d', $startTime)."</span><strong>Project Start</strong></li>\n";
for ($i = 0; $i != count($milestones); ++$i) {
if ($i != count($milestones) - 1)
$deltaT = $milestones[$i+1]['time'] - $milestones[$i]['time'];
else
$deltaT = $endTime - $milestones[$i]['time'];
$mh = 100 * $deltaT / $totalT . '%';
$task = htmlspecialchars($milestones[$i]['task']);
$date = date('Y-m-d', $milestones[$i]['time']);
echo "<li style='height:$mh'><span class='date'>$date</span><strong>$task"
."</strong></li>\n";
}
echo "<li class='end'><span class='date'>"
.date('Y-m-d', $endTime)."</span><strong>Project End</strong></li>\n"
."</ul>\n";