Google’s Pie Chart is deformed when called by Javascript function

Asked

Viewed 102 times

1

Hey there, guys. I’m having trouble making a chart that is "display:None" in "display: block" through Javascript. The problem is that when I make the graph visible it gets smaller than expected.

The graph is getting this resolution

O gráfico está ficando com esta resolução

When should I get this resolution

Quando deveria ficar com esta resolução

Below is the code of the graph in question

Html code

<div id="relat_sit_table" style="display:none;">
<div class='tab_title'>Situação UC Sem Medidor <?php echo "($mees/$anoo)"; ?></div><br/>
<div id='table_div_estilo2'><br/>
<div id='table_div3'></div></div><br/>
</div>
<div id="relat_sit_det2" style="display:none"><p class="relat_sit_det2"> Veja comparação entre os últimos meses <a href="#" name="relat_sit2" onClick="optionCheck4()">aqui</a></p></div>

Javascript

function optionCheck1(){
      document.getElementById("columnchart_material_2").style.display ="none";
      document.getElementById("piechart").style.display ="block";    
      document.getElementById("relat_class_det1").style.display ="none";
      document.getElementById("relat_class_det2").style.display ="block";
            }
javascript google-charts css-display

  • The whole chart or just the pizza?

  • Only the pizza.....

  • Do the following: instead of initializing it with display: None, put invisible and with position: Absolute, like this: style="visibility: hidden; position: absolute;"... then with JS you change with ELEMENTO.style.visibility = "visible" and ELEMENTO.style.position = "relative"

  • Perfect, buddy! It worked, thank you!

1 answer

0


This is because the API may not correctly scale the chart in div hidden, getting incorrect values of container dimensions.

One way around this is by taking the visibility of the div (different from hiding) with property visibility: hidden and position: absolute so that the empty space of the div invisible.

When calling the function to show it, change the visibility for visible and the position for relative.

In the div of the chart put the style:

style="visibility: hidden; position: absolute;"

And change the function with:

document.getElementById("ID_DA_DIV").style.position = "relative";
document.getElementById("ID_DA_DIV").style.visibility = "visible";

Browser other questions tagged javascript google-charts css-display

You are not signed in. Login or sign up in order to post.