Cross Browser Almende Timeline

292 Views Asked by At

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.

website link

Any hints of how I can debug this.

Heres a screenshot:

cross browser 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

1

There are 1 best solutions below

0
On BEST ANSWER

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!