What is the configuration in Google Chart to lessen the number of number/dates display on the hAxis?

user_17872499 0
Viewed 35

I'm using a line graph in Google Chart and there's just one thing left I need to configure, the hAxis dates.

The dates have 2 days gap only, like Feb 2, Feb 4, Feb 6, Feb 8, and so on, and so it shows 15 dates on the hAxis. I want to widen the gap maybe by 7 days or lessen the number of dates displayed by just 4 dates. How to achieve that? I can't seem to find the right config for it here: https://developers.google.com/chart/interactive/docs/gallery/linechart.

Here's my chart: https://jsfiddle.net/hpx7Lj91/1/

google.charts.load('current', {
  packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Price');

  data.addRows([
    [new Date(2022, 1, 1), 0.2500],
    [new Date(2022, 1, 2), 0.2500],
    [new Date(2022, 1, 3), 0.2600],
    [new Date(2022, 1, 4), 0.2700],
    [new Date(2022, 1, 5), 0.2800],
    [new Date(2022, 1, 6), 0.3000],
    [new Date(2022, 1, 7), 0.2900],
    [new Date(2022, 1, 8), 0.3300],
    [new Date(2022, 1, 9), 0.3100],
    [new Date(2022, 1, 10), 0.3200],
    [new Date(2022, 1, 11), 0.3200],
    [new Date(2022, 1, 12), 0.3200],
    [new Date(2022, 1, 13), 0.3100],
    [new Date(2022, 1, 14), 0.3200],
    [new Date(2022, 1, 15), 0.3000],
    [new Date(2022, 1, 16), 0.3100],
    [new Date(2022, 1, 17), 0.3000],
    [new Date(2022, 1, 18), 0.3000],
    [new Date(2022, 1, 19), 0.2900],
    [new Date(2022, 1, 20), 0.2800],
    [new Date(2022, 1, 21), 0.2700],
    [new Date(2022, 1, 22), 0.2700],
    [new Date(2022, 1, 23), 0.2700],
    [new Date(2022, 1, 24), 0.2600],
    [new Date(2022, 1, 25), 0.2700],
    [new Date(2022, 1, 26), 0.2600],
    [new Date(2022, 1, 27), 0.2500],
    [new Date(2022, 1, 28), 0.2500],
    [new Date(2022, 1, 29), 0.2400],
    [new Date(2022, 1, 30), 0.2500]
  ]);

  var options = {
    hAxis: {
      gridlines: {
        color: 'none'
      },
      format: 'MMM dd',
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      }
    },
    vAxis: {
      gridlines: {
        color: '#DFE3EB'
      },
      minorGridlines: {
        color: 'none'
      },
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      }
    },
    tooltip: {
      textStyle: {
        color: '#677185',
        fontSize: 12
      }
    },
    series: {
      0: {
        color: '#26a172'
      }
    },
    legend: {
      position: 'none'
    },
    curveType: 'function'
  };

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

  chart.draw(data, options);
}
google-visualization charts javascript
1 Answers

the ticks option offers the most flexibility

it takes an array of the ticks you want to display, such as...

[new Date(2022, 1, 1), new Date(2022, 1, 8), new Date(2022, 1, 15), ...]

you can obviously hard-code them as shown above, or...
we can use data table method getColumnRange(colIndex) to find the min and max dates from the data table.
here is a routine to display a certain number of dates,
evenly spaced between the min and max dates from the data table.

  var datesToDisplay = 6;
  var dateRange = data.getColumnRange(0);
  var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
  var interval = timeRange / (datesToDisplay - 1);
  var ticks = [];
  var tick = dateRange.min;
  while (tick.getTime() <= dateRange.max.getTime()) {
    ticks.push(tick);
    tick = new Date(tick.getTime() + interval);
  }

then add the ticks option...

    hAxis: {
      gridlines: {
        color: 'none'
      },
      format: 'MMM dd',
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      },
      ticks: ticks  // <-- ticks option
    },

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', 'Price');

  data.addRows([
    [new Date(2022, 1, 1), 0.2500],
    [new Date(2022, 1, 2), 0.2500],
    [new Date(2022, 1, 3), 0.2600],
    [new Date(2022, 1, 4), 0.2700],
    [new Date(2022, 1, 5), 0.2800],
    [new Date(2022, 1, 6), 0.3000],
    [new Date(2022, 1, 7), 0.2900],
    [new Date(2022, 1, 8), 0.3300],
    [new Date(2022, 1, 9), 0.3100],
    [new Date(2022, 1, 10), 0.3200],
    [new Date(2022, 1, 11), 0.3200],
    [new Date(2022, 1, 12), 0.3200],
    [new Date(2022, 1, 13), 0.3100],
    [new Date(2022, 1, 14), 0.3200],
    [new Date(2022, 1, 15), 0.3000],
    [new Date(2022, 1, 16), 0.3100],
    [new Date(2022, 1, 17), 0.3000],
    [new Date(2022, 1, 18), 0.3000],
    [new Date(2022, 1, 19), 0.2900],
    [new Date(2022, 1, 20), 0.2800],
    [new Date(2022, 1, 21), 0.2700],
    [new Date(2022, 1, 22), 0.2700],
    [new Date(2022, 1, 23), 0.2700],
    [new Date(2022, 1, 24), 0.2600],
    [new Date(2022, 1, 25), 0.2700],
    [new Date(2022, 1, 26), 0.2600],
    [new Date(2022, 1, 27), 0.2500],
    [new Date(2022, 1, 28), 0.2500],
    [new Date(2022, 1, 29), 0.2400],
    [new Date(2022, 1, 30), 0.2500]
  ]);
  
  var datesToDisplay = 6;
  var dateRange = data.getColumnRange(0);
  var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
  var interval = timeRange / (datesToDisplay - 1);
  var ticks = [];
  var tick = dateRange.min;
  while (tick.getTime() <= dateRange.max.getTime()) {
    ticks.push(tick);
    tick = new Date(tick.getTime() + interval);
  }

  var options = {
    hAxis: {
      gridlines: {
        color: 'none'
      },
      format: 'MMM dd',
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      },
      ticks: ticks
    },
    vAxis: {
      gridlines: {
        color: '#DFE3EB'
      },
      minorGridlines: {
        color: 'none'
      },
      textStyle: {
        color: '#677185',
        fontSize: 12,
        bold: true
      }
    },
    tooltip: {
      textStyle: {
        color: '#677185',
        fontSize: 12
      }
    },
    series: {
      0: {
        color: '#26a172'
      }
    },
    legend: {
      position: 'none'
    },
    curveType: 'function'
  };

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

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

user_50907710
Related