CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-visualization
None
None

Reputation: 5670

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>

Upvotes: 13

Views: 14143

Answers (5)

Anees Hameed
Anees Hameed

Reputation: 6544

Directly give width in chart option.

For eg:

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

Upvotes: -1

Dario Vanin
Dario Vanin

Reputation: 41

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"

Upvotes: 4

asgallant
asgallant

Reputation: 26340

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);

Upvotes: 24

Manish
Manish

Reputation: 1447

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);
}

Upvotes: 5

Marios Fakiolas
Marios Fakiolas

Reputation: 1545

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.

Upvotes: 1

Related Questions