Timeline - TIMELINEJS

by janetyc

HTML

<script src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>
<div id="my-timeline"></div>
<button id='myBtn'>start</button>

JavaScript

$('#myBtn').click(function() {
     makeJson();
});


function loadData(json){
    addCode('jsFile='+json);
    createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '600',
        source:     jsFile,
        embed_id:   'my-timeline'
    });
}

function makeJson(){
    //create timeline json object
    var jsonObj = function(timeline){
        this.timeline=timeline;
    }

    var timelineObj = function (headline, type, text, date, era)
    {
        this.headline=headline;
        this.type=type;
        this.text=text;
        this.date=date;
        this.era=era;
    }

    var dates= new Array();

    var dateObj =  function(startDate, endDate, headline, text, tag)
            {
                this.startDate=startDate;
                this.endDate=endDate;
                this.headline=headline;
                this.text=text;
                this.tag=tag;
            }

    var eras = new Array();

    var eraObj= function(startDate, endDate, headline, text, tag)
    {
            this.startDate=startDate;
            this.endDate=endDate;
            this.headline=headline;
            this.text=text;
            this.tag=tag;
        }

    var data = [['Animal','Food','Qty','Begin Date','End Date'],
                ['deer','grass','430','1/1/2014','1/5/2014'],
                ['cat','fish','20','2/1/2014','7/5/2014'],
                ['eagle','mice','100','3/1/2014','9/1/2014']];

    //get position of an element from the data array
    var pos = function (el){
        var colHeaders = data[0]; // reading header row
        return colHeaders.indexOf(el) //return position of el
    }

    for (var i=1; i<data.length; i++){
        beginDate=data[i][pos('Begin Date')];
        endDate=data[i][pos('End Date')];
        headline=data[i][pos('Animal')];
        text=data[i][pos('Food')];
        tag=data[i][pos('Qty')];
        var projectDate = new dateObj(beginDate,endDate,headline,text,tag);
       ...