explorer

explorer

HTML

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

JavaScript

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = new google.visualization.DataTable();
      data.addColumn('date', '日');
      data.addColumn('number', 'star');
      
      function getRandomInt(min, max) {
  			return Math.floor( Math.random() * (max - min + 1) ) + min;
			}

      for (var day = 1; day < 360; ++day) {
    		var date = new Date(2015, 0 ,day);
    		data.addRow([date, getRandomInt(0, 2000)]);
			}

      var options = {
        tooltip: {
          trigger: 'none'
        },
        explorer: {
          actions: ['dragToZoom', 'dragToPan', 'rightClickToReset'] ,
          // actions: ['dragToPan', 'rightClickToReset'],
          axis: 'horizontal',
			    maxZoomOut:2,
			    //keepInBounds: true,
          zoomDelta: 2.5
		    }
      };

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

      chart.draw(data, options);
    }