MediaWiki:Timeline

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

GGpb08.html



 







var tl; function centerTimeline(year) { tl.getBand(0).setCenterVisibleDate(new Date(year, 0, 1)); };

function onLoad { var tl_el = document.getElementById("tl"); 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(2002, 0, 1)); theme1.timeline_stop = new Date(Date.UTC(2013, 0, 1)); var d = Timeline.DateTime.parseGregorianDateTime("2008") var bandInfos = [ Timeline.createBandInfo({                   width:          500, // set to a minimum, autoWidth will then adjust										height:          500, // set to a minimum, autoWidth will then adjust                    intervalUnit:   Timeline.DateTime.MONTH,                     intervalPixels: 100,                    eventSource:    eventSource1,                    date:           d,                    theme:          theme1,                    layout:         'original'  // original, overview, detailed                }) ];           // 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); }       }



Local Timeline Example This example reads a local data file from the disk and displays it using the Simile Timeline library. The software library is retrieved from servers via the Internet. The Timeline will grow automatically to fit the events. Scroll towards 2030 to see it grow. Click on an event to see its details.

To move the Timeline: use the mouse scroll wheel, the arrow keys or grab and drag the Timeline.

Thanks to the Simile Timeline project Timeline version  Timeline.writeVersion('tl_ver')