Question

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.

Currently the time is displayed as a number which represents the seconds. For example a 30 minute run comes down to 10800 seconds. The formatters provided by google do cover a lot of stuff, but I’m not really happy with what they provide.

http://code.google.com/apis/chart/interactive/docs/reference.html#formatters

Sadly there is no information on how to implement your own formatter. Is there any chance I can extend a formatter or is there an interface that needs to be implemented?

The first thing I would do would do parse the number 10800 to a nice time like 30:00.00 (30 minutes, 0 seconds, 0 millisecons).
Maybe this is already possible with a patternformatter, but i don’t see how, as there is calculating involved and don’t know how to implement this in the patternformatter.

Thank you for your help.
Johnny

Answer 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)