title: Adding images to google visualization chart
body: <p>How can i add images in google visualization chart.</p>
  
  <p>Below is the script which i am trying</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>google.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
  
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington',  new Date(0,0,0,12,0,0),  new Date(0,0,0,12,3,0) ],
      [ 'President', '&lt;img class="devsite-avatar" src="http://i.stack.imgur.com/FVDLV.jpg?s=32&amp;g=1"&gt;John Adams', new Date(0,0,0,12,3,3),  new Date(0,0,0,12,14,0) ],
      [ 'President', 'Thomas Jefferson', new Date(0,0,0,12,15,1),  new Date(0,0,0,12,28,0) ],
      [ 'President', '', new Date(0,0,0,13,0, 0),  new Date(0,0,0,13,0,0) ]
   
   ]);
  
    var options = {
      timeline: { groupByRowLabel: true },
   allowHTML: true,
   avoidOverlappingGridLines: false
    };
  
    chart.draw(dataTable, options);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
         'version':'1','packages':['timeline']}]}"&gt;&lt;/script&gt;
  
  &lt;div id="example4.2" style="height: 200px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me to understand what I am missing here.</p>