Google chart is not taking full width while jquery show and hide

I am making a google chart whith show and hide functionality.Means chart will be hidden on the page load and when user clicks a button chart will be made visible. My code

<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var items = $(".label1").text();
    var data = google.visualization.arrayToDataTable([
        <%= chartItems %>
    ]);
    var options = {
        title: 'Poll Results'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>
<div id="chart_div" style="display:none; width:800px;height:500px;"></div>

My problem is that when user clicks on the button and chart is visible its not taking the full width and height(800x500).rather its taking an unknown dimension(400x200). Note: when the chart is made visible in the page load itself, It works correctly. Code is same change in HTML like this

<div id="chart_div" style=" width:800px;height:500px;"></div>