Setting intervals for both axis in google line chart

Question

I am using Google Line Charts(Material) and want to specify the Y-Axis and X-Axis with fix intervals(increment of 1). Referring to the diagram, I want my Y-Axis values to be 1,2,3. I am unable to figure out what are the options to be set for the chart. Appreciate any help on this - Thanks

Answer 1

I think Material LineCharts don't yet support ticks. But you can try insert in options - vAxis and try with changing value max:

var options = {
   vAxis: {
      viewWindow: {
              max: 5
          },
     ...

and call convertOptions:

chart.draw(data, google.charts.Line.convertOptions(options));

Like in this example on JSFiddle.

Answer 2

First of all, the Material Charts are still in beta and the material charts don't yet support many of the options supported by the corecharts.

Regarding explicit setting ticks option, looks like it is not supported yet. If you want the material style (at least the fonts and colors) with the corecharts, you can add this:

option: { theme: 'material' }

Example

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');

      data.addRows([
        [1,  7.8],
        [2,  3.9],
        [3,  2.4],
        [4,  1.7],
        [5,  1.9],
        [6,   8.8],
        [7,   7.6],
        [8,  2.3],
        [9,  6.9],
        [10, 2.8],
        [11,  5.3],
        [12,  6.6],
        [13,  4.8],
        [14,  4.2]
      ]);

      var options = {
        title: 'Box Office Earnings in First Two Weeks of Opening',
        width: 900,
        height: 500,
        vAxis: {
              viewWindow: {
                  min: 0,
                  max: 10
              },
              ticks: [0,1,2,3,4,5,6,7,8,9,10]
        },
        hAxis: {
              viewWindow: {
                  min: 1,
                  max: 14
              },
              ticks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
        },
        theme: 'material'
      };

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

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="linechart_material"></div>