Google Charts: condensing hAxis values

Question

I'd like to lessen the amount of ticks on the hAxis for Google Charts' Area chart. I tried using the tick option, but it doesn't quite accomplish what I'm going for.

For example, if the hAxis values were the following: ['Jun 2016', 'Jun 2016', 'Jul 2016', 'Aug 2016', 'Sep 2016', 'Sep 2016']

The hAxis would not display the duplicates, so as to avoid cramming unnecessary tick marks for repeated dates.

WhiteHat WhiteHat · Accepted Answer · 2017-03-14T19:21:18

without seeing the code, it's difficult to make a recommendation

for starters, ticks are only supported on a continuous axis ('date', 'number', etc...)

not supported if the first column in the data is --> 'string'

otherwise, the axis should display only the ticks that are provided

here, two arrays are used to build the ticks,
one for the date value and one for the date format,
the date format is checked before adding each individual tick...

  // avoid duplicates
  if (ticksAxisHFormatted.indexOf(formatDate.formatValue(xValue)) === -1) {
    ticksAxisHFormatted.push(formatDate.formatValue(xValue));
    ticksAxisH.push(xValue);
  }

see following working snippet...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM yyyy'
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Day');
  dataTable.addColumn('number', 'Y');
  dataTable.addColumn({role: 'style', type: 'string'});

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2016, 11, 7);
  var endDate = new Date();
  var ticksAxisH = [];
  var ticksAxisHFormatted = [];
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    // x = date
    var xValue = new Date(i);

    // y = 2x + 8
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);
    dataTable.addRow([
      xValue,
      yValue,
      'point {fill-color: #003eff;}, line {stroke-color: #003eff;}'
    ]);

    // add ticks
    if (((i - startDate.getTime()) % 7) === 0) {
      // avoid duplicates
      if (ticksAxisHFormatted.indexOf(formatDate.formatValue(xValue)) === -1) {
        ticksAxisHFormatted.push(formatDate.formatValue(xValue));
        ticksAxisH.push(xValue);
      }
    }
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.AreaChart(container);
  chart.draw(dataTable, {
    colors: ['#e6f4f9'],
    chartArea: {
      top: 16,
      left: 36,
      height: 360,
      width: '100%'
    },
    areaOpacity: 1.0,
    hAxis: {
      gridlines: {
        color: '#f5f5f5'
      },
      format: 'MMM yyyy',
      ticks: ticksAxisH
    },
    height: 400,
    legend: 'none',
    pointSize: 4,
    vAxis: {
      gridlines: {
        color: '#f5f5f5'
      }
    },
    width: '100%'
  });
}

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

Google Charts: condensing hAxis values

1 Answers