Google Pie chart rendered outside of div area when inside a dropdown

Question

I have an issue with my pie chart being rendered outside of its parent div when located into a dropdown.

The chart loads after the page is ready so if I actually hover the dropdown and wait for the chart to load, it loads correcly.

If I wait for the chart to load before I hover the dropdown, it does not load properly.

Any idea to resolve this ? Thanks a lot !

My view:

<div id="fmu_dropdown-profile" class="fmu_dropdown greybg menuright w250px">

        <div id="top_user_connected">
            <div id="user_connected_header" class="padding">
                <div class="bold padding-bottom">Profil rempli à {{ completeness }}%</div>

                <div id="chart_picture">

<div id="piechart" style="width: 220px; height: 180px"></div>


                    <a id="dropdown_picture" href="{{ path('fos_user_profile_edit') }}">
                            <img src="{{ profile_picture | imagine_filter('default')  }}" alt="Image de profil" class="img-responsive img-circle margin-auto">
                    </a>
                </div>

                <style rel="stylesheet">
                    #chart_picture {position: relative;}
                    #dropdown_picture {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-top: -60px;
                        margin-left: -60px;
                        z-index: 0;
                    }
                </style>

            </div>
            <div id="portfolio" class="padding whitefont">
                <p>Portfolio pris en compte :</p>
                {{ form(portfolio_form) }}
            </div>
        </div>


<script type="text/javascript">
    $(function(){
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Nom',    'Valeur'],
                ["Profil rempli à ", {{ completeness }}],
                ['Manque', {{ 100 - completeness }}]
            ]);

            var options = {
                backgroundColor: { fill:'transparent'},
                pieSliceBorderColor : 'transparent',
                pieHole: 0.9,
                legend: 'none',
                pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
                slices: {
                    0: { color: 'red'},
                    1: { color: '#444'}
                },
                chartArea : {width: '90%', height: '90%'}
            };

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

            chart.draw(data, options);
        }

        google.load('visualization', '1', {callback : function(){drawChart();}, 'packages':['corechart']})

    });

</script>

Answer 1

Drawing charts inside hidden divs breaks the dimension detection algorithms in the Visualization API. This is why when the div is exposed via hover everything works fine, but when it's hidden it all goes to hell.

The simplest solution is to explicitly set the chart height and width options to pixel values rather than percentages.

related: resizable-google-visualization-inside-jquery-accordion