How to show only ticks that are in the array google charts

Question

I have a line chart where user can see where they got in a competition over the years. There is up to 60th place. I will be filling this data from the database.

The problem is that all 60 places are shown on the y axis when I only want it to show 1, 15, 30, 45 , 60

I believe this is happening because I have the ticks changed from 1 to 1st place on the y axis, as this is better for user experience.

but since I am pulling from the database all 60 ticks need to be there. Though on the graph I actually want ticks to show every 15.

Heres my code:

// Callback that draws line chart for progress report
  function drawLineChart() {
    var data = google.visualization.arrayToDataTable([
      ['Date', 'Orouke', 'feis nara'],
      ['2014',  1,      4],
      ['2015',  11,      46],
      ['2016',  60,       11],
      ['2017',  10,      5]
    ]);

    var options = {
      title: 'Progress Report',
      width: 600,
      height: 550,
      legend: { position: 'bottom' },
      vAxis: { title: 'Competition Placement', 
              direction: -1, 
              gridlines: {count: 10}, 
              ticks: [{ v: 1, f: '1st Place'}, {v: 2, f: '2nd Place'}, {v: 3, f: '3rd Place'}, {v: 4, f: '4th Place'}, {v: 5, f: '5th Place'}, {v: 6, f: '6th Place'}, {v: 7, f: '7th Place'}, {v: 8, f: '8th Place'}, {v: 9, f: '9th Place'}, {v: 10, f: '10th Place'}, {v: 11, f: '11th Place'}, { v: 12, f: '12th Place'}, {v: 13, f: '13th Place'}, {v: 14, f: '14th Place'}, {v: 15, f: '15th Place'}, {v: 16, f: '16th Place'}, {v: 17, f: '17th Place'}, {v: 18, f: '18th Place'}, {v: 19, f: '19th Place'}, {v: 20, f: '20th Place'}, {v: 21, f: '21st Place'}, {v: 22, f: '22nd Place'}, { v: 23, f: '23rd Place'}, {v: 24, f: '24th Place'}, {v: 25, f: '25th Place'}, {v: 26, f: '26th Place'}, {v: 27, f: '27th Place'}, {v: 28, f: '28th Place'}, {v: 29, f: '29th Place'}, {v: 30, f: '30th Place'}, {v: 31, f: '31st Place'}, {v: 32, f: '32nd Place'}, {v: 33, f: '33rd Place'}, { v: 34, f: '34th Place'}, {v: 35, f: '35th Place'}, {v: 36, f: '36th Place'}, {v: 37, f: '37th Place'}, {v: 38, f: '38th Place'}, {v: 39, f: '39th Place'}, {v: 40, f: '41st Place'}, {v: 42, f: '42nd Place'}, {v: 43, f: '43rd Place'}, {v: 44, f: '44th Place'}, {v: 45, f: '45th Place'}, {v: 46, f: '46th Place'}, {v: 47, f: '47th Place'}, {v: 48, f: '48th Place'}, {v: 49, f: '49th Place'}, {v: 50, f: '51st Place'}, {v: 52, f: '52nd Place'}, {v: 53, f: '53rd Place'}, {v: 54, f: '54th Place'}, {v: 55, f: '55th Place'}, {v: 56, f: '56th Place'}, {v: 57, f: '57th Place'}, {v: 58, f: '58th Place'}, {v: 59, f: '59th Place'}, {v: 60, f: '60th Place'}] }
    };


    var chart = new google.visualization.LineChart(document.getElementById('line_chart'));

    chart.draw(data, options);
  }

NOTE: I have not used php yet because I decided to set up the chart first and then fill in php after.

Answer 1

you can build the ticks dynamically, using a for loop...

for (var i = 0; i <= 60; i = i + 15) {
  addTick(i);
}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Orouke', 'feis nara'],
    ['2014',  1,      4],
    ['2015',  11,      46],
    ['2016',  60,       11],
    ['2017',  10,      5]
  ]);

  // build ticks
  var ticks = [];
  for (var i = 0; i <= 60; i = i + 15) {
    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,
    legend: {
      position: 'bottom'
    },
    vAxis: {
      title: 'Competition Placement',
      direction: -1,
      gridlines: {count: 10},
      ticks: ticks
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_chart"></div>