Loading dynamically created JSON into TimelineJS

Question

I'm trying to load a dynamically created JSON object into TimelineJS and cannot find out what's wrong with the following code. Whenever I output the object to the console I get the right JSON file. Copying it from the console, and then loading it into TimelineJS works, but whenever I try to load it straight into TimelineJS it does not work. See JSFiddle here: http://jsfiddle.net/xited/Y5hBk/6/

HTML Code:

<div id="my-timeline"></div>
<button id='myBtn'>start</button>

JS Code:

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


function loadData(json){
        createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '600',
        source:     json,
        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);
        dates.push(projectDate);
    }

    var swEra = new eraObj('2000','2020','era headline','era text','era tag');
    eras.push(swEra);

    //build json obj
    var swTimeline = new timelineObj(
        'A New Timeline',
        'default',
        '<p>This is a paragraph.</p>',
        dates,
        eras);


    var jsonTimeline = new jsonObj(swTimeline);

    //stringifying the json object
    jsonTimeline = JSON.stringify(jsonTimeline);
    console.log(jsonTimeline);

    loadData(jsonTimeline);
}

Answer 1

It seems that TimelineJS does not like dynamically created JSON files. A temporary solution is to write the JSON file to the page using the following function:

function addCode(code){
    var JS= document.createElement('script');
    JS.text= code;
    document.body.appendChild(JS);
}

Then load it into TimelineJS and a new timeline will display correctly.

See following jsfiddle: http://jsfiddle.net/xited/Y5hBk/10/