Hi guys!
I was searching through the web how to do time lines. I found this one that I like: http://www.simile-widgets.org/timeline/
So I try to follow their tutorial, which can be found here: http://simile.mit.edu/wiki/How_to_Create_Timelines
I following the tutorial so the code is the same but here it goes:
<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 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("test.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>
<body onload="onLoad();" onresize="onResize();">
<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div>
</body>
And the test.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="/TBDBsite/media/timeline.css"?>
<data>
<event
start="May 28 2006 09:00:00 GMT"
end="Jun 15 2006 09:00:00 GMT"
isDuration="true"
title="Writing Timeline documentation"
image="http://simile.mit.edu/images/csail-logo.gif"
>
A few days to write some documentation for <a href="http://simile.mit.edu/timeline/">Timeline</a>.
</event>
<event
start="Jun 16 2006 00:00:00 GMT"
end="Jun 26 2006 00:00:00 GMT"
title="Friend's wedding"
>
I'm not sure precisely when my friend's wedding is.
</event>
<event
start="Aug 02 2006 00:00:00 GMT"
title="Trip to Beijing"
link="http://travel.yahoo.com/"
>
Woohoo!
</event>
</data>
I'm having a problem with LOAD XML, I save their XML example file in the same place that the template but when I refresh the page I get this error:
Failed to load data xml from test.xml
NOT FOUND
I would like to known if anyone knowns why or to solve this. My idea was to save my data into some XML file but perhaps it isn't the best solution.
If someone has better ideias to make time lines I would also appreciate.
Thanks!