title: Google Charts dual x-axis different ticks
body: <p>I'm trying to generate a Google chart Bars with dual x-axis and different tick but no luck, here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>google.load('visualization', '1.1', {packages: ['corechart', 'bar']});
  google.setOnLoadCallback(drawRightY);
  
  function drawRightY() {
      var data = google.visualization.arrayToDataTable([
          ['City', '2010', '2000'],
          ['NY', 81, 80],
          ['CA', 37, 36],
          ['IL', 26, 28],
          ['TX', 20, 19],
          ['PA', 15, 15]
      ]);
      var options = {
          chartArea: {
              width: '100%'
          },
          hAxes: {
              0: {
                  viewWindow: {
                      max: 100,
                      min: 0
                  },
                  ticks: [{
                      f: 'A1',
                      v: '3.3'
                  }, {
                      f: 'A2',
                      v: '10'
                  }, {
                      f: 'A3',
                      v: '16.7'
                  }, {
                      f: 'A4',
                      v: '23.3'
                  }, {
                      f: 'A5',
                      v: '30'
                  }, {
                      f: 'A6',
                      v: '36.7'
                  }, {
                      f: 'A7',
                      v: '43.4'
                  }, {
                      f: 'A8',
                      v: '50'
                  }, {
                      f: 'A9',
                      v: '56.7'
                  }, {
                      f: 'A10',
                      v: '63.4'
                  }, {
                      f: 'A11',
                      v: '70'
                  }, {
                      f: 'A12',
                      v: '76.7'
                  }, {
                      f: 'A13',
                      v: '83.4'
                  }, {
                      f: 'A14',
                      v: '90'
                  }, {
                      f: 'A15',
                      v: '96.7'
                  }]
              },
              1: {
                  side: 'top',
                  viewWindow: {
                      max: 100,
                      min: 0
                  },
                  ticks: [10, 30, 50, 70, 90]
              }
          },
          series: {
              0: {
                  targetAxisIndex: 0
              },
              1: {
                  targetAxisIndex: 1
              }
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          colors: ['#FFB74D', '#FFE0B2'],
          bar: {
              groupWidth: "80%"
          },
          legend: {
              position: 'none'
          }
      };
      var chart = new google.visualization.BarChart(document.getElementById('barchart'));
      chart.draw(data, options);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;div id="barchart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The thing is that i need the second series axis to be on top of the chart and the first one in the bottom, its supposed to work with the "side" tag but not working.</p>