Write A Custom Formatter For Google Charts Api

I want to create a chart to display my time over a 10k run. Everything is working as it should, the only problem that I have is, that I want to format how the time is displayed. Cu

Solution 1:

Use a DateFormat with a custom pattern. E.g.:

google.visualization.DateFormat({pattern: "mm:ss.SSS"});

The caveat is that this displays the time-of-day of a JS Date object, so you'll need to provide your run times as JS dates. So either specify the actual time-of-day at which your data was sampled. Or, if you want to just show the relative time since the start of your run, you could do something like this:

new Date(new Date('Jan 01 2000').getTime() + sampleTime)

... where sampleTime is the time of each sample point in milliseconds. (This just sets the time as milliseconds since midnight 01/01/2000, so the hour/minute/second will reflect your run time)

Solution 2:

Came across a similar issue with a geochart where had total seconds and needed to show it as hh:mm:ss. Couldn't manage that but I was able to get it to mm:ss which was acceptable

I converted the total seconds to a decimal as mm.ss. e.g. 200 seconds is 3:20 so I labelled this as 3.20 and passed the value to the chart as that and then on the geochart I used a number formatter to use : as the decimal formatter

var formatter = new google.visualization.NumberFormat({
    decimalSymbol: ':'
});

The default decimal places is 2 so it appeared as 3:20.