title: How to load some information on click event in google timeline chart
body: <p>I am using <a href="https://developers.google.com/chart/interactive/docs/gallery/timeline" rel="nofollow noreferrer">Google Timeline chart</a> and want to load some details of City by clicking on the city name but not getting idea how to do that. </p>
  
  <p><a href="https://i.stack.imgur.com/BNzWe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BNzWe.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div id="cityData"&gt;
  
     &lt;!-- city information display hear after ajax success --&gt;
  
  &lt;/div&gt;
  
  &lt;div id="timeline" style="height: 180px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>google.charts.load('current', {'packages':['timeline']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
  
    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
  
    chart.draw(dataTable);
  }
  </code></pre>
  
  <p>Fiddle: <a href="https://jsfiddle.net/whaqcfnx/" rel="nofollow noreferrer">https://jsfiddle.net/whaqcfnx/</a></p>
  
  <p>Thanks</p>