title: Google Charts, Setting gridlines count of barchart
body: <p>Currently I am working with the Google Charts API to generate some charts. To display the correct image I should change the gridline steps of the X-axis (values) marked with the green gridlines.</p>
  <h3>Current graph</h3>
  <p><a href="https://i.stack.imgur.com/Y4hBJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y4hBJ.png" alt="Image of the current graph" /></a><br />
  <sub>(source: <a href="http://jordysipkema.nl/images/so-img1.png" rel="nofollow noreferrer">jordysipkema.nl</a>)</sub></p>
  <h3>Expected graph</h3>
  <p><a href="https://i.stack.imgur.com/Fz0Jl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fz0Jl.png" alt="Image of the expected graph" /></a><br />
  <sub>(source: <a href="http://jordysipkema.nl/images/so-img2.png" rel="nofollow noreferrer">jordysipkema.nl</a>)</sub></p>
  <p>(Expected graph made by resizing the browser)</p>
  <h3>Setting the data</h3>
  <pre><code>var data = new google.visualization.DataTable();
  data.addColumn('string', 'Labels');
  data.addColumn('number', 'Result value');
  data.addRows([
      [&quot;Label 1&quot;, 8.098205131],
      [&quot;Label 2&quot;, 10.08567831],
      [&quot;Label 3&quot;, 10.790166352],
      [&quot;Label 4&quot;, 9.148802676],
      [&quot;Label 5&quot;, 8.571340962]
  ]);
  </code></pre>
  <h3>Define graph options</h3>
  <pre><code>var options = {        
      title: 'Title - Value Bar Chart',
      subtitle: 'Uses: label and a value',
      legend: {
          position: 'none'
      },
      height: chartHeight,
      bars: 'horizontal', // Required for Material Bar Charts.
      hAxis: {
          format: '#.###',
          gridlines: {
              color: '#00ff00' //Green lines for debugging purposes 
              // count: 4
          },
          ticks: [8, 9, 10, 11],
          viewWindow: {
              min: Math.floor(columnRange.min),
              max: Math.ceil(columnRange.max)
          }
      },
      vAxis: {
          gridlines: {
          color: '#ff0000', //Red lines
              count: 1
          }
      }
  };
  </code></pre>
  <p>I've read about the <code>hAxis.gridlines.count</code> parameter in the options array. Unfortunately this doesn't change anything to the chart. In this given case, where the values range from 8 to 11, I would like to have 4 gridlines (set at 8, 9, 10 and 11).</p>
  <p>The other approach I've tried is setting the <code>hAxis.ticks</code> parameter to <code>[8, 9, 10, 11]</code>. This didn't affect the graph either.</p>
  <p>A working JSFiddle example to demonstrate what is going on:
  <a href="http://jsfiddle.net/jordysipkema/7ko71u05/" rel="nofollow noreferrer">JSFiddle of the code</a></p>
  <p>Any help would be greatly appreciated</p>