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);
}

jsonTimeline = getJSON(jsonTimeline); or source:getJSON(json), try this line — Sweetz, Jul 07 '14 at 03:48
I did $.getJSON(jsonTimeline) and $.getJSON(jsonFile) and got: net::ERR_FILE_NOT_FOUND and Uncaught TypeError: Cannot read property 'type' of undefined — xited, Jul 07 '14 at 03:58

score 0 · Answer 1 · answered Jul 07 '14 at 04:01

0

function loadData(jsonTimeline){} use onstead of using function loadData(json){}.

Live Demo

answered Jul 07 '14 at 04:01

hari

1,874
1
16
10

I agree - loading an already existing json into the timeline works. That's what I mentioned in my post and that's what you're showing me. What I am trying to do is to load a dynamically created json into the timeline. That's what I need help with. – xited Jul 07 '14 at 04:08

xited · Accepted Answer · 2014-07-11T14:15:14.187

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/

Loading dynamically created JSON into TimelineJS

2 Answers2