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.

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?

Th开发者_开发技巧e 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

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)

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.