Flexible way to display a geochart?

[Susanna Murley]

I would like to display a geochart at 100% width on the page, but the code doesn't allow percentages in the width, only pixels. Is there a way to do this? Basically, I want it to be flexible for different types of screens. 

Best,

Susanna

[Sergey Grabkovsky]

Hello, the code actually does support percentages in width and height. You can do this by specifying the option as width:"100%". The tricky part here is that the geochart likes to preserve its aspect ratio, so you need to change your height in accordance with your width.

- Sergey

--
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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Susanna Murley]

Hm...maybe I'm doing something wrong then. this is my code: 

        var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));

        var options = {};

        options['region'] = 'US';

        options['resolution'] = 'provinces';

        options['width'] = 100%;

options['legend'] = 'none';

        options['colorAxis'] = {minValue: 0,  colors: ['#ddeef8', '#a3d6fb','#0078c0', '#ffe04e', '#f8931f', '#d54215',]}

   

---
Susanna Murley
skype: susannamurley
@susannamurley <http://twitter.com/susannamurley>

--
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/rV7zBc4Jzlo/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

Note also that this width is fixed at the time the chart is drawn; if the window shrinks or expands (or a phone user rotates the screen), the chart will not change size.

On Friday, May 10, 2013 9:35:45 AM UTC-4, Sergey wrote:

Hello, the code actually does support percentages in width and height. You can do this by specifying the option as width:"100%". The tricky part here is that the geochart likes to preserve its aspect ratio, so you need to change your height in accordance with your width.

- Sergey

On Fri, May 10, 2013 at 9:33 AM, Susanna Murley <susann...@gmail.com> wrote:

I would like to display a geochart at 100% width on the page, but the code doesn't allow percentages in the width, only pixels. Is there a way to do this? Basically, I want it to be flexible for different types of screens. 

Best,

Susanna

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

[Sergey Grabkovsky]

You need to specify the percentage as a string. JavaScript doesn't natively support percentage values. I'm surprised that what you wrote doesn't result in a syntax error. The syntactically correct version of this would be:

        var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));

        var options = {};

        options['region'] = 'US';

        options['resolution'] = 'provinces';

        options['width'] = '100%';

options['legend'] = 'none';

        options['colorAxis'] = {minValue: 0,  colors: ['#ddeef8', '#a3d6fb','#0078c0', '#ffe04e', '#f8931f', '#d54215',]}

- Sergey

[Susanna Murley]

sigh. yes, that was my bug. Thanks!

---
Susanna Murley
skype: susannamurley
@susannamurley <http://twitter.com/susannamurley>

[Carlos Moreira]

I've also learned that when I leave the width and height settings blank the chart draws with the available space, so at 100%.
To bad the chart doesn't adapt and keeps the fixed size after being drawn, like asgallant mentioned. It would be an awesome feature with all the responsive layouts out there.

- Sergey

- Sergey

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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
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/rV7zBc4Jzlo/unsubscribe?hl=en.

To unsubscribe from this group and all its topics, 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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

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

[Carlos Moreira]

Actually, I went now to the google code Playground to test this out, but I can't get the percentage to work. I mean, even if I put 20%, the map always draws at 100%.
Example:

 geochart.draw(data, {width: '20%'});

http://jsfiddle.net/cmoreira/TRnY7/

Is it because of the height?

[asgallant]

It should, in theory, be possible to make the charts compatible with responsive design (at least the SVG versions), but that may involve extensive refactoring of the code base, so I would suggest filing a feature request (here).  

[asgallant]

You are correct, it seems the GoeCharts are ignoring percentage-based dimensions.

[Sergey Grabkovsky]

My mistake, there is actually no way to do a percentage-based size in any of our charts. But it's a reasonable feature, so we'll look into providing that in the future.

- Sergey

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

[Jamie Akhtar]

set width to '100%' and

window.onresize = function(event) {

    drawVisualization();

- Sergey

- Sergey

- Sergey

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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
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/rV7zBc4Jzlo/unsubscribe?hl=en.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Jen Grygiel]

Hi all, I'm struggling with this as well.

I tried the following but the geo chart isn't resizing in a responsive way and looks terrible on mobile.

<iframe src="https://docs.google.com/spreadsheets/d/1wwOzm-g_eXDad6FwrXrKYe2Yiaw_uhh7-ZKHcT5dYUs/pubchart?oid=962372486&amp;format=interactive" width="100%" height="371" frameborder="0" scrolling="no" seamless="" window.onresize = function(event) {
    drawVisualization();></iframe>

What am I doing wrong?

Thanks!

Jen