oval-timeline

Introduction

This package creates a javascript timeline, all you have to do is create a container and input some data!

Dependancies

JQuery

Code Example

var timeline = $('#timeline-container').timeline({
    startDate: "1992-01-01",
    endDate: "2016-05-01",
    data: [
        {
            date: "1999-02-05",
            title: "Test Example",
            description: "Lorem ipsum dolor sit amet",
            metaData: {}
        }
    ]
});

Installation

1. Run npm install oval-timeline

2. Include JQuery, node_modules/oval-timeline/timeline.js node_modules/oval-timeline/style.css

3. Add a container for the timeline ie.

4. Initialize the plugin ie. $('#timeline-container').timeline();

API Reference

$('#timeline-container').timeline( options );

Options

• startDate {String}: Where the timeline should start ( format: "YYYY-MM-DD" )
• endDate {String}: Where the timeline should end ( format: "YYYY-MM-DD" )
• data {object}: See setting data section
• tooltipTemplate {callback}: A callback that has the param of an item, must return a string of html

Methods

• setData( data ) : Pass the method new data, and the timeline will rebuild
• refresh() : Refresh the timeline, may need to do this if you change any of the options

Setting Data

• Create objects in this format

{
    date: "1999-02-05",
    title: "Test Example",
    description: "Lorem ipsum dolor sit amet",
    metaData: {}
}