JARCH SHOWCASE
JARCH SHOWCASE
Timeline - Two Linked Timelines When moving one timeline, the other moves along. Use mouse scroll wheel for zoom-in and zoom-out. A click on an event in the first timeline selects an event in the second timeline (Project A or Project B).

Events

Projects

<a:form id="form">
    <a:growl id="growl" showSummary="true" showDetail="false" autoUpdate="true"/>

    <h3 style="margin-top: 0">Events</h3>
    <a:timeline id="timelineFirst" value="#{linkedTimelinesView.modelFirst}" var="task"
                height="250px" widgetVar="timelineFirstWdgt">  
        <a:ajax event="rangechange" oncomplete="onrangechange1()"/>
        <a:ajax event="select" listener="#{linkedTimelinesView.onSelect}"/>

        <h:panelGroup layout="block" rendered="#{not task.period}" style="padding-bottom:5px">  
            <h:outputText value="#{task.title}"/>  
        </h:panelGroup>  
        <a:graphicImage library="demo" name="#{task.imagePath}"/>
        <h:panelGroup rendered="#{task.period}" style="padding:8px">  
            <h:outputText value="#{task.title}"/>  
        </h:panelGroup>  
    </a:timeline>

    <h3>Projects</h3>
    <a:timeline id="timelineSecond" value="#{linkedTimelinesView.modelSecond}"
                height="150px" widgetVar="timelineSecondWdgt">  
        <a:ajax event="rangechange" oncomplete="onrangechange2()"/>
    </a:timeline>
</a:form>



<script type="text/javascript">
    function onrangechange1() {
        var range = PF('timelineFirstWdgt').getVisibleRange();
        PF('timelineSecondWdgt').setVisibleRange(range.start, range.end);
    }

    function onrangechange2() {
        var range = PF('timelineSecondWdgt').getVisibleRange();
        PF('timelineFirstWdgt').setVisibleRange(range.start, range.end);
    }
</script>
                
JARCH, Copyright © 2022 All rights reserved. Running JARCH 24.3.0-SNAPSHOT on PrimeFaces-12.0.0 on Mojarra-2.3.13.