How can I extend the timline.js library to facilitate a custom double click function

155 views Asked by At

I am using the almende timeline.js to create a timeline for my web app.

Here is the timeline library

I want to extend the timeline.js libraries functionality by being able to send a user to a different URL when a range is double clicked bearing in mind the timeline is set to un-editable.

Here is my js:

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": "300px",
        "editable": false,
        "style": "box",
        //"min":  min_boundary,              
        "zoomMin": 1000 * 60 * 60 * 24,        
        "zoomMax": 1000 * 60 * 60 * 24 * 31 * 3
    };

    timeline = new links.Timeline(document.getElementById('mytimeline'));

    if(sugboals.length != 0){
        $.each(sugboals, 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, value.id]]);
        });
    }

    /*On Custom Double Click - Send the user to different page*/
    function getSelectedRow() {
        var row = undefined;
        var sel = timeline.getSelection();
        if (sel.length) {
            if (sel[0].row != undefined) {
                row = sel[0].row;
            }
        }
        return row;
    }

    var onDblClickNotEditable = function (event) {
        var row = getSelectedRow();
        var name = data.getValue(row, 2);
        var id = data.getValue(row, 3);
        console.log('Name: ' + name, 'Id: ' + id);
        window.open('http://www.newpage.com/view/'+ id +'/');
        timeline.draw(data);
    };
    /*Double Click End*/

    // Add event listeners
    google.visualization.events.addListener(timeline, 'link', onDblClickNotEditable);

    timeline.draw(data, options);
}

Can you recommend any way of doing this?

Thanks

0

There are 0 answers