viewWindow slider for columnChart?

50 views
Skip to first unread message

Sean Larson

unread,
Jan 21, 2018, 1:50:22 PM1/21/18
to Google Visualization API
I have a dynamic set of data which can end up containing several columns to display. It seems the GC API is good at scaling the bar width to fit the chartArea width, but at some point this disturbs the column titles and annotations. 

Is it possible in a ColumnChart to define a desirable viewWindow width, say 'n' columns, and the user can scroll left/right?

Daniel LaLiberte

unread,
Jan 21, 2018, 2:23:27 PM1/21/18
to Google Visualization API
The viewWindow option is for the range of data from min to max.  There is no option to specify the number of columns to show, but if your domain values are continuous (numbers) rather than discrete (strings), you could enable the explorer mode to let the user scroll by dragging the chart area.  Hope that gives you enough hints to go on.


On Sun, Jan 21, 2018 at 1:50 PM, Sean Larson <industr...@gmail.com> wrote:
I have a dynamic set of data which can end up containing several columns to display. It seems the GC API is good at scaling the bar width to fit the chartArea width, but at some point this disturbs the column titles and annotations. 

Is it possible in a ColumnChart to define a desirable viewWindow width, say 'n' columns, and the user can scroll left/right?

--
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/1ca6a8bf-9196-4f42-918d-66c1a6019030%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Sean Larson

unread,
Jan 21, 2018, 2:42:06 PM1/21/18
to Google Visualization API
Unfortunately it is not data that makes sense to display as continuous. Each bar represents a record in a scenario. So if I have 5 records and 3 scenarios, I have 15 bars. As you can see the user could quickly get into a situation where the default view is very crowded. I am thinking about removing the default "show all" on the filter controls to force the user to select something to draw, but that is not really ideal. 

Could I do something with the chart area width and container width? Like if I was to view 7 bars, and there are 14 bars, set the width to 2*viewWidth as well as for the chart container, and put the container inside of a max-width div with overflow: scroll?


Sean Larson

unread,
Jan 21, 2018, 3:08:17 PM1/21/18
to Google Visualization API
The width method I suggested does work, but I need to see about scrolling/dragging for width versus height differentiation. 

I thought this was the purpose of viewWindow, or at Least Explorer. Originally I was using something like 85% width for my chartArea in an attempt to create an adaptable page for all screen sizes, following good design practices. The problem with this is the API will try to jam all columns into that 85%, no matter what the screen size. 

Since this is a Google API, a company who penalizes websites for not being flexible, it seems appropriate that the API should have some solution for this problem. Such as setting a viewWindow size and panning. 

Daniel LaLiberte

unread,
Jan 21, 2018, 3:58:15 PM1/21/18
to Google Visualization API
Explorer mode is the only alternative at this time to get scrolling/panning behavior.  Your discrete values could be replaced with numbers if you then also specify the formatted representation of each value, and also specify explicit ticks and their formatted representations.

--
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.

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

Sean Larson

unread,
Jan 21, 2018, 4:30:54 PM1/21/18
to google-visua...@googlegroups.com
Alright. I can give that a shot. I guess I could set the value as 1, 2, 3 etc. But I do not want to display these values as the domain text. I think the documentation mentioned a way to add rows like this but it might be different then my current technique. Will take a look.

On Jan 21, 2018 2:58 PM, "'Daniel LaLiberte' via Google Visualization API" <google-visua...@googlegroups.com> wrote:
Explorer mode is the only alternative at this time to get scrolling/panning behavior.  Your discrete values could be replaced with numbers if you then also specify the formatted representation of each value, and also specify explicit ticks and their formatted representations.
On Sun, Jan 21, 2018 at 3:08 PM, Sean Larson <industr...@gmail.com> wrote:
The width method I suggested does work, but I need to see about scrolling/dragging for width versus height differentiation. 

I thought this was the purpose of viewWindow, or at Least Explorer. Originally I was using something like 85% width for my chartArea in an attempt to create an adaptable page for all screen sizes, following good design practices. The problem with this is the API will try to jam all columns into that 85%, no matter what the screen size. 

Since this is a Google API, a company who penalizes websites for not being flexible, it seems appropriate that the API should have some solution for this problem. Such as setting a viewWindow size and panning. 

--
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.



--

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/hX8vmDObPSI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

Sean Larson

unread,
Jan 22, 2018, 1:04:46 PM1/22/18
to Google Visualization API
Hi Dan,

I tried the suggested method and it kind of works, but no better than keeping the string domain and playing with the width, which I have to do anyways with the suggested method. All the API provides is the drag functionality which I can implement through jQ. Will play around with it some more though.

I think the functionality I am after is similar to the effect of the "ChartRangeFilter"; the chart is a fixed width within the page, but what is rendered within that width is dynamic. I wonder if I could implement this along with your suggestion...

Another comparison is the NumberRangeFilter, but if it let me drag the space between the thumbs, kind of like the Silverlight charts, shudder. 

If the ChartRangeFilter does not work, I think I am going to:
  • Set a fixed min width that I want each column to render as, and determine the chartArea width dynamically. Not sure how to integrate this with the CategoryFilter though. This guarantees a constant width but User must still scroll/drag. This reminds me of the old method used to generate a PNG file to store on server and dynamically link to it!
  • or...
  • Concat my two strings and set them as 90 degree rotated domain text, hide the source text as annotations, and change the chartHeight dynamically. This guarantees text is always readable, but column width could get very small in my scenario assuming the chartArea uses a %
I am just posting this so you have a user story, and understand how some features are being used in practical cases. Thanks for being active!
Reply all
Reply to author
Forward
0 new messages