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

Question

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>

Roye

Answer 1

You can do as marios suggested and set dimensions inside that chart's options, but that won't fix all of the problems that come along with drawing a chart inside a hidden div. The Visualization APIs dimensional measurements don't work well inside hidden divs, so elements get positioned in the wrong place and have the wrong size in some browsers. You need to unhide the div immediately prior to drawing the chart, and you can hide it again when the chart is done drawing. Here's example code that does this:

var container = document.getElementById('chart_div');
container.style.display = 'block';
var chart = new google.visualization.PieChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
    container.style.display = 'none';
});
chart.draw(data, options);

Scalenus

Your observation regarding chart behavior in hidden area is superb... it helped finding me my bug. But when I try to open accordion before drawing then value of X-Y axis are no more visible and even legends are not showing up properly. Can you tell me if is there anything need to be done along with this? – Peggypegma

@AkashJain, it has been several years since I last used the Visualization API, so my information may be out of date, but it sounds like you are still drawing inside a hidden element. The entire DOM tree above the chart must be visible at draw time, or the chart will not render properly. – Scalenus

You are right I am drawing the line chart in hidden area but as I said in my previous comment, I have opened that accordion in programmatic way before drawing the line chart but it gives me problem with X-Y axis along with legends are not showing up. Not sure what can be the issue. – Peggypegma

Can you create a simple demo of this issue? – Scalenus

Answer 2

Use chartArea:{} to set width & height

  function drawChart() {
    var items = $(".label1").text();
    var data = google.visualization.arrayToDataTable([
        <%= chartItems %>
    ]);
    var options = {
        title: 'Poll Results',
        chartArea: {
            width: 800,
            height: 500
        }
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

Breadfruit

Answer 3

I confirm that this is a bug. It work if the div is hidden "visibility:hidden;"

It does not work if the CSS shows "display:none"

Barcellona

Answer 4

There is an option to ask for specific width and height the google chart api https://developers.google.com/chart/interactive/docs/customizing_charts?hl=es.

Nonobedience

Answer 5

Directly give width in chart option.

For eg:

options='{
 "width": "800"
}'

Gallman