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

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>