Google Graphics - Legend and Tips

Question

I have a question about Google settings and how to configure them.

I work with a combined chart, and note that I can edit its parameters, since the data is created as part of the code that is inaccessible to me .

What I'm trying to do is change the serial shortcut in the legend and tooltip displayed on hover by simply editing the chart options.

I found out that this series has a labelInLegend property that allows me to edit the displayed label in the legend, but the label inside the tooltip also does not change. Is there a way to achieve this by changing the parameters or somehow, but after the graph has been drawn?

Check this Fiddle to see the problem (ORIGINAL_LABEL is the original serial name I want to change to MY_LABEL in both legends and a tooltip)

//Series initialization: I CAN'T CHANGE THIS CODE!
google.visualization.arrayToDataTable([
     ['Month', 'ORIGINAL_LABEL']
]);

//Options initialization: I CAN MODIFY THIS CODE
var options = {
  series: {
    0:{ labelInLegend: "MY_LABEL"}
    }
};

Answer 1

one option would be to use a DataView to add a calculated column
and a method setColumnsto change the label

see the following working snippet ...

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

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'ORIGINAL_LABEL'],
    ['2004/05',  165],
    ['2005/06',  135],
    ['2006/07',  157],
    ['2007/08',  139],
    ['2008/09',  136]
  ]);

  var options = {
    seriesType: 'bars'
  };

  var view = new google.visualization.DataView(data);
  view.setColumns([0, {
    calc: function (dt, r) {
      return dt.getValue(r, 1);
    },
    type: data.getColumnType(1),
    label: 'MY_LABEL'
  }]);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Run codeHide result

another option involves using HTML hints

    tooltip: {
      isHtml: true
    }

and using MutationObserverto find the text and replace it

however, the size of the tooltip is discarded due to the size of the label may require additional configuration

see the following working snippet ...

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

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'ORIGINAL_LABEL'],
    ['2004/05',  165],
    ['2005/06',  135],
    ['2006/07',  157],
    ['2007/08',  139],
    ['2008/09',  136]
  ]);

  var options = {
    seriesType: 'bars',
    tooltip: {
      isHtml: true
    }
  };

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

  var observer = new MutationObserver(function (mutations) {
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('span'), function (span) {
      if (span.innerHTML.indexOf('ORIGINAL_LABEL') > -1) {
        span.innerHTML = span.innerHTML.replace('ORIGINAL_LABEL', 'MY_LABEL');
      }
    });
  });
  observer.observe(chartDiv, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Run codeHide result