Google Chart horizontal scrolling

I'm trying to set the visualization of the graph to showing a maximum of 4 months with the possibility to scroll horizontally.

I have tried to set some property like hAxis, but the page retun me back an error "a.getTime is not a function" when I set it.

Another problem is that pick to zoom and horizontal scrolling only work in chrome desktop, but not in android webview.

    <html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript"  src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages' : [ 'corechart', 'controls' ]
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);


//RAW Data
var jsonString = '[[\"F1\",\"F2\",\"F3\"],[\"Gennaio\",10.0,11.0,22.0],[\"Febbraio\",5.0,15.0,20.0],[\"Marzo\",7.0,17.0,15.0],[\"Aprile\",7.0,17.0,15.0],[\"Maggio\",7.0,17.0,15.0],[\"Giugno\",7.0,17.0,15.0],[\"Luglio\",7.0,17.0,15.0],[\"Agosto\",7.0,17.0,15.0],[\"Settembre\",7.0,17.0,15.0],[\"Ottobre\",7.0,17.0,15.0]]';


// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart(){

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Months');
    data.addColumn('number', 'Consumption');
    data.addColumn('number', 'Consumption_2');
    data.addRows([
        [ new Date(2017, 0, 1), 3, 5 ],
        [ new Date(2017, 1, 1), 4, 5 ],
        [ new Date(2017, 2, 1), 5, 5 ],
        [ new Date(2017, 3, 1), 6, 6 ],
        [ new Date(2017, 4, 1), 8, 7 ],
        [ new Date(2017, 5, 1), 3, 5 ],
        [ new Date(2017, 6, 1), 4, 5 ],
        [ new Date(2017, 7, 1), 5, 5 ],
        [ new Date(2017, 8, 1), 6, 6 ],
        [ new Date(2017, 9, 1), 8, 7 ],
        [ new Date(2017, 10, 1), 3, 5 ],
        [ new Date(2017, 11, 1), 4, 5 ],
        [ new Date(2018, 0, 1), 5, 5 ],
        [ new Date(2018, 1, 1), 6, 6 ],
        [ new Date(2018, 2, 1), 8, 7 ]
    ]);

      //OPTIONS
      var options = {
          'title': 'prova assi tempo',
          isStacked: true,
          'explorer': {
            axis: 'horizontal'
          },
          'animation': {
            duration: 500,
            easing: 'in',
            startup:true
          }
          // 'vAxis': {
          //   'viewWindow': {max: 4}
          // }
          // 'hAxis': {
          //   viewWindowMode: 'explicit',
          //   viewWindow: {
          //     max: 4
          //   }
          // }
          // 'hAxis': {
          //   'viewWindow': {
          //     max: 3
          //   }
          // }
      };


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

      chart.draw(data, options);

}

</script>

<body>

    <div id="chart_div"></div>

</body>

</html>

values for viewWindow.min and max should have the same type as the values on the axis,
in this case 'date' for the hAxis

e.g.

hAxis: {
  viewWindow: {
    min: new Date(2017, 0, 1),
    max: new Date(2017, 3, 1)
  }
}

another option would be using a dashboard with a range filter (ChartRangeFilter)

see following working snippet,
here, set range.start and end on the filter...

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Months');
  data.addColumn('number', 'Consumption');
  data.addColumn('number', 'Consumption_2');
  data.addRows([
    [ new Date(2017, 0, 1), 3, 5 ],
    [ new Date(2017, 1, 1), 4, 5 ],
    [ new Date(2017, 2, 1), 5, 5 ],
    [ new Date(2017, 3, 1), 6, 6 ],
    [ new Date(2017, 4, 1), 8, 7 ],
    [ new Date(2017, 5, 1), 3, 5 ],
    [ new Date(2017, 6, 1), 4, 5 ],
    [ new Date(2017, 7, 1), 5, 5 ],
    [ new Date(2017, 8, 1), 6, 6 ],
    [ new Date(2017, 9, 1), 8, 7 ],
    [ new Date(2017, 10, 1), 3, 5 ],
    [ new Date(2017, 11, 1), 4, 5 ],
    [ new Date(2018, 0, 1), 5, 5 ],
    [ new Date(2018, 1, 1), 6, 6 ],
    [ new Date(2018, 2, 1), 8, 7 ]
  ]);

  var rangeFilter = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'filter-range',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartType: 'ComboChart',
        chartOptions: {
          chartArea: {
            width: '100%',
            left: 36,
            right: 18
          },
          height: 72,
          isStacked: true,
          seriesType: 'bars'
        }
      }
    },
    state: {
      range: {
        start: new Date(2017, 0, 1),
        end: new Date(2017, 3, 1)
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart-column',
    options: {
      title: 'prova assi tempo',
      isStacked: true,
      explorer: {
        axis: 'horizontal'
      },
      legend: {
        alignment: 'end',
        position: 'top'
      },
      animation: {
        duration: 500,
        easing: 'in',
        startup:true
      },
      chartArea: {
        height: '100%',
        width: '100%',
        top: 36,
        left: 36,
        right: 18,
        bottom: 36
      }
    }
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
  dashboard.bind(rangeFilter, chart);
  dashboard.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="chart-column"></div>
  <div id="filter-range"></div>
</div>