Search code examples
datechartsgoogle-visualizationgridlines

How do I align date and values to gridlines in Google Chart?

I'm using Google Chart in my application with the following code (JSFiddle): 

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'date');
  data.addColumn('number', 'view');
  data.addRows([
    [new Date('2015-08-01'), 5],
    [new Date('2015-08-02'), 7],
    [new Date('2015-08-03'), 2],
    [new Date('2015-08-04'), 16],
    [new Date('2015-08-05'), 3],
    [new Date('2015-08-06'), 6],
    [new Date('2015-08-07'), 1]          
  ]);    

  var options = {
    title: 'view count',
    width: 900,
    height: 500,
    hAxis: {
        format: 'MM-dd',
        gridlines: {count: 90}
      },
   vAxis: {
        minValue: 0,
        gridlines: {
            color: '#f3f3f3',
            count: 6
        }
    }
  };

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

However, the chart does not match between date and gridlines:

sample chart How can I match (synchronize) grid and date?

Solution

  • Changing the date format (mm/dd/yyyy vs. yyyy-mm-dd) seems to get it to align...

    google.load('visualization', '1', {
    packages: ['corechart']
});
google.setOnLoadCallback(drawChart);

function drawChart() {

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

    data.addRows([
        [new Date('08/01/2015'), 5],
        [new Date('08/02/2015'), 7],
        [new Date('08/03/2015'), 2],
        [new Date('08/04/2015'), 16],
        [new Date('08/05/2015'), 3],
        [new Date('08/06/2015'), 6],
        [new Date('08/07/2015'), 1]

    ]);


    var options = {
        title: 'view count',
        width: 900,
        height: 500,
        hAxis: {
            format: 'MM-dd',
            gridlines: {
                count: 90
            }
        },
        vAxis: {
            minValue: 0,
            gridlines: {
                color: '#f3f3f3',
                count: 6
            }
        }
    };

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

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