I am trying to add a tooltip to a Time chart, however am experiencing very strange results:
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
Do some dynamic stuff here and loop through:
dataTable.addRow([$(this).attr('ows_Title'),start,end,"Status: " + $(this).attr("ows_Status")]);
chart.draw(dataTable);
The chart populates perfectly, except NO tooltip!
Anyone have any ideas? Attached is my result!
Here is an image:
If you check on documentation, html tooltip for Timeline is not supported:
However, you could make a workaround using onmouseover event listener and setting the tooltip according to the e.row
value. Here is a simple example:
function myHandler(e){
if(e.row != null){
$(".google-visualization-tooltip").html(dataTable.getValue(e.row,3)).css({width:"auto",height:"auto"});
}
}
google.visualization.events.addListener(chart, 'onmouseover', myHandler);
Full example : http://jsfiddle.net/s9g99pqk/1/
change this:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
it should be:
dataTable.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.