Timeline display tool Timeline

Timeline display tool Timeline [1] can display a Timeline on the web page. In time-related data presentation, it has a better effect. The specific usage is as follows. 1. Write html pages, introduce JS scripts, introduce JSON data, and set the calendar location to be displayed & lt; scriptsr... SyntaxHighlighter. al

Timeline display tool Timeline [1] can display a Timeline on the web page. In time-related data presentation, it has a better effect. The specific usage is as follows.

1. Write html pages, introduce JS scripts, introduce JSON data, and set the calendar location to be displayed.
Script

Script

2. Compile the Loading Function and call it on the webpage.
Script

Var tl;

Function onLoad (){

Var tl_el = document. getElementById ("tl ");

Var eventSource1 = newTimeline. DefaultEventSource ();

Var theme1 = Timeline. ClassicTheme. create ();

Theme1.autoWidth = true; // Set theTimeline's "width" automatically.

// SetautoWidth on the Timeline's first band's theme,

// Willaffect all bands.

Theme1.timeline _ start = newDate (Date. UTC (1980, 0, 1 ));

Theme1.timeline _ stop = new Date (Date. UTC (2150, 0, 1 ));

Var d = Timeline. DateTime. parseGregorianDateTime ("1980 ")

Var bandInfos = [

Timeline. createBandInfo ({

Width: 45, // set to a minimum, autoWidthwill then adjust

IntervalUnit: Timeline. DateTime. DECADE,

IntervalPixels: 200,

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 forimage, icon and background image

// References in thedata

EventSource1.loadJSON (timeline_data, url); // The data was stored beyond

// Timeline_data variable.

Tl. layout (); // display theTimeline

}

Var resizeTimerID = null;

Function onResize (){

If (resizeTimerID = null ){

ResizeTimerID = window. setTimeout (function (){

ResizeTimerID = null;

Tl. layout ();

},500 );

}

}

Script

Call this function:

3. Compile a JSON file containing the event
Vartimeline_data = {// save as a globalvariable

'Datetimeformat': 'iso8601 ',

'Wikiurl': "http://simile.mit.edu/shelf ",

'Wikisection ': "Simile Cubism Timeline ",

 

'Events ':[

{'Start': '123 ',

'Title': 'birthday of gongqingkui ',

'Description': 'This is description ',

'Image': 'http: // portrait7.sinaimg.cn/1150968582/blog/180 ',

'Link': 'http: // blog.sina.com.cn/gongqingkui ',

'Icon ': "dark-red-circle.png ",

'Color': 'red ',

'Textcolor': 'green'

},

{'Start': '123 ',

'End': '123 ',

'Isduration': true,

'Title': 'aaa ',

// 'Tapimage': 'blue_stripes.png ',

'Taperepeid': 'Repeat-x ',

'Caption ': "This is the event 'scaption attribute .",

'Classname': 'hot _ event'

},

]

}

The JSON data currently includes a point event and a period of time.

4. Loading Effect