Triggering chart animation only when chart scrolls into view
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/radar.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<h1>Scroll this frame down to reveal (and auto-animate other charts)<h1>
<h2>(Please note that this demo uses and relies on jQuery)<h2>
<div id="chartdiv"></div>
CSS
body {
font-family: Verdana;
font-size: 12px;
padding: 10px;
}
h1 {
font-size: 15px;
font-weight: bold;
text-align: center;
margin: 20px;
}
h2 {
text-align: center;
margin: 20px;
}
.chart {
width : 100%;
height : 500px;
font-size : 11px;
margin-bottom: 1000px;
border: 1px solid #eee;
}
#chartdiv {
width: 100%;
height: 500px;
}
JavaScript
var chart = AmCharts.makeChart( "chartdiv", {
"type": "radar",
"theme": "light",
"dataProvider": [ {
"country": "material",
"litres": 156.9
}, {
"country": "fabricació",
"litres": 131.1
}, {
"country": "distribució",
"litres": 115.8
}, {
"country": "ús",
"litres": 109.9
}, {
"country": "fi de vida",
"litres": 108.3
}, {
"country": "UK",
"litres": 99
} ],
"valueAxes": [ {
"axisTitleOffset": 20,
"minimum": 0,
"axisAlpha": 0.15
} ],
"startDuration": 2,
"graphs": [ {
"balloonText": "[[value]] litres of beer per year",
"bullet": "round",
"lineThickness": 2,
"valueField": "litres"
} ],
"categoryField": "country",
"export": {
"enabled": true
}
} );
/**
* Build first chart right away
*/
charts.chart1 = AmCharts.makeChart("chartdiv", chartConfig.makeChart);
/**
* Add code to handle scroll events and animation
*/
$(window).scroll(function() {
for (var x in chartConfig) {
if (undefined != charts[x])
continue;
var hT = $('#'+x).offset().top,
hH = $('#'+x).outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
charts[x] = AmCharts.makeChart(x, chartConfig[x]);
}
}
});