Google Charts: Data in the axis

Question

This code creates a scatterplot with an image of a pie chart on it.

I'm having a problem making the data row entry to be shown in the axis of the Scatterplot.

Any idea in how to make that happen?

Many thanks :)

google.charts.load('current', {'packages':['corechart']});
         function draw0hedgeChart() {   var data = new google.visualization.DataTable();   data.addColumn('number', 'X');   data.addColumn('number', 'Y');

     data.addRows([    [ 9.87,      6.53],   ]);

        var options = {
            colors: ['#000000'],
            legend: 'none',
              title: 'Risk vs. Return with 0% Hedge Fund',
              hAxis: {title: 'Risk', minValue: 3, maxValue: 11, gridlineColor: '#fff', direction: -1},
              vAxis: {title: 'Return', minValue: 4, maxValue: 10, gridlineColor: '#fff'},
              width:900,
              height:500
            };


      var container = document.getElementById('chart0_div');

      var chart = new google.visualization.ScatterChart(container);

      google.visualization.events.addListener(chart, 'ready', function () {
        var layout = chart.getChartLayoutInterface();

        for (var i = 0; i < data.getNumberOfRows(); i++) {

            var xPos = layout.getXLocation(data.getValue(i, 0));
            var yPos = layout.getYLocation(data.getValue(i, 1));

            var widget0 = container.appendChild(document.createElement('img'));
            widget0.src = 'img/0.png';
            widget0.className = 'chart0';

            // (overlay the dot)
            widget0.style.top = (yPos - 50) + 'px';
            widget0.style.left = (xPos - 50) + 'px';

        }   });

      chart.draw(data, options); }

Answer 1

i think you may be referring to the configuration options for...

{hAxis,vAxis,hAxes.*,vAxes.*}.ticks

hAxis.ticks - Replaces the automatically generated X-axis ticks with the specified array. Each element of the array should be either a valid tick value (such as a number, date, datetime, or timeofday)

e.g.

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

function draw0hedgeChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');
  data.addRows([
    [9.87, 6.53],
  ]);

  var ticksX = [];
  var ticksY = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    ticksX.push(data.getValue(i, 0));
    ticksY.push(data.getValue(i, 1));
  }

  var options = {
    colors: ['#000000'],
    legend: 'none',
    title: 'Risk vs. Return with 0% Hedge Fund',
    hAxis: {
      title: 'Risk',
      minValue: 3,
      maxValue: 11,
      //gridlineColor: '#fff',
      direction: -1,
      ticks: ticksX
    },
    vAxis: {
      title: 'Return',
      minValue: 4,
      maxValue: 10,
      //gridlineColor: '#fff',
      ticks: ticksY
    },
    width:900,
    height:500
  };

  var container = document.getElementById('chart0_div');
  var chart = new google.visualization.ScatterChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var layout = chart.getChartLayoutInterface();

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      var xPos = layout.getXLocation(data.getValue(i, 0));
      var yPos = layout.getYLocation(data.getValue(i, 1));

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

      // (overlay the dot)
      widget0.style.position = 'absolute';
      widget0.style.top = yPos + 'px';
      widget0.style.left = xPos + 'px';
    }
  });

  chart.draw(data, options);
}

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