multi-timeline.js examples

Visualisation and management of multiple timelines with jQuery

Static timeline

$(function () {
    $('.static-timeline').multiTimeline({

        allDraggable: false,
        allResizeable: false,
        mousewheelPan: false,
        mousewheelZoom: false,

        markerDateFormat: false,  // Hide datemarkers

        start: '2015-02-18',
        end: '2015-03-01',

        data: [
            {
                'title': 'Simple timeline',
                'start': '2015-02-20',
                'end': '2015-02-26'
            },
            {
                'title': 'Another timeline',
                'start': '2015-02-22',
                'end': '2015-02-24'
            }
        ]
    });
})

Editable timeline Use mousewheel to pan (press Ctrl to zoom), drag or resize timelines

$(function () {
    $('.editable-timeline').multiTimeline({
        start: '2015-02-01',
        end: '2015-02-28',
        data: [
            {
                'title': 'I have been here forever',
                'end': '2015-02-13'
            },
            {
                'title': 'I\'ll be here forever',
                'start': '2015-02-14'
            },
            {
                'title': 'I share a layer',
                'start': '2015-02-15',
                'end': '2015-02-18',
                'layer': 0
            },
            {
                'title': 'I am red and overlapping',
                'start': '2015-02-17',
                'end': '2015-02-22',
                'color': '#f00',
                'layer': 1,
                'zIndex': 20
            },
            {
                'title': 'I am pretty simple',
                'start': '2015-02-10',
                'end': '2015-02-12'
            },
        ]
    });
})

Timeline with week numbers

$(function () {
    $('.weeknumbers-timeline').multiTimeline({
        // display weeknumbers
        xAxisUnit: 'weeks',
        xAxisDateFormat: 'ww',

        start: '2015-07-01',
        end:   '2015-07-31',

        data:  weeknumbersTimlineData
    });
})

Timeline with phases (Experimental)

$(function () {
    $('.phase-timeline').multiTimeline({
        start: '2015-06-26',
        end:   '2015-07-31',
        data: [{
                'phases': [
                    {
                        'title': 'Phase one',
                        'start': '2015-07-01',
                        'end': '2015-07-05',
                        'color': ['#FFA000', '#AAA', '#E87B0C']
                    },
                    {
                        'title': 'Phase two',
                        'start': '2015-07-08',
                        'end': '2015-07-14',
                        'color': '#E8AC0C'
                    },
                    {
                        'title': 'Phase three',
                        'start': '2015-07-20',
                        'end': '2015-07-24',
                    },
                    {
                        'title': 'End',
                        'start': '2015-07-24',
                        'end': '2015-07-24',
                    }
                ]
            }, {
                'phases': [
                    {
                        'title': 'Phase one',
                        'start': '2015-07-04',
                        'end': '2015-07-08',
                    },
                    {
                        'title': 'Phase two',
                        'start': '2015-07-10',
                        'end': '2015-07-12',
                    },
                    {
                        'title': 'Phase three',
                        'start': '2015-07-12',
                        'end': '2015-07-12',
                    },
                    {
                        'title': 'End',
                        'start': '2015-07-22',
                        'end': '2015-07-22',
                    }
                ]
            },
        ]
    });
})

Timeline with controls (no mousewheel)

<button type="button" class="js-go-left">Go left</button>
<button type="button" class="js-go-right">Go right</button>

<button type="button" class="js-zoom-out">Zoom out</button>
<button type="button" class="js-zoom-in">Zoom in</button>

<input type="range" id="range" min="0" max="40" value="5" class="js-set-zoom"/>

<script>
    $(function () {
        var timeline = $('.controls-timeline').multiTimeline({
            mousewheelZoom: false,

            start: '2015-02-01',
            end: '2015-02-28',
            zoom: 4,
            zoomOutControl: $('.js-zoom-out'),
            zoomInControl: $('.js-zoom-in'),
            goRightControl: $('.js-go-right'),
            goLeftControl: $('.js-go-left'),
            onZoomChange: function (newZoom) {
                $('.js-set-zoom').val(newZoom);
            },
            onTimelineClick: function (event, data) {
                alert('You clicked on a timeline: ' + data.title);
            },
            data: advancedTimelineData
        });
        $('.js-set-zoom').on('change', function () {
            timeline.data('multiTimeline').setZoom(this.value);
        });
    })
</script>