Encountering an issue with my pie chart rendering outside of its parent div when placed within a dropdown menu.
The chart successfully loads after the page is loaded, but only displays correctly if I hover over the dropdown and allow it to load.
If I do not hover over the dropdown until after the chart has fully loaded, it does not render properly.
Any suggestions on how to resolve this would be greatly appreciated. Thank you!
Here's 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">Profile filled to {{ 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="Profile Image" 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 taken into account:</p>
{{ form(portfolio_form) }}
</div>
</div>
<script type="text/javascript">
$(function(){
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Name', 'Value'],
["Profile filled to ", {{ completeness }}],
['Missing', {{ 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>