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.

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.

• javascript
• charts
• google-visualization

1 Answer 1

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./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./charts/loader.js"></script>
<div id="example5.1"></div>