set width to '100%' and
window.onresize = function(event) {
drawVisualization();
}
On Friday, May 10, 2013 1:28:56 PM UTC-4, Sergey wrote:
>
> 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
>
>
> On Fri, May 10, 2013 at 1:15 PM, Carlos Moreira
> <[email protected]<javascript:>
> > wrote:
>
>> 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?
>>
>> Sexta-feira, 10 de Maio de 2013 18:50:11 UTC+2, Carlos Moreira escreveu:
>>
>>> 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.
>>>
>>> Sexta-feira, 10 de Maio de 2013 16:03:34 UTC+2, Sergey escreveu:
>>>>
>>>> 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
>>>>
>>>>
>>>> On Fri, May 10, 2013 at 9:58 AM, Susanna Murley <[email protected]>wrote:
>>>>
>>>>> 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<http://twitter.com/susannamurley>
>>>>> >
>>>>>
>>>>>
>>>>>
>>>>> On Fri, May 10, 2013 at 9:35 AM, Sergey Grabkovsky
>>>>> <[email protected]>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
>>>>>> <[email protected]>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+**
>>>>>>> [email protected].
>>>>>>>
>>>>>>> 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<http://groups.google.com/group/google-visualization-api?hl=en>
>>>>>>> .
>>>>>>> For more options, visit
>>>>>>> https://groups.google.com/**groups/opt_out<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<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+**[email protected].
>>>>>>
>>>>>> 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<http://groups.google.com/group/google-visualization-api?hl=en>
>>>>>> .
>>>>>> For more options, visit
>>>>>> https://groups.google.com/**groups/opt_out<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+**[email protected].
>>>>> 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<http://groups.google.com/group/google-visualization-api?hl=en>
>>>>> .
>>>>> For more options, visit
>>>>> https://groups.google.com/**groups/opt_out<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 [email protected]<javascript:>
>> .
>> To post to this group, send email to
>> [email protected]<javascript:>
>> .
>> 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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
