XQuery/Creating a Timeline
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.
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 | 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>
<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 | edit source]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 | edit source]This will produce the following example:
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]<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>