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

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

could you possibly share a sample of the data? are you certain the first column in the data table used to draw the chart is a date? — WhiteHat
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 — Ibraheem Ibraheem
not sure, what is the result of --> console.log(aggData.getColumnType(0)); -- also, please check hAxisTicks.length — WhiteHat
Hmm, console.log(aggData.getColumnType(0)) --> 'date' console.log(hAxisTicks.length); --> 0 (surprising) console.log(dateRange.min.getFullYear()); --> 2019 console.log(dateRange.min.getMonth()); --> 9 console.log(dateRange.max.getFullYear()); --> 2020 console.log(dateRange.max.getMonth()); --> 0 i think I need to range the month from dateRange.min.getMonth() to some max for the any given year y which I can't figure out. I know those two for loops are wrong — Ibraheem Ibraheem
so the inner for loop doesn't execute (duh) because the max month in the range is Jan 2020 (so largest month value is 0) and min month in the range is Oct 2019 (so the min value is 9). And since the min value is greater than the max value it doesn't even run for(var m = dateRange.min.getMonth(); m <= dateRange.max.getMonth(); m = m + 1) — Ibraheem Ibraheem

WhiteHat WhiteHat · Accepted Answer · 2020-01-07T18:20:19

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

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

1 Answers