I have a version of the chap-links-library almende timeline working in Google Chrome, but when viewed in Firefox. I get is an undefined NaN across the bottom axis. Asif it is not reading in the dates that I set in javascript.
Any hints of how I can debug this.
Heres a screenshot:
And a snippet of my main .js file:
var timeline;
var data;
google.load("visualization", "1");
google.setOnLoadCallback(drawVisualization);
var container = $('#mytimeline');
/* GENERAL FUNCTIONS START */
function dateTimeSplit(date){ //Get individual elements of date from string "11 March, 2013"
var jDate = new Date(date);
var newdate = {
month: jDate.getMonth(),
day: jDate.getDate(),
year: jDate.getFullYear()
}
return newdate;
}
function drawVisualization(){
var debug = 0;
data = new google.visualization.DataTable();
data.addColumn('datetime', 'start');
data.addColumn('datetime', 'end');
data.addColumn('string', 'content');
data.addColumn('string', 'id');
var options = {
"width": "100%",
"height": "auto",
"min-height": "400px",
"editable": false,
"style": "box",
"zoomMin": 1000 * 60 * 60 * 24,
"zoomMax": 1000 * 60 * 60 * 24 * 31 * 12
};
timeline = new links.Timeline(document.getElementById('mytimeline'));
if(subgoals.length != 0){
$.each(subgoals, function(index, value, tess) {
//console.log('ID: ' + value.id + ' Start: ' + value.start + ' End: ' + value.end + ' Name: ' + value.name);
start = dateTimeSplit(value.start);
end = dateTimeSplit(value.end);
data.addRows([[new Date(start.year,start.month,start.day), new Date(end.year,end.month,end.day), value.name + owner, value.id]]);
});
}
//DRAW TIMELINE
timeline.draw(data, options);
}
/* GENERAL FUNCTIONS END */
container.show();
Thanks
With hours of debugging, it was all down to the format of which the datetime was passed through to the timeline.
I used this source to change the format
Now my timeline works across Firefox, IE, Chrome and Safari.
Hope this helps someone in the future!