Google Timeline Chart Change HAxis to string value

Question

I would like to ask if it is possible that the haxis value (The one with dates below) for Google Timeline change to string format?

For example, Oct. 30 will be changed to Week 1, Nov. 6 to Week 2, and so on.

Any help and suggestions are welcomed and appreciated.

Thanks in advance!

only standard configuration options for hAxis are --> minValue and maxValue -- from October, 2 2015 release — WhiteHat
Thanks for the response WhiteHat.Is there no other way to do it, even in javascript? — bbb
sure, in javascript, once the 'ready' event fires, you could either change the text of the existing labels, or remove them and add your own. — WhiteHat
Hi @Whitehat, I'm sorry my javascript expertise is in beginner's level. I have tried some suggestions found in this forum and other sites but to no avail. I have also tried formatting it as for example: ['Biking', {v: new Date(2016, 9, 30), f: "Week 1"}, {v: new Date(2016, 10, 6), f: "W 701"}], and hAxis ticks: ticks: [{v: (2016, 9, 30), f: "Week 1"}, Would it be possible that you provide me a short example of 'ready' event? — bbb

WhiteHat WhiteHat · Accepted Answer · 2017-01-10T12:56:30

the timeline chart is very limited compared to the core charts

both in terms of options available and helper methods for finding chart coordinates, etc...

but like core charts, timelines produce svg, which can be modified using javascript

see following working snippet...

once the chart's 'ready' event fires, all of the haxis labels are removed

then custom labels are added back for the week numbers

before removing all the labels, one is cloned, in order to keep the same font, color, y-coordinate, etc...

then the timeline bars are used to find the x-coordinate and add the new label

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({type: 'string', id: 'Category'});
    dataTable.addColumn({type: 'date', id: 'Start'});
    dataTable.addColumn({type: 'date', id: 'End'});
    dataTable.addRows([
      ['Category A', new Date(2016, 9, 30), new Date(2016, 10, 5)],
      ['Category B', new Date(2016, 10, 6),  new Date(2016, 10, 12)],
      ['Category C', new Date(2016, 10, 13),  new Date(2016, 10, 19)]
    ]);

    google.visualization.events.addListener(chart, 'ready', function () {
      var rowIndex = 0;      // data table row index
      var weekLabel = null;  // clone of text node - keep font settings, y-coord, etc...

      // remove haxis labels
      var labels = container.getElementsByTagName('text');
      while (labels.length > dataTable.getNumberOfRows()) {
        // ignore "category" labels
        if (dataTable.getFilteredRows([{column: 0, value: labels[labels.length - 1].innerHTML}]).length === 0) {
          if (weekLabel === null) {
            weekLabel = labels[labels.length - 1].cloneNode(true);
          }
          labels[labels.length - 1].parentNode.removeChild(labels[labels.length - 1]);
        }
      }

      // use timeline bars to find x coordinate for week labels
      rowIndex = 0;
      var svgParent = container.getElementsByTagName('svg')[0];
      Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
        var bounds;  // bounding box of text element

        // ignore rect if not a timeline bar
        if (parseFloat(bar.getAttribute('x')) > 0) {
          weekLabel = weekLabel.cloneNode(true);
          weekLabel.innerHTML = 'Week ' + (rowIndex + 1);
          svgParent.appendChild(weekLabel);
          bounds = weekLabel.getBBox();
          weekLabel.setAttribute('x', parseFloat(bar.getAttribute('x')) + bounds.width);
          rowIndex++;
        }
      });
    });

    chart.draw(dataTable);
  },
  packages:['timeline']
});

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

Google Timeline Chart Change HAxis to string value

2 Answers