Timeline for your website

Last Updated on Monday, 12 January 2009 09:46 Written by webguyatwork Friday, 14 November 2008 02:52

This article demonstrates how I used the Timeline project from http://simile.mit.edu/timeline/ to implement a simple project calendar using dynamic data.

This Timeline component goes far beyond my expectations.  It is completely extensible, yet this tutorial will only cover a very small portion of what I implemented for my own needs.

Preparing the Data

Using a MySQL database, create a table called “timelines” with the following SQL:

CREATE TABLE IF NOT EXISTS `timelines` (
`id` int(11) NOT NULL auto_increment,
`timeline` varchar(50) NOT NULL,
`start` datetime default NULL,
`end` datetime default NULL,
`title` varchar(500) NOT NULL,
`description` text,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Now, go throw some data in there using your favorite database tool.  If you want to simply have a bullet point on the timeline, use either the start or end value and leave the other blank.  I’ll show you why later.

Download the Timeline Component

Obtain a copy of the Timeline component on its project site:

http://simile.mit.edu/timeline/

Locate the “src/webapp/api” directory and FTP it to your webserver in a new folder named “timeline”. This folder contains all of the source code for creating your timeline and displaying your generated data.

Add a blank timeline to your page

Adding a blank timeline to your page will ensure that you’ve got the Javascript in the right place and that the timeline code can reference it properly.  Let’s see what this looks like.  For mine, I want to see 2 bands, one with a list of months, and the other with a list of weeks.

This is my blank timeline.

Loading the Data

Next up, I want to load the dynamic data from my database table. The following code should help you figure out how to best return the data and format in the proper data format required by your Timeline.

/* This function will load the requested data into a temp file and returns the name of the file */
function loadTimelineData($dataname) {
global $db, $t, $page;

$times = $db->getAll(“select * from ! where timeline = ? order by start, end”, array(TIMELINES_TABLE, $dataname));
$filename = TL_API_DIR.”data/”.$dataname.”.xml”;

$temp = fopen(FULL_PATH . $filename, “w+”);

fwrite($temp, “\n”);
foreach ($times as $time) {
$event = ”
if ($time['start'] != NULL) { $event .= ‘ start=”‘.date(“D M d Y H:i:s”, strtotime($time['start'])).’”‘; }
if ($time['end'] != NULL) {
if ($time['start'] != NULL) { $event .= ‘ end=”‘; } else { $event .= ‘ start=”‘; }
$event .= date(“M d Y H:i:s”, strtotime($time['end'])).’”‘;
}
if ( ($time['start'] != NULL) and ($time['end'] != NULL) ) { $event .= ‘ isDuration=”true”‘; }
$event .= ‘ title=”‘.$time['title'].’”‘;
if ($time['description'] != NULL) { $event .= ‘>’.”\n “.$time['description'].”\n \n”; } else { $event .= “/>\n”; }
fwrite($temp, $event);
}
fwrite($temp, “\n”);
fclose($temp);

return $filename;
}

I used the above code to load the data into a static XML file.  Yes, it’s still a static file, but the data refreshes each time the page loads.  The file name is returned so that you can reference it in the javascript that loads the data in. A sample of the data that gets returned is shown here.

<data>
<event start=”Nov 8 2008″ title=”Metrics collection plan due”/>
<event start=”Nov 1 2008″ end=”Nov 12 2008″ title=”Something important”>This is a very important project</event>
<event start=”Nov 20 2008″ title=”A one-day event”/>
<event start=”Dec 25 2008″ title=”Christmas Day”>Everyone can take today off to be with their families</event>
</data>

And here is what the timeline looks like when it is populated with the data from the above dynamically-generated XML file.

Note that I had to manually manipulate the data in order to get these timelines to show up inside of Wordpress. I can not fully endorse the use of this procedure inside of a Wordpress blog, but it should give you an insight on how to implement a timeline in your dynamic websites using PHP or another of your favorite programming languages. Use at your own risk.