console.log(google);
google.load("visualization", "1.1", {
packages: ["timeline"]
});
google.setOnLoadCallback(drawMap);
function drawMap() {
chart = new google.visualization.Timeline(document.getElementById('map_div'));
loadData();
}
function selected() {
val = chart.getSelection()[0];
console.log(dataTable.getValue(val.row, 5));
}
function loadData() {
dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'Tooltip', role: 'tooltip', 'p': {'html': true} });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'number', id: 'ID', role: 'hidden' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addRows([
[ 'Washington', 'prezi', '<div style="padding: 5px;"><p>sometool\'s tip</h1></div>', new Date(1789, 3, 30), new Date(1797, 2, 4), 1, 'color: green' ],
[ 'Adams', 'prezi', '<div style="padding: 5px;"><p>sometool\'s tip</h1></div>', new Date(1797, 2, 4), new Date(1801, 2, 4), 2, 'color: red' ],
[ 'Jefferson', 'prezi', '<div style="padding: 5px;"><p>sometool\'s tip</h1></div>', new Date(1801, 2, 4), new Date(1809, 2, 4), 3, 'color: blue' ]]);
var options = {
avoidOverlappingGridLines: false,
tooltip: { isHtml: true },
timeline: { barLabelStyle: {fontName: "arial", fontSize: "8" }}
};
google.visualization.events.addListener(chart, 'select', selected);
chart.draw(dataTable, options);
}