Как получить уменьшающиеся числа vAxis, не переворачивая гистограмму GOOGLE CHART (С ОТВЕТОМ)

Question

РЕДАКТИРОВАТЬ С ОТВЕТОМ

Я отправляю ответ на первый вопрос, который у меня был в нижней части этого вопроса.Ответ был получен пользователем whitehat, но по какой-то причине ответ был удален.

По второму вопросу, который у меня был, я решил задать его в отдельном вопросе, который размещен здесь Как изменить значение тикаGOOGLE CHARTS

У меня есть два вопроса

У меня есть гистограмма, где я использую направление: -1, чтобы уменьшить числовые значения с числом 1 в верхней части графика и 10внизу.Но когда я делаю это, бары на гистограмме также переворачиваются вверх дном.Я хочу, чтобы начальная точка гистограммы находилась внизу графика, где 10.

Вот как это выглядит:

Мой второй вопрос: я хочу, чтобы отметки показывали 1-е, 2-е и 3-е место, а 4-е места будут зависеть от того, какие пользовательские данные

вот мой код:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
       // <?php
        ['Competitors', 'Competitors', { role: 'style' }, {type: 'string', role: 'tooltip'}],
        ['$dancerName',  2, 'color: #D4AF37', "$dancerName Placement: 2nd Place Overall Placement: 3%"],
        ['1st Pl Winner',  1, 'color: #91b224', "1st Place Winner Overall Placement: 1.6%"],
        ['2nd Pl Winner',  2, 'color: #91b224', "2nd Place Winner Overall Placement: 3%"],
        ['3rd Pl Winner',  3, 'color: #91b224', "3rd Place Winner Overall Placement: 5%"]

      // ?>
  ]);

  // build ticks
  var ticks = [];
  for (var i = 0; i <= 10; i = i + 3) {
    addTick(i);
  }
  function addTick(i) {
    var place;
    var digit;
    if (i === 0) {
      i = 1;
    }
digit = i.toString().substr(i.toString().length - 1);
switch (digit) {
  case '1':
    place = 'st';
    break;

  case '2':
    place = 'nd';
    break;

  case '3':
    place = 'rd';
    break;

  default:
    place = 'th';
}
ticks.push({
  v: i,
  f: i + place
});
}

var options = {
title: 'Progress Report',
width: 600,
height: 550,
tooltip: {isHtml: true},
colors: ['#91b224'],
legend: {
  position: 'bottom'
},
vAxis: {
  title: 'Competition Placement',
  direction: -1,
  gridlines: {count: 10},
  ticks: ticks
}
};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

ОТВЕТНЫЙ КОД:

 function drawChart() {
    var maxPlace = 4;

  var data = google.visualization.arrayToDataTable([
    ['Competitors', 'Competitors', {type: 'string', role: 'style'}, 
{type: 'string', role: 'tooltip'}],
['$dancerName', 4, 'color: #D4AF37', "$dancerName Placement: 2nd Place Overall Placement: 3%"],
['1st Pl Winner', 1, 'color: #91b224', "1st Place Winner Overall Placement: 1.6%"],
['2nd Pl Winner', 2, 'color: #91b224', "2nd Place Winner Overall Placement: 3%"],
['3rd Pl Winner', 3, 'color: #91b224', "3rd Place Winner Overall Placement: 5%"]
  ]);

 var view = new google.visualization.DataView(data);
 view.setColumns([0, {
calc: function (dt, row) {
  var place = dt.getValue(row, 1);
  return (maxPlace - place + 1);
},
type: data.getColumnType(1),
label: data.getColumnLabel(1)
}, 2, 3]);

 var ticks = [];
for (var i = 0; i <= maxPlace; i = i + 1) {
addTick(i);
}

function addTick(i) {
var place = (maxPlace - i + 1).toFixed(0);
switch (place.substr(place.length - 1)) {
  case '1':
    place += 'st';
    break;

  case '2':
    place += 'nd';
    break;

  case '3':
    place += 'rd';
    break;


  default:
    place += 'th';
}
ticks.push({
  v: i,
  f: place
});
}



var options = {
title: 'Progress Report',
width: 600,
height: 550,
tooltip: {
  isHtml: true
},
colors: ['#91b224'],
legend: {
  position: 'bottom'
},
vAxis: {
//  baseline: 1,
  title: 'Competition Placement',
  ticks: ticks
}
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}