I am using Google Timeline chart and want to hire a click function. Simply when I clicked on the colored rectangles or text I want a bootstrap Modal show up.
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Beginning JavaScript', new Date(2017, 1, 30),
new Date(2017, 2, 30) ],
[ 'Learning for Life', 'Intermediate JavaScript', new Date(2017, 3, 1),
new Date(2017, 4, 30) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(2017, 5, 01),
new Date(2017, 6, 30) ],
[ 'Willow Room', 'Beginning Google Charts', new Date(2017, 1, 30),
new Date(2017, 3, 30) ],
[ 'Willow Room', 'Intermediate Google Charts', new Date(2017, 4, 30),
new Date(2017, 5, 30) ],
[ 'Willow Room', 'Advanced Google Charts', new Date(2017, 6, 30),
new Date(2018, 1, 30) ]]);
var options = {
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
Please take a look at this Fiddle
please help.
the TimeLine chart doesn't have a 'click'
event
but it does have 'select'
you can use the properties from the selection,
to pull information from the data table
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 1));
}
});
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['timeline']
});
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'Room'});
dataTable.addColumn({type: 'string', id: 'Name'});
dataTable.addColumn({type: 'date', id: 'Start'});
dataTable.addColumn({type: 'date', id: 'End'});
dataTable.addRows([
['Magnolia Room', 'Beginning JavaScript', new Date(2017, 1, 30), new Date(2017, 2, 30)],
['Learning for Life', 'Intermediate JavaScript', new Date(2017, 3, 1), new Date(2017, 4, 30)],
['Magnolia Room', 'Advanced JavaScript', new Date(2017, 5, 01), new Date(2017, 6, 30)],
['Willow Room', 'Beginning Google Charts', new Date(2017, 1, 30), new Date(2017, 3, 30)],
['Willow Room', 'Intermediate Google Charts', new Date(2017, 4, 30), new Date(2017, 5, 30)],
['Willow Room', 'Advanced Google Charts', new Date(2017, 6, 30), new Date(2018, 1, 30)]
]);
var options = {
timeline: {
colorByRowLabel: true
}
};
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 1));
}
});
chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.1"></div>
EDIT
to assign a click event on the timeline chart,
it only appears to work if the event is assigned to the chart,
not the chart's container.
they must be canceling event propagation, or something.
see following working snippet,
you can choose to assign the click event only to specific elements, such as <text>
elements,
or to the chart's entire <svg>
element
note: you must wait for the chart's 'ready'
event before assigning the click event.
google.charts.load('current', {
callback: drawChart,
packages:['timeline']
});
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'Room'});
dataTable.addColumn({type: 'string', id: 'Name'});
dataTable.addColumn({type: 'date', id: 'Start'});
dataTable.addColumn({type: 'date', id: 'End'});
dataTable.addRows([
['Magnolia Room', 'Beginning JavaScript', new Date(2017, 1, 30), new Date(2017, 2, 30)],
['Learning for Life', 'Intermediate JavaScript', new Date(2017, 3, 1), new Date(2017, 4, 30)],
['Magnolia Room', 'Advanced JavaScript', new Date(2017, 5, 01), new Date(2017, 6, 30)],
['Willow Room', 'Beginning Google Charts', new Date(2017, 1, 30), new Date(2017, 3, 30)],
['Willow Room', 'Intermediate Google Charts', new Date(2017, 4, 30), new Date(2017, 5, 30)],
['Willow Room', 'Advanced Google Charts', new Date(2017, 6, 30), new Date(2018, 1, 30)]
]);
var options = {
timeline: {
colorByRowLabel: true
}
};
// READY event
google.visualization.events.addListener(chart, 'ready', function () {
/*
// assign event directly to <text> elements
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
label.addEventListener('click', clickHandler);
});
or...
*/
// assign event to chart <svg> element
Array.prototype.forEach.call(container.getElementsByTagName('svg'), function (svg) {
svg.addEventListener('click', clickHandler);
});
});
// SELECT event
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 1));
}
});
function clickHandler(e) {
console.log(e.target.tagName, e.target.textContent);
}
chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.1"></div>