Timeline

From Documentation
Revision as of 09:06, 17 November 2010 by Jumperchen (talk | contribs)

Timeline

  • Demonstration: SIMILE Timeline
  • Java API: N/A
  • JavaScript API: N/A
  • Style Guide: N/A

Employment/Purpose

Timelineis a DHTML-based Ajax widget for visualizing time-based events developed by SIMILE project of MIT. It is like Google Maps for time-based information.

A timeline contains one or more Bands, which can be panned infinitely by dragging with the mouse pointer, using the mouse scroll-wheel or the keyboard's arrow buttons.

A band can be configured to synchronize with another band such that panning one band also scrolls the other.

Example

ZKCompRef Timeline.png

<timeline height="300px" width="100%">
	<bandinfo width="70%" id="b1" intervalUnit="month"
		intervalPixels="100" eventSourceUrl="misc/timeline_ex1.xml">
	</bandinfo>
	<bandinfo width="30%" intervalUnit="year" intervalPixels="200"
		syncWith="b1" eventSourceUrl="misc/timeline_ex1.xml">
	</bandinfo>
</timeline>


timeline_ex1.xml

<data>
    <event start="Oct 1 2010 00:00:00 GMT" end="Oct 1 2010 00:00:00 GMT"
        title="Friend's wedding">
        I'm not sure precisely when my friend's wedding is.
        </event>
    <event start="Oct 15 2010 11:00:00 GMT" end="Nov 1 2010 09:00:00 GMT"
        isDuration="true" title="Writing Style Guide" image="http://simile.mit.edu/images/csail-logo.gif">
        A few days to write some documentation for
        <a href="http://www.zkoss.org/doc/styleguide">Timeline</a>
        .
    </event>
    <event start="Oct 23 2010 06:12:33 GMT" title="Trip to New York"
        link="http://www.priceline.com/">
        Happy New Year !
    </event>
</data>

Supported Events

Name
Event Type
None None

Supported Children

* Bandinfo


Use Cases

Version Description Example Location
3.6 Smalltalk: Using Timeline Component, Part I http://docs.zkoss.org/wiki/Using_Timeline_Component%2C_Part_I
3.6 Smalltalk: Using Timeline Component, Part II http://docs.zkoss.org/wiki/Using_Timeline_Component%2C_Part_II
3.6 How to use ListModel in Timeline component http://docs.zkoss.org/wiki/How_to_use_ListModel_in_Timeline_component
3.6 Using the New Feature Of The Timeline Component http://docs.zkoss.org/wiki/Using_the_New_Feature_Of_The_Timeline_Component
3.6 Integrating Google Calendar with ZK Timeline Component http://docs.zkoss.org/wiki/Integrating_Google_Calendar_with_ZK_Timeline_Component

Version History

Last Update : 2010/11/17


Version Date Content
     



Last Update : 2010/11/17

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.