Help
Add this page to your collection
Show collection (0 pages)
Suggest pagesXQuery/Creating a Timeline
Contents |
[edit] Motivation
You want to create a timeline of event data. Timelines show events in a horizontal scrolling view.
[edit] Method
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.
[edit] Sample XML File Using Standard XML Date Formats
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.
[edit] HTML Driver Template
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>
[edit] Sample Image
This will produce the following example:
[edit] Sample Module
[edit] Format for Non-Standard Dates
[edit] Sample XML Event File Using Non-Standard XML Date Formats
<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>
