I want to show my chart only when an user scroll the page and arrive on the div of the chart.
Now the chart charge together the page's loading and when I arrive on the chart, it is charged yet.
I used Chart.js to make this chart.
This is the link of the site: http://www.matteoschiatti.it/
I have the chart under the "skills" voice.
This is my skills section:
<section id="skills" class="skills-section">
<div id="counter">
<canvas id="polarChart" height="100%"></canvas>
</div>
</section>
JS:
$(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
var oBottom = $('#contact').offset().top - window.innerHeight;
var chartHidden = true;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
if ((pTop > oTop) && (chartHidden)) {
chartHidden = false;
start_count();
} else if (pTop < oTop) {
chartHidden = true;
}
if ((pTop > oBottom)) {
chartHidden = true;
}
});
});
function start_count(){
var ctx = document.getElementById("polarChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ["Php", "Css", "Html", "Wordpress", "Magento", "Photoshop", "Web Analisis", "Seo"],
datasets: [{
backgroundColor: [
"#0066ff",
"#cc3333",
"#ffba02",
"#009966",
"#ff6600",
"#db01de",
"#00cc33",
"#00ccff"
],
data: [65, 85, 90, 95, 75, 75, 85, 85]
}]
}
});
}