google visualization chart, size in percentage

Question

How do you set the size of a google chart in percentage : I have this in the html:

<div id="chart_div" width="90%" height="20%"></div> 

and no width nor height in the options in the js.

But the chart size doesn't adapt to the viewport.

Answer 1

First, use styles to set your dimensions, not attributes:

<div id="chart_div" style="width: 90%; height: 20%;"></div> 

The chart will draw to the size of the div by default, but the charts are not responsive. You have to hook a "resize" event handler to the window (or other element if you are resizing within a window) that redraws the chart:

function resizeChart () {     chart.draw(data, options); } if (document.addEventListener) {     window.addEventListener('resize', resizeChart); } else if (document.attachEvent) {     window.attachEvent('onresize', resizeChart); } else {     window.resize = resizeChart; } 

Answer 2

By multiplying with appropriate factor to $(window).width() or $(window).height() in the chart options

var options = {         width: $(window).width(),         height: $(window).height()*0.75 };