Re-size the Google Charts in my Code

[Shaun O'Connor]

I have been using google charts to display information on a 42" TV, However I want to resize some of the graphs to display on 100% of the screen instread of using px. THis will allow the Charts to be view on smaller screens. I was wondering in I put this in the JS or in the CSS.

Thanks shaun

[Todd Levy]

On Tuesday, September 3, 2013 5:22:18 AM UTC-4, Shaun O'Connor wrote:

I have been using google charts to display information on a 42" TV, However I want to resize some of the graphs to display on 100% of the screen instread of using px. THis will allow the Charts to be view on smaller screens. I was wondering in I put this in the JS or in the CSS.

Thanks shaun

Here are two examples of charts that will fill the containing div...

• Responsive Google Pie Chart
• Responsive Google Bar Chart

What you'll need to do to make it work for you...

1) Change the width of the body tag CSS to 100%

2) Change the margin of the body  tag CSS to 0 auto

3) Change the bottom padding of visualization_wrap to match the aspect ratio of your display 

Calculate as Height / Width x 100, so for a 16x9 display it would be 9/16 = 0.5625 x 100 = 56.25%

4) As needed, fiddle with the "chartArea" options to ensure that your labels don't get cut off

NOTE: These work with jquery.throttledresize.js to support responsive design, which it seems you don't need (though others may appreciate).

Hope that helps,

Todd Levy

[Shaun O'Connor]

Hi, Cheers, Just for my own info...
Will it work on the timeline chart?

[Todd Levy]

Seems it will only work for the width.

See fiddle here... Responsive Google Timeline Visualization

The timeline doesn't support the "chartArea" configuration option, and the "height" configuration option (which only supports pixel based measures) only seems to be able to make it smaller (read: shorter) than the containing div.

Again, hope that helps,

Todd Levy