Timeline is an interactive visualization chart to visualize events in time.
<h:form id="form">
<p:growl id="growl" showSummary="true" showDetail="true">
<p:autoUpdate />
</p:growl>
<div class="card">
<p:timeline id="timeline" value="#{basicTimelineView.model}"
height="250px" selectable="#{basicTimelineView.selectable}"
zoomable="#{basicTimelineView.zoomable}"
moveable="#{basicTimelineView.moveable}"
stackEvents="#{basicTimelineView.stackEvents}"
eventStyle="#{basicTimelineView.eventStyle}"
showCurrentTime="#{basicTimelineView.showCurrentTime}">
<p:ajax event="select" listener="#{basicTimelineView.onSelect}" />
</p:timeline>
</div>
</h:form>
package org.primefaces.showcase.view.data.timeline;
import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import java.io.Serializable;
import java.time.LocalDate;
import io.quarkus.runtime.annotations.RegisterForReflection;
import org.primefaces.event.timeline.TimelineSelectEvent;
import org.primefaces.model.timeline.TimelineEvent;
import org.primefaces.model.timeline.TimelineModel;
@Named("basicTimelineView")
@ViewScoped
@RegisterForReflection(serialization = true)
public class BasicTimelineView implements Serializable {
private TimelineModel<String, ?> model;
private boolean selectable = true;
private boolean zoomable = true;
private boolean moveable = true;
private boolean stackEvents = true;
private String eventStyle = "box";
private boolean showCurrentTime = true;
private boolean showNavigation = false;
@PostConstruct
protected void initialize() {
model = new TimelineModel<>();
model.add(TimelineEvent.<String>builder().data("PrimeUI 1.1").startDate(LocalDate.of(2014, 6, 12)).build());
model.add(TimelineEvent.<String>builder().data("PrimeFaces 5.1.3").startDate(LocalDate.of(2014, 10, 11)).build());
model.add(TimelineEvent.<String>builder().data("PrimeUI 2.2").startDate(LocalDate.of(2015, 12, 8)).build());
model.add(TimelineEvent.<String>builder().data("Sentinel-Layout 1.1").startDate(LocalDate.of(2015, 3, 10)).build());
model.add(TimelineEvent.<String>builder().data("Spark-Layout 1.0").startDate(LocalDate.of(2015, 4, 3)).build());
model.add(TimelineEvent.<String>builder().data("Ronin-Layout 1.0").startDate(LocalDate.of(2015, 5, 15)).build());
model.add(TimelineEvent.<String>builder().data("Modena-Layout 1.0").startDate(LocalDate.of(2015, 7, 10)).build());
model.add(TimelineEvent.<String>builder().data("Rio-Layout 1.0").startDate(LocalDate.of(2015, 6, 15)).build());
model.add(TimelineEvent.<String>builder().data("Adamantium-Layout 1.0").startDate(LocalDate.of(2015, 9, 4)).build());
model.add(TimelineEvent.<String>builder().data("Titan-Layout 1.0").startDate(LocalDate.of(2015, 12, 14)).build());
model.add(TimelineEvent.<String>builder().data("Volt-Layout 1.0").startDate(LocalDate.of(2015, 10, 12)).build());
model.add(TimelineEvent.<String>builder().data("Atlas-Layout 1.0").startDate(LocalDate.of(2016, 1, 28)).build());
model.add(TimelineEvent.<String>builder().data("PrimeUI 4.1.0").startDate(LocalDate.of(2016, 2, 24)).build());
model.add(TimelineEvent.<String>builder().data("PrimeFaces 5.3.8").startDate(LocalDate.of(2016, 2, 29)).build());
model.add(TimelineEvent.<String>builder().data("PrimeNG 0.5").startDate(LocalDate.of(2016, 2, 29)).build());
}
public void onSelect(TimelineSelectEvent<String> e) {
TimelineEvent<String> timelineEvent = e.getTimelineEvent();
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Selected event:", timelineEvent.getData());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public TimelineModel<String, ?> getModel() {
return model;
}
public boolean isSelectable() {
return selectable;
}
public void setSelectable(boolean selectable) {
this.selectable = selectable;
}
public boolean isZoomable() {
return zoomable;
}
public void setZoomable(boolean zoomable) {
this.zoomable = zoomable;
}
public boolean isMoveable() {
return moveable;
}
public void setMoveable(boolean moveable) {
this.moveable = moveable;
}
public boolean isStackEvents() {
return stackEvents;
}
public void setStackEvents(boolean stackEvents) {
this.stackEvents = stackEvents;
}
public String getEventStyle() {
return eventStyle;
}
public void setEventStyle(String eventStyle) {
this.eventStyle = eventStyle;
}
public boolean isShowCurrentTime() {
return showCurrentTime;
}
public void setShowCurrentTime(boolean showCurrentTime) {
this.showCurrentTime = showCurrentTime;
}
public boolean isShowNavigation() {
return showNavigation;
}
public void setShowNavigation(boolean showNavigation) {
this.showNavigation = showNavigation;
}
}