Introduction

Timeline is used to visualize events in the times which they occur. These events can be inserted with their own start date and end date. Same as any ZK component, you can easily customize and style the contents and the appearance of these events.

A timeline contains two axes – main axis and sub axis(sub axis can be hidden), you can scroll the timeline by dragging and using the mouse scroll-wheel.

These two axes are synchronized in scrolling. You can easily zoom-in in the main axis by dragging the bar in the sub axis, and zoom-in in the sub axis by clicking the zoom in/zoom out icon on the left side of the sub axis.

Timeline Demo (Solar system explorations)


Get Adobe Flash player

Initialize Timeline

ZK version: 6.0.2+
IE Version: 9+

Settings required:
1. Set the layout “time”

There are 6 parameters (3 pairs) to set the layout time:

parameters description
minTimeBound & maxTimeBound the minimum/maximun time bound of timeline.
viewportLeftTime & viewportRightTime the main axis time on the left/right side.
(optional)
subViewportLeftTime & subViewportRightTime
the sub axis time on the left/right side.

SolarSystemExplorationTimelineComposer.java

SimpleDateFormat _sdf = new SimpleDateFormat("dd/MM/yyyy");
timeline.setMinTimeBound(_sdf.parse("1/1/1950").getTime());
timeline.setMaxTimeBound(_sdf.parse("1/1/2025").getTime());
timeline.setViewportLeftTime(_sdf.parse("1/10/1995").getTime());
timeline.setViewportRightTime(_sdf.parse("1/7/1998").getTime());
//timeline.setSubViewportLeftTime(_sdf.parse("1/1/1995").getTime());
//timeline.setSubViewportRightTime(_sdf.parse("1/12/1999").getTime());

Notice that viewport time range should not be out of the range of the min/max time bound.

2. Prepare timeline data & model
Event data is saved in the timeline’s model, you can use the default timeline model (or implement one).

SolarSystemExplorationTimelineComposer.java

String[][] evtData = {
{"Soviet Union","Sputnik 1 ","4/10/1957","First Earth orbiter "},
...,
{"Soviet Union","Sputnik 2 ","3/11/1957","Earth orbiter, first animal..."}};

SimpleTimelineModel model = new SimpleTimelineModel();
model.add(new SolarSystemExplorationEvent(_sdf.parse(evtData[0][2]),...);
...
timeline.setModel(model);

3. Prepare timeline renderer
Timeline renderer render event data to the appearance of event in timeline (by method – getContent()).

public class SolarSystemExplorationTimelineRenderer 
  implements TimelineRenderer<SolarSystemExplorationEvent>{
  public long getStartDate(SolarSystemExplorationEvent e) {
    Long result = null;
    if (e.getStartDate() != null) {
      result = e.getStartDate().getTime();
    }
    return result;
  }

  public long getEndDate(SolarSystemExplorationEvent e) {
    Long result = null;
    if (e.getStartDate() != null) {
      result = e.getStartDate().getTime();
    }
    return result;
  }

  public String getContent(SolarSystemExplorationEvent e) {
    StringBuilder content = new StringBuilder();
    ...
    String topic = e.getTopic();
    if (topic.length() > 0) {
      content.append("<div>" + topic + "</div>");
    }
    return content.toString();
  }
}

SolarSystemExplorationTimelineComposer.java

TimelineRenderer<?> render = new SolarSystemExplorationTimelineRenderer();
timeline.setRenderer(render);

4. listen timeline events
There are 3 main timeline events provided:

  • onEventSelect – when user clicks on any event
  • onEventTooltip – when mouse hovers on top of any event
  • onViewportChange – when timeline axis scrolls, returns the information of the viewport time (left/right)

The sample code is now available for download here.

Live Demo

Get a hands on experience here!

Example Source

This component is currently in its Beta. If you are interested in using this component please contact us at [email protected].
References

wiki -Timeline_of_Solar_System_exploration

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

2 Responses to “Introducing new ZK Addon – ZK Timeline”

  1. jason says:

    Hi James, nice addon. Is there a way to add a ‘next’ and ‘previous’ button like this jquery plugin? http://demo.tutorialzine.com/2012/04/timeline-portfolio/

    THanks

  2. James Chu says:

    Hi Jason, Timeline support Selectable model mechanism, so you can add/move selections in model.
    That is to say, you can use any additional buttons to control it.
    Here is the example : https://github.com/DevChu/ZKTimeline-Demo/blob/master/src/main/java/org/zkoss/timeline/demo/SolarSystemExplorationTimelineComposer.java#L343 .
    I hope this could be helpful. (timeline version: 0.8.0.FL.20151015)

    James

Leave a Reply