Chart Range Filter - hAxis label positions

719 views
Skip to first unread message

Shivani Kanakhara

unread,
Aug 19, 2014, 9:13:49 AM8/19/14
to google-visua...@googlegroups.com
Cannot position the labels on hAxis of Chart Range Filter control. The current position of labels seems a bit confusing on the first sight . E.g. the section for the date label is on its right side. Can't we position the labels outside the hAxis of the filter control as it is in the chart? There is a property 'textPosition' with values 'in','out','none'. But setting textPosition:out does not work. Is there any other way to position the labels outside the chart range filter?

I have attached a snap showing current label positions.
ChartRangeFilter.bmp

Daniel LaLiberte

unread,
Aug 19, 2014, 9:43:25 AM8/19/14
to google-visua...@googlegroups.com
Did you try using it like this:

options:  { ui: chartOptions: { hAxis: { textPosition: 'out' } } }



On Tue, Aug 19, 2014 at 9:13 AM, Shivani Kanakhara <shivani...@gmail.com> wrote:
Cannot position the labels on hAxis of Chart Range Filter control. The current position of labels seems a bit confusing on the first sight . E.g. the section for the date label is on its right side. Can't we position the labels outside the hAxis of the filter control as it is in the chart? There is a property 'textPosition' with values 'in','out','none'. But setting textPosition:out does not work. Is there any other way to position the labels outside the chart range filter?

I have attached a snap showing current label positions.

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Shivani Kanakhara

unread,
Aug 19, 2014, 10:07:54 AM8/19/14
to google-visua...@googlegroups.com
Yes i did try using that option. It doesn't work. textPosition:out and textPosition:none works same. No labels displayed.

var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,                    
                    chartArea: {
                        width: '75%' 
                    },
                    hAxis : { textPosition:'out'}
                }
               
            }
             
        }
    });

On Tuesday, August 19, 2014 7:13:25 PM UTC+5:30, Daniel LaLiberte wrote:
Did you try using it like this:

options:  { ui: chartOptions: { hAxis: { textPosition: 'out' } } }

On Tue, Aug 19, 2014 at 9:13 AM, Shivani Kanakhara <shivani...@gmail.com> wrote:
Cannot position the labels on hAxis of Chart Range Filter control. The current position of labels seems a bit confusing on the first sight . E.g. the section for the date label is on its right side. Can't we position the labels outside the hAxis of the filter control as it is in the chart? There is a property 'textPosition' with values 'in','out','none'. But setting textPosition:out does not work. Is there any other way to position the labels outside the chart range filter?

I have attached a snap showing current label positions.

--
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.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

Daniel LaLiberte

unread,
Aug 19, 2014, 10:10:48 AM8/19/14
to google-visua...@googlegroups.com
Ah, well the problem is probably that there is no space outside the chart area for the axis labels.  You'll have to also experiment with the height, chartArea.height, and chartArea.top options to leave enough space on the bottom for the axis labels.


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

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Shivani Kanakhara

unread,
Aug 20, 2014, 2:17:30 AM8/20/14
to google-visua...@googlegroups.com
Hello, i tried changing the chartArea options (height,top,bottom)..still cannot get to display the label outside the range filter.

anuj joshi

unread,
Aug 20, 2014, 4:32:17 AM8/20/14
to google-visua...@googlegroups.com
hey can you provide me the source code for the chart.

Daniel LaLiberte

unread,
Aug 20, 2014, 8:16:33 AM8/20/14
to google-visua...@googlegroups.com
I set the control's ui.chartOptions.chartArea.height and increased the height, and it seems to work fine: http://jsfiddle.net/dlaliberte/0wb2zvye/


--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Shivani Kanakhara

unread,
Aug 20, 2014, 9:54:11 AM8/20/14
to google-visua...@googlegroups.com
Ok thanks. Can we do the same for Annotation Charts??


On Wednesday, August 20, 2014 5:46:33 PM UTC+5:30, Daniel LaLiberte wrote:
I set the control's ui.chartOptions.chartArea.height and increased the height, and it seems to work fine: http://jsfiddle.net/dlaliberte/0wb2zvye/
On Wed, Aug 20, 2014 at 2:17 AM, Shivani Kanakhara <shivani...@gmail.com> wrote:
Hello, i tried changing the chartArea options (height,top,bottom)..still cannot get to display the label outside the range filter.
Check this-  http://jsfiddle.net/shivani_1001/8yygoyak/



On Tuesday, August 19, 2014 6:43:49 PM UTC+5:30, Shivani Kanakhara wrote:
Cannot position the labels on hAxis of Chart Range Filter control. The current position of labels seems a bit confusing on the first sight . E.g. the section for the date label is on its right side. Can't we position the labels outside the hAxis of the filter control as it is in the chart? There is a property 'textPosition' with values 'in','out','none'. But setting textPosition:out does not work. Is there any other way to position the labels outside the chart range filter?

I have attached a snap showing current label positions.

--
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.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

Shivani Kanakhara

unread,
Aug 20, 2014, 10:46:45 AM8/20/14
to google-visua...@googlegroups.com
In case of Annotation Charts the labels on hAxis of range selector are on the left of the vertical gridlines.That seems a bit confusing. It is proper in case of Annotated Timeline-there the labels are to the right.

Do we have any option in Annotation Charts to position the labels?

Attached snaps showing the difference.

On Wednesday, August 20, 2014 5:46:33 PM UTC+5:30, Daniel LaLiberte wrote:
I set the control's ui.chartOptions.chartArea.height and increased the height, and it seems to work fine: http://jsfiddle.net/dlaliberte/0wb2zvye/
On Wed, Aug 20, 2014 at 2:17 AM, Shivani Kanakhara <shivani...@gmail.com> wrote:
Hello, i tried changing the chartArea options (height,top,bottom)..still cannot get to display the label outside the range filter.
Check this-  http://jsfiddle.net/shivani_1001/8yygoyak/



On Tuesday, August 19, 2014 6:43:49 PM UTC+5:30, Shivani Kanakhara wrote:
Cannot position the labels on hAxis of Chart Range Filter control. The current position of labels seems a bit confusing on the first sight . E.g. the section for the date label is on its right side. Can't we position the labels outside the hAxis of the filter control as it is in the chart? There is a property 'textPosition' with values 'in','out','none'. But setting textPosition:out does not work. Is there any other way to position the labels outside the chart range filter?

I have attached a snap showing current label positions.

--
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.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
AChart.bmp
ATimeline.bmp

Daniel LaLiberte

unread,
Aug 20, 2014, 12:50:04 PM8/20/14
to google-visua...@googlegroups.com
There is an undocumented "range" option for the AnnotationChart which you can use to control the range selector options.  For example, the following will move the tick labels to the outside position:

 { "range":
   { "ui": { "chartOptions": { 
                 "height": 80, 
                 "chartArea": { "height":60 },
                 "hAxis": { "textPosition": "out"} 
 } } }

For the "in" textPosition, there is another option that controls whether the label is to the left or right of the gridline:

  "inTextPosition": "low"  // "high" is to the right



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

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Reply all
Reply to author
Forward
0 new messages