function onLoad() {
    var eventSource = new Timeline.DefaultEventSource();
    var bandInfos = [
        Timeline.createBandInfo({
            eventSource: eventSource,
            date: "2010",
            width: "75%",
            intervalUnit: Timeline.DateTime.YEAR,
            intervalPixels: 150
        }),
        Timeline.createBandInfo({
            overview:       true,
            eventSource: eventSource,
            date: "2010",
            width: "15%",
            intervalUnit: Timeline.DateTime.DECADE,
            intervalPixels: 200
        }),
        Timeline.createBandInfo({
            overview:       true,
            eventSource: eventSource,
            date: "2010",
            width: "10%",
            intervalUnit: Timeline.DateTime.DECADE,
            intervalPixels: 50
        })
    ];
    bandInfos[1].syncWith = 0;
    bandInfos[2].syncWith = 0;
    bandInfos[1].highlight = true;
    bandInfos[2].highlight = true;
    tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
    Timeline.loadXML("/resources/infographic/xml/auv_system_timeline.xml.php", function(xml, url) { eventSource.loadXML(xml, url); });
    tl.layout();
}