XQuery/Creating a Timeline

From Wikibooks, open books for an open world
Jump to navigation Jump to search

Motivation[edit | edit source]

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

Method[edit | edit source]

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.


  1. View sample Event XML File format
  2. View HTML template that loads XML file
  3. 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 | edit source]

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 start="2009-01-01" isDuration="false">
        First Day of the Feb, 2009

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

HTML Driver Template[edit | edit source]

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

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

function onLoad() {
   var eventSource = new Timeline.DefaultEventSource();
   var bandInfos = [
         eventSource:    eventSource,
         date:           "Jan 01 2009 00:00:00 GMT",
         width:          "70%", 
         intervalUnit:   Timeline.DateTime.MONTH, 
         intervalPixels: 100
         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;
         }, 500);
    <body onload="onLoad();" onresize="onResize();">
        <h1>Timeline Template</h1>
        <div id="my-timeline" style="height: 150px; border: 2px solid blue">
            This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.

Sample Image[edit | edit source]

This will produce the following example:

Sample Timeline Output For Two Events

Sample Module[edit | edit source]

Format for Non-Standard Dates[edit | edit source]

Sample XML Event File Using Non-Standard XML Date Formats[edit | edit source]

    <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>