Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

timeline (gallery-timeline) on cdn

Last Updated: 05/3/13

+ 0 -

Satyam

YUI Contributor

See 12 more by this user.

Created: 01/23/12
Last CDN Push: 03/23/12
Build Tag: gallery-2012.03.23-18-00
Project: YUI 3
License: YUI BSD
YUI Version: 3.10.0
Free for use.

This component reads a historical timeline produced by the program at The Timeline Project.

It only needs a container to display it on and the URL of the data file.

You can move to a different time dragging the graph or using the mouse wheel. You can zoom in and out by those same actions with the control-key pressed (as with the original program).

Time bars above the horizontal divider represent ranges of dates. Those below just spot events, they are sized to fit the text and have an arrow pointing to the exact date/time. If the time scale grows large, range events may move beneath the line as if they were spot events since they start and end dates become indistinguishable.

A blur in the upper-right corner indicates that the event has extra information. You can click on the bar to have a description and perhaps an image show up.

Fuzzy event have their edges curved.

Tags:
satyam

The component just needs a container and the URL of the timeline data file. You can provide those in any of several means as shown below. The component will render as soon as it gets both (actually, it will render once the data, which may load asynchronously, gets loaded).

The canvas must be given a width and height, the component will scale the timeline to fit. The component has no default size for the canvas so if no width and height is given, nothing will show.

The data file is produced by the program by The Timeline Project at SourceForge. The program creates those files with a .timeline extension. If the file is read directly, that extension needs to be changed to .xml so that the browser reads it as such. If the file is served by a server-side script, it can be called anything but the server-side script should send the correct Content-type header.

Code Sample

<script src="http://yui.yahooapis.com/3.10.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.03.23-18-00'
}).use('gallery-timeline', function(Y) {
 
// Any of these would work			
	var timeline = new Y.Timeline({
		container:'#canvas1',
		url:'myOwnTimeline.xml'
	});
// or:				
	var timeline1 = new Y.Timeline();
	timeline1.render('#canvas2');
	timeline1.load('myOwnTimeline.xml');
//or:
	new Y.Timeline().load('myOwnTimeline.xml').render('#canvas3');
//or:
	new Y.Timeline().render('#canvas4').load('myOwnTimeline.xml');
//or:
	new Y.Timeline({container:'#canvas5'}).load('myOwnTimeline.xml');
 
// You can change the data set at any time.
// You can also change the container: beware, the image of the timeline 
// will remain in the previous container, but completely inactive
	window.setTimeout(function () {
		timeline.load('myOwnTimeline1.xml');
		timeline1.set('container', '#anotherCanvas');
	},3000);
 
});