charts - How to hide Google Charts hours from hAxis

Question

Im using line chart from Google Charts. I show date on hAxis (horizontal). My major gridlines show date normally. But there are time labels between date labels. And i dont want time labels. I tried to put that property in hAxis on chart options but nothing changed

minorGridlines:{textPosition: 'none' }

hAxis options;

hAxis: {titleTextStyle: {color: '#0000ff'},
            slantedText:true, slantedTextAngle:60,format: 'd/M/yy',minorGridlines:{textPosition: 'none' },gridlines: {
              count: -1,
              units: {
                days: {format: ['d.MM']},
                hours: {format: ['HH:mm']},
              }
             }
},

is there anyone who knows the solution?

标签： chartsgoogle-visualization

Answer 1

first, remove the options for gridlines.
however, this could cause the same date labels to repeat.
to prevent from repeating,
you can provide your own ticks.

the hAxis.ticks option takes an array, in this case, of dates.
to build the ticks array, we can use data table method --> getColumnRange(colIndex)
this will return the min & max values of the column.

then we can to build our ticks array.

// build hAxis ticks
var hAxisTicks = [];
var dateRange = data.getColumnRange(0);
var oneDay = (24 * 60 * 60 * 1000);
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
  hAxisTicks.push(new Date(i));
}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Y');
  data.addRows([
    [new Date(2019, 0, 1, 0), 10],
    [new Date(2019, 0, 1, 6), 20],
    [new Date(2019, 0, 1, 12), 30],
    [new Date(2019, 0, 1, 18), 40],
    [new Date(2019, 0, 2, 0), 10],
    [new Date(2019, 0, 2, 6), 20],
    [new Date(2019, 0, 2, 12), 30],
    [new Date(2019, 0, 2, 18), 40],
    [new Date(2019, 0, 3, 0), 10],
    [new Date(2019, 0, 3, 6), 20],
    [new Date(2019, 0, 3, 12), 30],
    [new Date(2019, 0, 3, 18), 40],
    [new Date(2019, 0, 4, 0), 10],
    [new Date(2019, 0, 4, 6), 20],
    [new Date(2019, 0, 4, 12), 30],
    [new Date(2019, 0, 4, 18), 40],
  ]);

  // build hAxis ticks
  var hAxisTicks = [];
  var dateRange = data.getColumnRange(0);
  var oneDay = (24 * 60 * 60 * 1000);
  for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
    hAxisTicks.push(new Date(i));
  }

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    hAxis: {
      format: 'd/M/yy',
      ticks: hAxisTicks
    }
  });
});

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

---

EDIT

building the ticks manually will cause a performance hit,
but only by a couple milliseconds, which is nothing.

see following working snippet,
540 rows are drawn, the milliseconds it takes to build the ticks are shown in the console...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Y');

  for (var i = (new Date(2019, 0, 1)).getTime(); i <= (new Date(2019, 3, 1)).getTime(); i = i + (4 * 60 * 60 * 1000)) {
    data.addRow([new Date(i), i]);
  }

  // build hAxis ticks
  var test = new Date();
  console.log('rows', data.getNumberOfRows());
  var hAxisTicks = [];
  var dateRange = data.getColumnRange(0);
  var oneDay = (24 * 60 * 60 * 1000);
  for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
    hAxisTicks.push(new Date(i));
  }
  console.log('milliseconds', ((new Date()).getTime() - test.getTime()));

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    hAxis: {
      format: 'd/M/yy',
      ticks: hAxisTicks
    }
  });
});

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