Re: Changing the Format of a ChartRangeFilter Date Axis

[asgallant]

Set the ui.chartOptions.hAxis.format option of the range filter to "MM/dd"

On Monday, August 27, 2012 2:34:06 PM UTC-4, rubyminer wrote:

Hi,

Previously, I was using a regular ColumnChart (not embedded in a dashboard) with dates as the domain and I was able to use the hAxis.format attribute to change the format for displaying dates. I have since upgraded to a dashboard because I want to use a ChartRangeFilter control like the one in the example ( https://code.google.com/apis/ajax/playground/?type=visualization#chartrangefilter_control ). However, as in the example, I'm converting the first column from 'date' to 'string' (if I keep it as a date column, the horizontal axis boundaries chop off the first and last columns on the first and last dates), so changing the hAxis.format attribute no longer has any effect. Rather than showing up like "03/15", the dates show up like "Mar 15, 2012" which is not ideal. I'm not familiar with the getFormattedValue() function that gets called in this code:

         {
           'calc': function(dataTable, rowIndex) {
             return dataTable.getFormattedValue(rowIndex, 0);
           },
           'type': 'string'
         }

but is there a way I can pass in the format string in that call, or do something else to get the dates on the horizontal axis to be formatted as MM/dd?

Thanks in advance for any help you can provide.

[rubyminer]

That's not what I'm hoping to do. I want to format the dates that are displayed on the horizontal axis of the actual column chart. What you suggested changes the date format on the control, not the chart (and that only works because in the control columns we don't convert the first one from date to string). As mentioned, if I could pass in the format I want ('MM/dd') to the getFormattedValue() call, that would be sufficient, but I don't think you can do that. I'm just hoping that there is an equivalent way to choose the formatting before all the dates get turned into strings.

[asgallant]

Oh, yeah, you can do that.  Use a DateFormatter on the date column before converting to a string:

var dateFormatter = new google.visualization.DateFormat({pattern: 'MM/dd'});
dateFormatter.format(dataTable, dateColumnIndex); 

Then, when you call the #getFormattedValue method of the dataTable, it will return the date formatted in this way.

[asgallant]

As an aside, there is a downside to converting your dates to strings if your dates aren't all evenly spaced: when using strings for the axis values, all data points will be evenly spaced, so if you have the dates '01/01', '01/07', and '01/30', they will all be evenly spaced even though the first two are 6 days apart and the second two are 23 days apart.

[rubyminer]

Excellent, thank you. I knew there'd be an easy way to do it. And for my chart the dates will always be evenly spaced so that's not an issue, but thanks for mentioning it.

[Ji Joe]

Could you share me the method?I also have some similar problems.Thank you

在 2012年8月28日星期二UTC+8上午6时54分41秒，rubyminer写道：