Removing display none is changing the chart height and width

Question

I'm writing a code that generates a chart using google charts. And here is the original code.

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="piechart" style="width: 900px; height: 500px;"></div>

Here is my modification. Initially, I want the Pie chart not to be displayed. and when I click on the button it should comeup.

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieSliceText: 'value',

  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);
}

function showPie() {
  document.getElementById("piechart").style.display = '';
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px; display:none"></div>
<button type="button" onclick="showPie()">Click Me!</button>

Even this is working fine, but my question is, why the size is coming down? Is there a way that I can retain the size even when I get the pieChart back. Please let me know on where am I going wrong and how can I fix it.

Thanks!!!

score 0 · Answer 1 · answered May 23 '19 at 16:31

0

Instead of display:none, use visibility:hidden, as this will still render the div, but not the content:

What is the difference between visibility:hidden and display:none?

answered May 23 '19 at 16:31

aprouja1

1,800
8
17

score 0 · Answer 2 · answered May 23 '19 at 17:10

Kill the size dimensions on your div and place them in the options variable like in the example below and you should be good to go.

It is one of the quirks of the visualization library that I've ran into before.

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieSliceText: 'value',
    width: 900,
  height: 500,

  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);
}

function showPie() {
  document.getElementById("piechart").style.display = "";
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button type="button" onclick="showPie()">Click Me!</button>
<div id="piechart" style=" display:none;"></div>

Removing display none is changing the chart height and width

2 Answers2