How to dynamically create ticks (month) in google chart? - charts

Question

Given an aggregated data table that is defined as:
aggData: [Date: date][Team: string][Score: number]
I want to plot the aggregated data with the ability to filter by year. I am using dynamic ticks on the hAxis to avoid the repeating labels problem. However, the label for the custom ticks does not appear.
I want the hAxis to display the months. My hunch is I'm not creating the ticks properly
See images below
var hAxisTicks = [];
var dateRange = aggData.getColumnRange(0);
for (var y = dateRange.min.getFullYear(); y <= dateRange.max.getFullYear(); y = y + 1) {
for(var m = dateRange.min.getMonth(); m <= dateRange.max.getMonth(); m = m + 1){
hAxisTicks.push(new Date(y,m));
}
}
var yearPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'categoryFilter_div',
options: {
filterColumnIndex: 0,
ui: {
allowTyping: false,
allowMultiple: false,
label: 'Year:',
labelStacking: 'vertical'
},
useFormattedValue: true
}
});
var lineChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 900,
height: 500,
hAxis: {
format: 'MMM',
ticks: hAxisTicks
}
}
});
aggData.sort([{ column: 0 }]);
// draw chart
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind(yearPicker, lineChart);
dashboard.draw(aggData);
<div id="dashboard_div">
<div id="categoryFilter_div"></div>
<div id="chart_div"></div>
</div>
When specifying the hAxisTicks value, the chart comes out without labels on the hAxis
Without specifying hAxisTicks the chart looks like:
i've logged the data to console using
google.visualization.dataTableToCsv(aggData)
the output is:
"Oct 1, 2019",128,0,0,0
"Nov 1, 2019",152,75,0,0
"Dec 1, 2019",0,0,23,0
"Jan 1, 2020",225,0,0,84

Answer 1

the issue with the for loop is in the month portion.
given the data you provided, the month for the min date = 9 (Oct)
however, the month for the max date = 0 (Jan)
so the month for loop does not run, because 9 > 0
instead, let's use a while loop.
var dateTick = dateRange.min;
while (dateTick.getTime() <= dateRange.max.getTime()) {
hAxisTicks.push(dateTick);
dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1);
}