title: Google Charts: How to set Column max value and without big gap in between. (Columns)
body: <p>Current I am using  "Top-X Chart" format to code out.<br>
  <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#data-format" rel="nofollow">https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#data-format</a></p>
  
  <p>However I would like to set the Y-axis Highest value 2000 and display it out, instead of following the Data I added in.<br><br>
  Second Problem, by using this format there have a big gap in between, I want them to shown side by side. How should I do it?
  Below is my code: </p>
  
  <pre><code>https://jsfiddle.net/wacy5mvv/
    google.load("visualization", "1.1", {packages:['corechart',"bar"]});
        google.setOnLoadCallback(drawStuff);
  
        function drawStuff() {
          var data = new google.visualization.arrayToDataTable([
            ['date', 'pax'],
            ["12-05-2015", 60],
            ["12-06-2015", 31],
            ['12-06-2017', 3]
          ]);
  
          var options = {
            title: 'Report Chart',
            width: 900,
            legend: { position: 'none' },
            chart: { subtitle: 'Number Of Pax' },
            axes: {
              x: {
                0: { side: 'bottom', label: 'Date'} // Top x-axis.
              }
            },
            bar: { groupWidth: "10%" }
          };
  
          var chart = new google.charts.Bar(document.getElementById('top_x_div'));
          // Convert the Classic options to Material options.
          chart.draw(data, google.charts.Bar.convertOptions(options));
        };
  </code></pre>
  
  <p><br><br>
  I Know by using this google chart will be more useful for me however I not really understand the code:<a href="https://jsfiddle.net/u6fdbd6L/1/" rel="nofollow">https://jsfiddle.net/u6fdbd6L/1/</a> <br><br>e.g. 
  <br>-Unable to understand why the v,min and max got 3 argument 
  <br>-when I change the format to string got some problem.
  etc</p>
  
  <pre><code>google.load('visualization', '1', {packages: ['corechart', 'bar']});
  google.setOnLoadCallback(drawBasic);
  
  function drawBasic() {
  
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Motivation Level');
  
        data.addRows([
          [{v: [8, 0, 0], f: '19-08-2014'}, 1],
          [{v: [9, 0, 0], f: '19-08-2014'}, 2],
          [{v: [10, 0, 0], f:'19-08-2014'}, 3],
          [{v: [11, 0, 0], f: '19-08-2014'}, 4]
        ]);
  
        var options = {
          title: 'Motivation Level Throughout the Day',
          hAxis: {
            title: 'Time of Day',
            format: 'h:mm a',
            viewWindow: {
              min: [7, 30, 0],
              max: [17, 30, 0]
            }
          },
          vAxis: {
            title: 'Number of Pax'
          }
        };
  
        var chart = new google.visualization.ColumnChart(
          document.getElementById('chart_div'));
  
        chart.draw(data, options);
      }
  </code></pre>