var tl;
        function onLoad() {
            var tl_el = document.getElementById("my-timeline");
            var eventSource1 = new Timeline.DefaultEventSource();
            
            var theme1 = Timeline.ClassicTheme.create();
            theme1.autoWidth = true; // Set the Timeline's "width" automatically.
                                     // Set autoWidth on the Timeline's first band's theme,
                                     // will affect all bands.
            theme1.timeline_start = new Date(Date.UTC(1998, 0, 1));
            theme1.timeline_stop  = new Date(Date.UTC(2020, 0, 1));
            
            var d = Timeline.DateTime.parseGregorianDateTime("1998")
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          300, // set to a minimum, autoWidth will then adjust
                    intervalUnit:   Timeline.DateTime.YEAR, 
                    intervalPixels: 200,
                    eventSource:    eventSource1,
                    date:           d
                   
                })
            ];
                                                            
            // create the Timeline
            tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);
            
            var url = '.'; // The base url for image, icon and background image
                           // references in the data
            eventSource1.loadJSON(timeline_data, url); // The data was stored into the 
                                                       // timeline_data variable.
            tl.layout(); // display the Timeline
        }
        
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }