How to change tick value GOOGLE CHARTS

问题

This is my column chart

What I want is to change tick 4th to be what ever value that is in the database, which I have set in a variable $dancerplace. so for this question's sake, I want the place to look like it's in 4th place like in the image, but visually it should be 9th.

And for 5th it should always be 60th. so if anyone gets a place between 4 and 60 the gold column should adjust between those two ticks. I want it to look as it does in the picture.

When I add 60 ticks then the green columns are all too close together without a noticeable gap between the ticks, see pic below

Here is my code:

 // 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);
}

Is this possible?

回答1:

After playing around with the code I finally figured out how to get it to work see my answer

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 charts

<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>

Now the tick right above 60th will change depending on what is in the $newtick variable.

My chart looks like this now.

来源：https://stackoverflow.com/questions/52646815/how-to-change-tick-value-google-charts