CODEWITHSUNDEEP
chartsgoogle-visualization
전원표
전원표

Reputation: 170

How can I attach the image or icon on edge of google line chart

I want to line chart looks like below

enter image description here

or just image sequence chart is possible?

like this enter image description here

is there any possible way for achieving this?

Upvotes: 4

Views: 2010

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

use the getChartLayoutInterface method

var layout = chart.getChartLayoutInterface();

to find the (x, y) location of the point 

var xPos = layout.getXLocation(data.getValue(row, xColumn));
var yPos = layout.getYLocation(data.getValue(row, yColumn));

then add the image manually and adjust accordingly

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

function drawBackgroundColor() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');

  data.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
    [66, 70], [67, 72], [68, 75], [69, 80]
  ]);

  var options = {
    colors: ['#000000'],
    legend: 'none',
    lineSize: 2
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var layout = chart.getChartLayoutInterface();
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      // add image above every fifth element
      if ((i % 5) === 0) {
        var xPos = layout.getXLocation(data.getValue(i, 0));
        var yPos = layout.getYLocation(data.getValue(i, 1));

        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 - 16) + '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>

Upvotes: 4

Related Questions