Create a SIMILE timeline from dom elements

Hi, I'm currently trying to create SIMILE Timeline from elements of my page, using some dom loading.

So far, I'm able to have my elements (as prototype Element objects) in an array, linked with their apparition date as javascript Date objects. What I'm trying to do now is to load a timeline using these objects. The code shows no error, but don't display any event in my timeline.

function loadTimeline() {
var events = loadTimelineData();
var eventSource = new Timeline.DefaultEventSource();
var eventsArray = new Array();
for(var i=0; i<events.size(); i++) {
    var evt = new Timeline.DefaultEventSource.Event( {
        start : events[i][2],
        instant : true,
        text : events[i][2].innerText,
        link : events[i][3].getAttribute("href")
    });
    eventsArray.push(evt);
}
eventSource.addMany(eventsArray);

var bandInfos = [ Timeline.createBandInfo( {
    width : "70%",
    intervalUnit : Timeline.DateTime.MONTH,
    intervalPixels : 100
}), Timeline.createBandInfo( {
    width : "30%",
    intervalUnit : Timeline.DateTime.YEAR,
    intervalPixels : 200
}) ];
// synchronize scrolling
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;

// create timeline
tl = Timeline.create($("timeline"), bandInfos);
}

function loadTimelineData() {
     return [
            [new Date(2010, 01,01), "A", "http://www.google.fr"],
            [new Date(2010, 02,01), "B", "http://www.google.fr"],
            [new Date(2010, 02,010), "C", "http://www.google.fr"],
        ];
}

The use of some DefaultEventSource methods has been validated by reading SIMILE timeline source code at url (which does not seems to work with StackOverflow) http://www.google.com/codesearch/p?hl=fr#Lhpgg-dZ4PI/timeline/trunk/src/webapp/api/scripts/sources.js&q=DefaultEventSource package:http://simile-widgets.googlecode.com&sa=N&cd=3&ct=rc&l=224.

ansaurus

tags:

views:

answers:

Create a SIMILE timeline from dom elements

related questions