Adding images to google visualization chart

Question

How can i add images in google visualization chart.

Below is the script which i am trying

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', '<img class="devsite-avatar" src="http://i.stack.imgur.com/FVDLV.jpg?s=32&g=1">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);
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>

<div id="example4.2" style="height: 200px;"></div>

Please help me to understand what I am missing here.

Answer 1

It seems that allowHTML option is not supported for google.visualization.Timeline object, but you could consider to customize SVG (insert image into bar in this example) once the chart is rendered as demonstrated below:

google.load('visualization', '1.0', {
    'packages': ['timeline','annotatedtimeline']
});
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(1789, 3, 30), new Date(1797, 2, 4)],
      ['President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]]);

    var options = {
        timeline: { groupByRowLabel: false}
    };

    chart.draw(dataTable, options);
    configureChart();
}


function configureChart() {
    var chartContainer = document.getElementById('example4.2');
    var svg = chartContainer.getElementsByTagName('svg')[0];

    var barLabels = svg.querySelectorAll("text[text-anchor='start']");
    for (var i = 0; i < barLabels.length; i++) {
        if (barLabels[i].innerHTML == "George Washington") {
            var barArea = barLabels[i].previousSibling;
            var x = barArea.getAttribute('x');
            var y = barArea.getAttribute('y');
            var presidentIcon = createImage({ href: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Lawrence_Washington.jpg', x: x, y: y, width: 20, height: 20 });
            barArea.parentElement.appendChild(presidentIcon);
            barLabels[i].setAttribute('x', parseFloat(x) + 20);
        }
    }
}


function createImage(options) {
    var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
    image.setAttributeNS(null, 'height', options.height);
    image.setAttributeNS(null, 'width', options.width);
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', options.href);
    image.setAttributeNS(null, 'x', options.x);
    image.setAttributeNS(null, 'y', options.y);
    image.setAttributeNS(null, 'visibility', 'visible');
    return image;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="example4.2" style="height: 600px;"></div>