How do I add a custom tick formatter?

48 views
Skip to first unread message

vlad

unread,
Jul 28, 2017, 10:20:49 AM7/28/17
to Google Visualization API
I am currently using the following code to format my data tick labels:

`
hAxis: {
 gridlines: { count: 15 },
 slantedText: true,
 slantedTextAngle: 45,
 ticks: [{v: 1, f: "1/1/2003"}, {v: 2, f: "1/5/2003"}, ..., {v: 1, f: "#/#/####"}]
}
`

The reason for that is I am trying to create a continuous axis that shows a Date Series on a ColumnChart without displaying weekends.

The solution works, but (naturally), the number of ticks shown is fixed.  Had the chart not needed Pan/Zoom functionality, I wouldn't bother, but with zooming, even a simple algorithm to keep the number of ticks reasonable fails.

Is there any way to just specify a formatter function instead of writing `ticks: [{f: 'FORMAT'}]`?

Any help on this would be much appreciated.

Daniel LaLiberte

unread,
Jul 28, 2017, 11:13:02 AM7/28/17
to Google Visualization API
You can't specify a date format in the options, but you can do the formatting yourself outside of options using a DateFormat with the formatValue() method.  See:  https://developers.google.com/chart/interactive/docs/reference#dateformat


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e65b0598-b392-43f3-9636-ecd2e376ef20%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

vlad

unread,
Jul 28, 2017, 11:37:30 AM7/28/17
to Google Visualization API
Thanks, Daniel.  I think my question was not fully clarified.

I am not trying to format the dates, I am in fact passing already formatted data.  But because I need to Pan/Zoom via explorer option, I am encountering an issue of sorts.

When I do change the data to numeric sequence (printing the formatted dates with format values) I need to do the same with Ticks.  I do NOT, however, want the number of ticks to match then number of data points.

I can accomplish something like this:
`
ticks: [
  { v: N, f: 'mm/dd/YYYY'}, ...   { v: N', f: 'mm/dd/YYYY'} }
]
`

Where [N..N'] will be a subset of data points that match IDX % (MAX(IDX)/5) == 0  for about 20% of data points.

But when zooming happens, the number of thus specified ticks remains fixed and they scroll outside of the view, but I always want to show the same number of them.

So either there is a callback for completion of Pan/Zoom operation that I could use, or I would be able to specify a formatter function to manually compute Tick value format based on the DataVew's data set.

Is there such a thing?

On Friday, July 28, 2017 at 11:13:02 AM UTC-4, Daniel LaLiberte wrote:
You can't specify a date format in the options, but you can do the formatting yourself outside of options using a DateFormat with the formatValue() method.  See:  https://developers.google.com/chart/interactive/docs/reference#dateformat

On Fri, Jul 28, 2017 at 10:20 AM, vlad <vzel...@gmail.com> wrote:
I am currently using the following code to format my data tick labels:

`
hAxis: {
 gridlines: { count: 15 },
 slantedText: true,
 slantedTextAngle: 45,
 ticks: [{v: 1, f: "1/1/2003"}, {v: 2, f: "1/5/2003"}, ..., {v: 1, f: "#/#/####"}]
}
`

The reason for that is I am trying to create a continuous axis that shows a Date Series on a ColumnChart without displaying weekends.

The solution works, but (naturally), the number of ticks shown is fixed.  Had the chart not needed Pan/Zoom functionality, I wouldn't bother, but with zooming, even a simple algorithm to keep the number of ticks reasonable fails.

Is there any way to just specify a formatter function instead of writing `ticks: [{f: 'FORMAT'}]`?

Any help on this would be much appreciated.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.



--

Daniel LaLiberte

unread,
Jul 28, 2017, 12:04:03 PM7/28/17
to Google Visualization API
So first of all, with the ticks option, you only get to specify a fixed set of ticks.  That means that if you zoom in, you will see fewer ticks.  So you can do what you said: "I always want to show the same number of them".    (Actually, there is a tick label elimination that happens if they would otherwise overlap, but that only happens when you have too many ticks to show, which might happen if you zoom out far enough.)

And given that you have to specify all the ticks that will be used, there is no dynamic formatting required, as there is when you don't specify the ticks option.   But then the question is how do all the formatted values in the ticks array get formatted in the first place?  I was suggesting that you could use a DateFormat, but in this case, it is not for formatting the values in the data table, but for formatting your dates that go in to the ticks array.

What you would like, I believe, is instead of the ticks option, you want a formatter function option.  Good idea, but we don't offer that yet.


To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

vlad

unread,
Jul 28, 2017, 12:43:09 PM7/28/17
to Google Visualization API
Correct, formatter function option would have been best in order to reuse DataTable data.

Thanks for your responses!

- vlad
Reply all
Reply to author
Forward
0 new messages