Google Charts Format Date as mm:ss.00

Question

I am trying to display a graph of competitive swimming times using Google charts. Swimming uses times down to the hundredths of a second. After some work, I managed to get the times to graph using the Date object

var data = google.visualization.arrayToDataTable([
  ['Number', 'Time'],
  ['1',  new Date(2014,5,5,0,1,47,470)],
  ['2',  new Date(2014,5,5,0,1,45,880)],
  ['3',   new Date(2014,5,5,0,1,43,520)],
  ['4',   new Date(2014,5,5,0,1,40,670)]
]);

The table above represents times between 1:47.47 and 1:40.67. Next, I applied a DateFormat to the data table which has removed the date portion of the data, but I am having trouble representing the hundredths of a second portion of the time. I've tried

var timeFormatter = new google.visualization.DateFormat({ pattern: "m:ss.00" });

and

var timeFormatter = new google.visualization.DateFormat({ pattern: "m:ss.##" });

But this just results in the times on the graph displaying with either 00 or ## in the place where I would expect the hundreths to appear. The graph itself is placing the points as though it recognizes the milliseconds portion of the date object.

Is there a way to have the hundreths of a second appear when I hover the mouse over the data point.

Here's a jsFiddle of what I'm working on.

Answer 1

Try using this pattern:

pattern: "m:ss.SSS"

Now, when you hover over your data points, the correct numbers should appear. See this jsfiddle