I'm using google bar charts as a navigational interface to display records with a date range by clicking on the h-axis labels which in my case show month and year.

The problem is that there is no interactivity, eg the cursor changing when you roll over the dates on the h-axis.

I'm accessing the h-axis label using:

google.visualization.events.addListener(chart, 'click', function (e) {

var bar_date = e.targetID.match(/hAxis#0#label#(\d+)/);

This gets me an object from which I obtain the date associated with the bar in the chart.

Can the clicked label on the h-axis be made to change via the same event?

update: fiddle with working example as per accepted answer

1 Answers

2
WhiteHat On Best Solutions

you can certainly change the chart labels.

first, we must differentiate the h-axis labels from the rest of the chart labels.
this can be done by using an attribute on the <text> element.
here, the text-anchor attribute is used.
when the label is clicked, the color is changed to red.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['date', 'value'],
    [new Date(2019, 0), 2924],
    [new Date(2019, 1), 2075],
    [new Date(2019, 2), 2516],
  ]);

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

  google.visualization.events.addListener(chart, 'click', function (e) {
    var bar_date = e.targetID.match(/hAxis#0#label#(\d+)/);
    var labels = container.getElementsByTagName('text');
    var bar_labels = [];

    // get chart labels
    Array.prototype.forEach.call(labels, function(label) {
      // find h-axis labels
      if (label.getAttribute('text-anchor') === 'middle') {
        bar_labels.push(label);
      }
    });

    // find label clicked
    if (bar_date) {
      bar_labels[bar_date[1]].setAttribute('fill', '#ff0000');
    }
  });

  chart.draw(data, {
    hAxis: {
      format: 'MM/yy',
      ticks: data.getDistinctValues(0)
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>


EDIT

the structure of the data table should not make any difference,
see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols": [
      {
        "id": "Month",
        "label": "Month",
        "type": "string"
      },
      {
        "id": "y0",
        "label": "y0",
        "type": "number"
      },
      {
        "id": "y0",
        "label": "y0",
        "type": "number"
      },
      {
        "id": "y0",
        "label": "y0",
        "type": "number"
      }
    ],
    "rows": [{"c": [{"v": "Sep 2014"}, {"v": 100}, {"v": 0}, {"v": 0}]}]
  });

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

  google.visualization.events.addListener(chart, 'click', function (e) {
    var bar_date = e.targetID.match(/hAxis#0#label#(\d+)/);
    var labels = container.getElementsByTagName('text');
    var bar_labels = [];

    // get chart labels
    Array.prototype.forEach.call(labels, function(label) {
      // find h-axis labels
      if (label.getAttribute('text-anchor') === 'middle') {
        bar_labels.push(label);
      }
    });

    // find label clicked
    if (bar_date) {
      bar_labels[bar_date[1]].setAttribute('fill', '#ff0000');
    }
  });

  chart.draw(data, {
    hAxis: {
      format: 'MM/yy',
      ticks: data.getDistinctValues(0)
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>