je rencontre un problème au sujet de google chart pie. J'ai bien tout fini, c'est à dire que tout fonctionne:
-> il est css responsive
-> l'animation fonctionne (le problème étant qu'elle fonctionne au chargement de la page et non pas quand on scroll dessus)
Problème: Je n'arrive pas à trouver de solution pour lancer ma fonction animation seulement quand on scroll sur l'id afin que le visiteur puisse voir l'animation se lancer
Si quelqu'un peut m'aider, ça m'aiderai énormément après 250000 test à ne pas réussir
Le script qui comprend ma requête php à animer sur le scroll:
Code : Tout sélectionner
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
<?php if ($attribute_groups) { ?><?php foreach ($attribute_groups as $attribute_group) { ?><?php foreach ($attribute_group['attribute'] as $attribute) { ?><?php if ($attribute_group['name'] == 'Ingredients') { ?>
['<?php echo html_entity_decode($attribute['name']); ?>', <?php echo html_entity_decode(substr($attribute['text'],0,-4)); ?>],
<?php } ?> <?php } ?> <?php } ?> <?php } ?>
]);
var options = {
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
is3D: true,
height: 450,
chart: {
}
};
var chart = new google.visualization.PieChart(document.getElementById('columnchart_ingredients'));
chart.draw(data, options);
// initial value
var percent = 0;
// start the animation loop
var handler = setInterval(function(){
// values increment
percent += 1;
// apply new values
data.setValue(0, 1, percent);
data.setValue(1, 1, 100 - percent);
// update the pie
chart.draw(data, options);
// check if we have reached the desired value
if (percent > 74)
// stop the loop
clearInterval(handler);
}, 30);
}
$(window).resize(function(){
drawChart();
});
</script>
Code : Tout sélectionner
<div id="columnchart_ingredients"></div>
