<div id="tl" style="height: 300px; border: 1px solid #aaa"></div>

<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>
 
<script type="text/javascript">
    var tl;
    function onLoad() {
        var eventSource = new Timeline.DefaultEventSource(0);
 
        var theme = Timeline.ClassicTheme.create();
        theme.event.bubble.width = 300;
        theme.event.bubble.height = 200;
        theme.mouseWheel = 'scroll';
        var d = Timeline.DateTime.setIso8601Date(new Date(), "2011-06-27");
        var bandInfos = [
            Timeline.createBandInfo({
                width:          "80%", 
                intervalUnit:   Timeline.DateTime.DAY, 
                intervalPixels: 100,
                eventSource:    eventSource,
                date:           d,
                theme:          theme
            }),
            Timeline.createBandInfo({
                width:          "10%", 
                intervalUnit:   Timeline.DateTime.MONTH, 
                intervalPixels: 150
            }),
            Timeline.createBandInfo({
                width:          "10%", 
                intervalUnit:   Timeline.DateTime.YEAR, 
                intervalPixels: 200
            })
        ];
        bandInfos[1].syncWith = 0;
        bandInfos[1].highlight = true;            
        bandInfos[2].syncWith = 1;
        bandInfos[2].highlight = true;            
 
        tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
        // !! HIER DATEN LADEN !!
        var mydata = "/timeline.json";
        //tl.loadJSON(mydata+"?ts="+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
        // !! HIER DATEN LADEN !!
    }
    // bei bedarf
    var resizeTimerID = null;
    function onResize() {
        if (resizeTimerID == null) {
            resizeTimerID = window.setTimeout(function() {
                resizeTimerID = null;
                tl.layout();
            }, 500);
        }
    }
</script>

<script type="text/javascript">
    //Hier tl eventuell durch eine Variable die einen Zeiger zu einer Timeline-Instanz hält ersetzen.
    var mydata = "/timeline.json";
    //tl.loadJSON(mydata+"?ts="+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });
</script>