Pie Chart of Google gets deformatado to be called by Javascript function

Question

Pie Chart of Google gets deformatado to be called by Javascript function

Navigation

#1 by (0 votes)

1

Hello everyone. I'm having trouble rendering a chart that has "display: none" in "display: block" via Javascript. The problem is that when I render the graph visible it gets smaller than expected.

The chart is getting this resolution

Whenshouldyoustickwiththisresolution

Belowisthecodeforthechartinquestion

htmlcode

<divid="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 css-display google-charts

asked by anonymous 23.07.2018 / 20:00

1 answer

"git status" command does not show changed files inside folders [closed] I can not submit the form!

score 0 · Accepted Answer

This is because the API may not properly scale the graph in div hidden, obtaining incorrect values of container dimensions.

One way to get around this is to take the visibility of div (other than hide) with the property visibility: hidden and position: absolute so that the empty space of div is not visible.

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

In the% w of the chart put div :

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