[visualization-api] Customizing Tooltips in Timelines

[Casey De Frain]

Is there any way to include an image into the custom tooltips for 
timelines? I am very much a beginner when it comes to coding, so any help 
is appreciated. Below is the code for the timeline I'm working on. I would 
love it if a picture of each of the people named would hover when the mouse 
goes over the bars, along with the default info (name, start date, end 
date). Again, I am very new to this, so if you can help, please be as 
specific as possible. Thanks so much!!

*HTML*

<script type="text/javascript" 
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<div id="timeline" style="height: 920px;"></div>
    
*JavaScript*

  google.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: 'Pastor'});
          dataTable.addColumn({type: 'date', id: 'Start'});
          dataTable.addColumn({type: 'date', id: 'End'});
          
          
          dataTable.addRows([
              ['Christian Sans', new Date(1854, 9, 22), new Date(1860, 3, 
22)],
              ['Johannes Bading', new Date(1860, 7, 4), new Date(1868, 0, 
4)],
              ['Adolph Hoenecke', new Date(1869, 1, 4), new Date(1869, 5, 
4)],
              ['Reinholt Adelberg', new Date(1869, 5, 4), new Date(1873, 2, 
4)],
              ['H.B. Heinrichs', new Date(1873, 3, 4), new Date(1874, 10, 
4)],
              ['Johannes Brockmann', new Date(1875, 11, 4), new Date(1904, 
0, 4)],
              ['Julius Klingmann', new Date(1904, 3, 4), new Date(1944, 4, 
4)],
              ['William Eggert', new Date(1928, 10, 4), new Date(1953, 2, 
4)],
              ['Gerhard Redlin', new Date(1948, 10, 4), new Date(1957, 11, 
4)],
              ['William Kehrberg', new Date(1953, 9, 4), new Date(1955, 11, 
4)],
              ['James Fricke', new Date(1956, 9, 4), new Date(1962, 10, 4)],
              ['Harold Wicke', new Date(1958, 3, 4), new Date(1969, 5, 4)],
              ['Henry Paustian', new Date(1963, 2, 4), new Date(1985, 7, 
4)],
              ['Myron Kell', new Date(1969, 9, 4), new Date(1998, 0, 4)],
              ['James Werner', new Date(1981, 11, 4), new Date(2015, 5, 4)],
              ['Donald Sutton', new Date(1985, 11, 4), new Date(1998, 10, 
4)],
              ['Cyril Spaude', new Date(1995, 2, 4), new Date(1998, 2, 4)],
              ['Karl Walther', new Date(1995, 5, 4), new Date(2015, 11, 4)],
              ['Michael Jensen', new Date(1998, 1, 4), new Date(2015, 11, 
4)],
              ['William Heiges', new Date(2001, 8, 4), new Date(2005, 6, 
4)],
              ['James Backus', new Date(2015, 6, 4), new Date(2015, 11, 4)]
          ]);

          chart.draw(dataTable);
      }

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.