Google Barchart不会在我的HTML中动态调整大小

Question

I have implemented a Google barchart into m dynamic webpage (width is 100%) but when I resize my browserwindow, the barchart remains as big as it was. It only changes size when I then refresh my browser.

EDIT: THIS CODE WORKS //Add this

<script>
    $(document).ready(function () {

$( window ).resize(function() {
    $("#chart_div").css("width", $("div.cnt").width());
    drawChart();
});
});

</script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Politicus', 'Vragen', 'Beantwoord'],
      ['Bart De Wever',  30,      20,],
      ['Filip De Winter',  25,      10],
      ['Maggie De Block',  20,       15],

    ]);

    var options = {
      title: '',
      legend: {position: 'top' },
      vAxis: {title: 'Aantal',  titleTextStyle: {color: 'red'}},
      orientation: 'horizontal',
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

This is the div that should resize when i change the browserwindow

<div class="cnt"><div id="chart_div" style="width: 100%; height: 400px;"></div>

Thanks

Answer 1

FOR your problem refer this link https://groups.google.com/forum/#!msg/google-chart-api/v3HSyEqGaw8/4aH083z4sCIJ

OR for general u can use resize event
The resize event is sent to the window element when the size of the browser window changes so USE it example is

$( window ).resize(function() {
  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});

for more information https://api.jquery.com/resize/

Example http://jsfiddle.net/arjun_chaudhary/y9Rzu/