6

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

Johnnycube
  • 1,060
  • 1
  • 10
  • 25
  • Although it wasn't necessary here, there is a great answer on writing custom formatters [here](http://stackoverflow.com/questions/7286368/how-to-write-a-custom-formatter-for-google-datatables-for-use-on-visualisation) – PerryW May 04 '16 at 04:23
  • Can you post the result? – Rodrigo Butzke Dec 04 '20 at 11:42

2 Answers2

3

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)

broofa
  • 37,461
  • 11
  • 73
  • 73
  • since I'm using an annotated time chart things are pretty strange when it comes to possible y values. I could not manage to use date values as y-Values and thus switched to YUI 3 Chart Api. – Johnnycube Jul 07 '11 at 11:53
  • the last bit is a nice hack! +1 for ingenuity. – Ben Gotow Dec 13 '11 at 21:25
  • How do you pass `new Date(new Date('Jan 01 2000').getTime() + sampleTime)` as json? In my application that line produces a type-mismatch as it's interpreting it as a string. – Noz Nov 15 '12 at 18:30
  • Changing the source data from a number to a date as above is one option. If this is not possible or preferred, it is possible to use a custom formatter with callback format function as explained in http://stackoverflow.com/questions/7286368/how-to-write-a-custom-formatter-for-google-datatables-for-use-on-visualisation – PaulH Jun 07 '16 at 06:36
0

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.

noelnoegdip
  • 512
  • 1
  • 7
  • 22