Как изменить значение тика GOOGLE CHARTS

Question

Это мой столбчатый график

Я хочу изменить тик 4 на то, что всегда будет значением в базе данных, которое яустановили в переменную $dancerplace.так что ради этого вопроса я хочу, чтобы это место выглядело как 4-е, как на картинке, но визуально оно должно быть 9-м.

А для 5-го всегда должно быть 60-е.поэтому, если кто-то получит место между 4 и 60, золотая колонка должна подстроиться между этими двумя отметками.Я хочу, чтобы это выглядело так, как на картинке.

Когда я добавляю 60 тиков, зеленые столбцы расположены слишком близко друг к другу без заметного разрыва между тиками, см. Рис. Ниже

Вот мой код:

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

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

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  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);
}

Возможно ли это?

Answer 1

После игры с кодом я наконец понял, как заставить его работать, смотри мой ответ

PHP

<?php
if(isset($_GET['id'])){
$childId=$_GET['id']; 
$chartsql = "SELECT `dancer_name`, `comp_entered`, `comp_lvl` `placement`, `dance_name` FROM `competition` WHERE id = '$childId'";
$chartres = mysqli_query($con,$chartsql);
$chartrow=mysqli_fetch_assoc($chartres);
    $dancerName = $chartrow["dancer_name"];
    $compName = $chartrow["comp_entered"];
    $compLvl = $chartrow["comp_lvl"];
    $placement = $chartrow["placement"];
    $danceName = $chartrow["dance_name"];
}
?>

$placement_num = intval($placement);

Google-диаграммы

<script type="text/javascript">

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

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

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {
     var maxPlace = 6;
     <?php
   if ($placement_num >=5 && $placement_num <=26) {
     $placement_num = 5;
       $newtick = intval($placement);
    } else if ($placement_num >=27 && $placement_num <=60) {
       $placement_num = 6;
   }
        ?> 

var data = google.visualization.arrayToDataTable([
['Competitors', 'Competitors', {type: 'string', role: 'style'}, {type: 'string', role: 'tooltip'}],

<?php

  echo "['$dancerName', $placement_num, 'color: #D4AF37', '$dancerName\'s ranking Placement: $placement Overall Placement: 3%'],";
  echo "['1st Pl Winner', 1, 'color: #91b224', '1st Place Winner Overall Placement: 1.6%'],";
  echo "['2nd Pl Winner', 2, 'color: #91b224', '2nd Place Winner Overall Placement: 3%'],";
  echo "['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 = 1; 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;

<?php
        echo "case '5':
                place = '$newtick';
                place += 'th';
                break;
            ";

?>

    case '6':
      place += '0th';
      break;

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

var options = {
  <?php echo "title: '$compName - $compLvl  - $danceName',";?>
  width: 720,
  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);
}
</script>

Теперь отметка прямо над 60-й будет меняться в зависимости от того, что находится в переменной $newtick.

Теперь мой график выглядит так.