Google Charts Date Formats

Question

For some reason the date formatter using a pattern isn't working at all in my application. One thing that has crossed my mind is that it doesn't allow formatting for the x axis. Here's a snippet:

var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'YearMonth');
dataTable.addColumn('number', 'Beds');
dataTable.addColumn('number', 'Rooms');
var monthYearFormatter = new google.visualization.DateFormat({ pattern: "MMM yyyy" });
monthYearFormatter.format(dataTable, 0);

So elsewhere in a loop I do the following:

dataTable.addRow(d, currentRow.Beds, currentRow.Rooms]);

Where "d" is a valid date. It isn't formatted at all though, however when I do all of this, it just displays the default format.

Anyone done this before?

Answer 1

In order to format the values on the x-axis, you must use the format attribute in the options:

hAxis: { format: 'MMM yyyy' }

The line:

monthYearFormatter.format(dataTable, 0);

formats the values in the chart and must be written after the data inserting into the dataTable object.

Answer 2

@FrankyFred's answer works only for the labels over the axis and not the toolTip. If you want to format the text on the toolTip so that what you have is right:

var monthYearFormatter = new google.visualization.DateFormat({ 
     pattern: "MMM yyyy" 
}); 
monthYearFormatter.format(dataTable, 0);