I am using the almende timeline.js to create a timeline for my web app.
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