XQuery/Creating a Timeline

Motivation edit

You want to create a timeline of event data. Timelines show events in a horizontal scrolling view.

Method edit

We will use the JavaScript client Timeline widgets provided by the Simile-Widgets project. In this example we will be using the timeline 2.2.0 API calls.

To do this we need to transform a list of event dates into the proper formats and then create an HTML page that includes calls to the Simile JavaScript libraries.

Steps

View sample Event XML File format
View HTML template that loads XML file
Create XQuery Function that generates the HTML template and loads the appropriate XML data file

Our first example will use a list of non-Duration Events (Instant Events). We will explore duration events and other events in a future chapter.

We will then create a simple XQuery module with a single function that loads a simple timeline.

Sample XML File Using Standard XML Date Formats edit

Most XML dates use ISO 8601 coding. To use this format you must put in a date format attribute in the data file.

<data date-time-format="iso8601">
    <event start="2009-01-01" isDuration="false">
        First Day January, 2009
    </event>
    <event start="2009-01-01" isDuration="false">
        First Day of the Feb, 2009
    </event>
</data>

Note that the data file must specify the ISO8601 date formats that are used as the XML date format.

HTML Driver Template edit

The sample HTML file shows how this XML file is loaded using the Timeline.loadXML() function.

<html>
    <head>
        <script src="http://static.simile.mit.edu/timeline/api-2.2.0/timeline-api.js" type="text/javascript"></script>
        <script  type="text/javascript">
            <![CDATA[
var tl;


function onLoad() {
   var eventSource = new Timeline.DefaultEventSource();
   var bandInfos = [
     Timeline.createBandInfo({
         eventSource:    eventSource,
         date:           "Jan 01 2009 00:00:00 GMT",
         width:          "70%", 
         intervalUnit:   Timeline.DateTime.MONTH, 
         intervalPixels: 100
     }),
     Timeline.createBandInfo({
         eventSource:    eventSource,
         date:           "Jan 01 2009 00:00:00 GMT",
         width:          "30%", 
         intervalUnit:   Timeline.DateTime.YEAR, 
         intervalPixels: 200
     })
   ];
   bandInfos[1].syncWith = 0;
   bandInfos[1].highlight = true;
   
   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
   Timeline.loadXML("example-01.xml", function(xml, url) { eventSource.loadXML(xml, url); });
 }
 
 var resizeTimerID = null;
 function onResize() {
     if (resizeTimerID == null) {
         resizeTimerID = window.setTimeout(function() {
             resizeTimerID = null;
             tl.layout();
         }, 500);
     }
 }
 ]]>
        </script>  
    </head>
    <body onload="onLoad();" onresize="onResize();">
        <h1>Timeline Template</h1>
        <div id="my-timeline" style="height: 150px; border: 2px solid blue">
            
        </div>
        <noscript>
            This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.
        </noscript>
    </body>
</html>

Sample Image edit

This will produce the following example:

Sample Timeline Output For Two Events

Sample Module edit

Format for Non-Standard Dates edit

Sample XML Event File Using Non-Standard XML Date Formats edit

<data>
    <event start="Jan 01 2009 00:00:00 GMT" isDuration="false"
        title="First Day of the New Year">
        First Day of the New Year</event>

    <event start="Feb 01 2009 00:00:00 GMT" isDuration="false"
        title="First Day of the Feb">
        First Day of the Feb</event>
</data>