Initially I put all AmChart configs in AmCharts.ready is everything worked fine.
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script>
AmCharts.ready(function() {
console.log("this works");
/* Other configs */
})
</script>
Somehow it stops working when I introduce RequireJS as instructed in amCharts meets requireJS. Whatever code inside AmChart.ready's callback will not be executed. (Oddly it was executed one time during the debugging)
After a few tests I realized AmChart.ready only pushes the callback into the onReadyArray
which is later popped for execution after the window.load/onload event. In other words, if AmChart is loaded after window.onload event, AmChart.ready is useless. My workaround is as followed:
<script>
configChart = function() {
/* Create charts stuff */
};
if (AmCharts.isReady) {
configChart();
} else {
AmCharts.ready(configChart);
}
</script>