Responsive Google Analytic Charts

Question

How can I get my charts to be Bootstrap Responsive?

You can see here, that none of them are resizing properly

I have tried setting the width to 100%, but it does not seem to follow...

<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart);
    var chart, data, options;
    function drawChart() {
        data = google.visualization.arrayToDataTable([
              ['Day', 'Views', 'Visits', 'Bounces'],
                <?php
                    foreach($rArr as $key => $value){
                        echo '["'.$key.'", '.$this->DefaultNumber($value[0]).', '.$this->DefaultNumber($value[1]).', '.$this->DefaultNumber($value[2]).'],';
                    }
                ?>
            ]);
        options = {
                width: '100%',
                height: <?php echo $height; ?>, 
                title: '<?php echo $this->initialstartdate; ?><?php echo ' - '.$this->initialenddate; ?>',
                titleTextStyle: {color: 'black', fontName: 'Calibri', 
                        fontSize: '14'},
                colors:['#333','#999', '#ccc'],
                backgroundColor: {fill: '#F5F5F5', opacity: 100},
                areaOpacity: 0.1,
                hAxis: {textPosition: 'in', 
                    showTextEvery: <?php echo $dateGap; ?>, 
                    slantedText: false, 
                    textStyle: {color: 'black', fontName: 'Calibri', 
                        fontSize: '12'}},
                vAxis: {textStyle: {color: 'black', fontName: 'Calibri', 
                        fontSize: '12'}},
                pointSize: 5,
                legend: { position: 'bottom',textStyle: {color: 'black', fontName: 'Calibri', 
                        fontSize: '12'}},
                isStacked: false
            };
        chart = new google.visualization.AreaChart(document.getElementById('<?php echo $divId; ?>'));
        chart.draw(data, options);
    }
    </script>

Wrapping Code

<div class="well">
    <div class="row">
        <div class="col-sm-12">
            <h4>Visits vs. Views vs. Bounces</h4>
            <div id="v-chart"></div>
        </div>
    </div>
</div>

Answer 1

What you need to do is to redraw the Google visualization. Add the following line at the end of your drawChart function.

window.onresize = function(){chart.draw(data, options);};

I also don't use the width and height attributes when drawing the charts. I just omit them and the charts will be scaled to fit into your target div, so you just need to scale the div correctly using css. You still need to redraw if the div changes size though.

Example

Here is an example of this working. Try to open this and resize the window. The chart should redraw and update it's size to cover all window.