javascript charts google-visualization jsapi pygooglechart

google charts, change trendline equation parameter labels

I want to change the equation parameters label (only) from Age and Diameter to Y and X from (Age = 4.885 * Diameter + 0.73) to (Y = 4.885 * X + 0.73) in the title and inside the tooltip.

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Diameter', 'Age'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: {
      alignment: 'end',
      position: 'top'
    },
    series: {
      0: {
        visibleInLegend: true
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var equation = $('text[text-anchor="start"][fill="#222222"]').text();
    console.log(equation);
  });

  chart.draw(data, options);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

can some one help me please ?

Solution

there are no standard options,
you would need to change manually on the chart's 'ready' event.

but it might be easier to change the column labels to 'X', 'Y',
then manually change the title of the series to 'Age'...

see following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: {
      alignment: 'end',
      position: 'top'
    },
    series: {
      0: {
        visibleInLegend: true
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var equation = $('text[text-anchor="start"][fill="#222222"]').get(0);
    equation.textContent = 'Age';
  });

  chart.draw(data, options);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

to display 'Age' as the series title in the tooltip,
you can use a custom tooltip.

here, a data view is used to add the tooltip column.

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
  calc: function (dt, row) {
    return 'Age\n' + dt.getFormattedValue(row, 0) + ', ' + dt.getFormattedValue(row, 1);
  },
  role: 'tooltip',
  type: 'string'
}]);

see following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return 'Age\n' + dt.getFormattedValue(row, 0) + ', ' + dt.getFormattedValue(row, 1);
    },
    role: 'tooltip',
    type: 'string'
  }]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: {
      alignment: 'end',
      position: 'top'
    },
    series: {
      0: {
        visibleInLegend: true
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var equation = $('text[text-anchor="start"][fill="#222222"]').get(0);
    equation.textContent = 'Age';
  });

  chart.draw(view, options);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>