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