if (!empty($_SERVER['HTTP_CLIENT_IP']))
$ip=$_SERVER['HTTP_CLIENT_IP'];
else if (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))
$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
else
$ip=$_SERVER['REMOTE_ADDR'];
?>
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)
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:
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.
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
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