Ajax Timelines and the Semantic Web

Explore anything that has a time component with a little Timeline Ajax code.
Theme Your Timeline

The default timeline theme is low contrast grey on grey for the font and background with blue highlights for events. This can be customized using a combination of JavaScript and Cascading Style Sheets (CSS), depending on what you want to change. To change the background colors and some of the time bands, you can create an instance of the default theme JavaScript object, make modifications to that object and then pass it to Timeline.createBandInfo(). The font colors are set using CSS.

Listing 4 shows the changes needed for the previous HTML file to modify the band colors and font information. After including the timeline-api, we override two of the CSS classes to change the font color and enlarge the major date markers. The band colors and click bubble size are properties of the theme object. This modified theme object is then passed as a parameter to the Timeline.createBandInfo() function when creating the bands. The result is shown in Figure 2.

Figure 2. A Themed Timeline with Bands Changed to Months and Years

Showing syslog on a Timeline

syslog is a great source of highly time-related information. Perl makes it easy to convert syslog files into the XML format required by Timeline. In this example, I convert from the format used by /var/log/messages in Fedora Core 5 into a Timeline XML file, shown in Listing 5. The main complication is that, by default, the year is not included in the date and time specification in the syslog file. This makes the regular expression to split the input more complicated, as we want to get the date and time separately, so we can insert the year between them in the output.

Making the Timeline higher and including three bands makes jumping around in the logs easier, as shown in Listing 6.