Adding an image on top of line annotations in Google Line chart

Question

Here is a code for creating a line chart. I'm trying to add an image on top of the line annotation. Here a demo on jsfiddle. Here is the code:

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = new google.visualization.DataTable();

      data.addColumn('number', 'X');
      data.addColumn({type: 'string', role: 'annotation'});
      data.addColumn('number', 'Dogs');
      data.addColumn('number', 'Cats');

      data.addRows([
        [0,null, 0, 1],   [1,'', 10,3],  [2,null, 23,6],  [3,null, 17,7],  [4,null, 18,4],  [5,null, 9,7]
      ]);

      var options = {
        curveType : 'function',
        hAxis: {
          title: 'Time',
          gridlines: {
              color: 'transparent'
          }
        },
        vAxis: {
          title: 'Popularity',
          gridlines: {
              color: 'transparent'
          }
        },
        annotations: {
            style: 'line',
            position: 'top'
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

I really can't figure out how to do this. Any one ever done this ?

Answer 1

you can add elements to the chart, once the 'ready' event fires
(or 'animationfinish' when using animation)

first, need to find the annotations, which will be <rect> elements

similar to the axis lines, they will have a 'width' of 1

but they will have a different 'fill' attribute
(keep this in mind, if more style settings are set on the annotations option)

the following working snippet finds the annotation lines and adds an image to the top

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', 'Dogs');
  data.addColumn('number', 'Cats');
  data.addRows([
    [0, null, 0, 1],
    [1, '', 10, 3],
    [2, null, 23, 6],
    [3, null, 17, 7],
    [4, null, 18, 4],
    [5, null, 9, 7]
  ]);

  var options = {
    annotations: {
      position: 'top',
      style: 'line'
    },
    hAxis: {
      gridlines: {
        color: 'transparent'
      },
      title: 'Time'
    },
    vAxis: {
      gridlines: {
        color: 'transparent'
      },
      title: 'Popularity'
    },
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
      if ((rect.getAttribute('width') === '1') && (rect.getAttribute('fill') === '#999999')) {
        var xPos = parseFloat(rect.getAttribute('x'));
        var yPos = parseFloat(rect.getAttribute('y'));

        var whiteHat = container.appendChild(document.createElement('img'));
        whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png';
        whiteHat.className = 'whiteHat';

        // 16x16 (image size in this example)
        whiteHat.style.top = (yPos - 8) + 'px';
        whiteHat.style.left = (xPos) + 'px';
      }
    });
  });

  chart.draw(data, options);
}

.whiteHat {
  border: none;
  position: absolute;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

Add 'role': 'tooltip', 'p': {'html': true}}); in your data.addColumn and in the options use: tooltip: { isHtml: true }.

HTML:

<div id="chart"></div>

JavaScript:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'y');
    data.addColumn('number', 'Line 1');
    data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    data.addColumn('number', 'Line 2');       

    data.addRow([1, 1, '<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 2]);
    data.addRow([2, 2,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 4]);
    data.addRow([3, 3,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 6]);
    data.addRow([4, 4,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 8]);
    data.addRow([5, 5,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 10]);

    var options = {
        title: 'Graph',
         hAxis: {
          title: 'Time',
          gridlines: {
              color: 'transparent'
          }
        },
        vAxis: {
          title: 'Popularity',
          gridlines: {
              color: 'transparent'
          }
        },
        annotations: {
            style: 'line',
            position: 'top'
        },
        tooltip: {isHtml: true},
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(data, options);
}

google.load("visualization", "1", {
    packages: ["corechart"]
});

google.setOnLoadCallback(drawChart);

See in JsFiddle.