Google Charts Date axis labels not correct

Question

I have been working on Google Line charts having a date axis. I have noticed that the axis labels ticks are determined by the number of gridlines and are not same to the data that I am passing. Could someone please tell me how I could force the axis labels to be in sync with the data I am passing. Please find the link for the fiddle: https://jsfiddle.net/FarhanI/5ga6xu44/

  function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time of Day');
    data.addColumn('number', 'Rating');

    data.addRows([
      [new Date(2015, 0, 1), 5],
      [new Date(2015, 0, 7), 3],[new Date(2015, 0, 14), 3], [new Date(2015, 0, 21), 2],[new Date(2015, 0, 28), 8],
    ]);


    var options = {
      title: 'Rate the Day on a Scale of 1 to 10',
      width: 900,
      height: 500,
      hAxis: {
        format: 'M/d/yy',
        gridlines: {count: 9}
      },
      vAxis: {
        gridlines: {color: 'none'},

      }
    };

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

    chart.draw(data, options);

    var button = document.getElementById('change');

    button.onclick = function () {

      // If the format option matches, change it to the new option,
      // if not, reset it to the original format.
      options.hAxis.format === 'M/d/yy' ?
      options.hAxis.format = 'MMM dd, yyyy' :
      options.hAxis.format = 'M/d/yy';

      chart.draw(data, options);
    };
  }

Also I am trying to have the gridline appear as the y axis since I was unable to get the Y axis with line charts. I tried specifying gridline as 1, but I was able to get only 1 gridline that too in the middle of the X axis.

Could someone please let me know if I could get Y axis with the line chart.

Appreciate the assistance, Farhan.

WhiteHat WhiteHat · Accepted Answer · 2016-10-13T14:35:30

you can provide custom hAxis.ticks

to sync with the data, build an array with the dates from each row

// load custom ticks
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  ticks.push(data.getValue(i, 0));
}

then use the array in the config options

  hAxis: {
    format: 'M/d/yy',
    ticks: ticks
  }

note: not following what is needed for the y-axis, could you please clarify...
--> get Y axis with the line chart

if you just simply want to see gridlines, remove the following from config options...

  vAxis: {
    gridlines: {color: 'none'}
  }

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time of Day');
    data.addColumn('number', 'Rating');

    data.addRows([
      [new Date(2015, 0, 1), 5],
      [new Date(2015, 0, 7), 3],
      [new Date(2015, 0, 14), 3],
      [new Date(2015, 0, 21), 2],
      [new Date(2015, 0, 28), 8]
    ]);

    // load custom ticks
    var ticks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      ticks.push(data.getValue(i, 0));
    }

    var options = {
      title: 'Rate the Day on a Scale of 1 to 10',
      width: 900,
      height: 500,
      hAxis: {
        format: 'M/d/yy',
        ticks: ticks
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    var button = document.getElementById('change');
    button.onclick = function () {
      // If the format option matches, change it to the new option,
      // if not, reset it to the original format.
      options.hAxis.format === 'M/d/yy' ?
      options.hAxis.format = 'MMM dd, yyyy' :
      options.hAxis.format = 'M/d/yy';
      chart.draw(data, options);
    };
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" id="change" value="Change" />
<div id="chart_div"></div>

Google Charts Date axis labels not correct

1 Answers