AmCharts zoom on render with dataLoader - amcharts

Question

I have several amCharts charts where I am trying to set up the default zoom. I can get it to work just fine with my code when using dataProvider such as here: http://jsfiddle.net/f2s32ojL/7/
When I try to do it on my own site but using dataLoader from a database, it does not work. It just gives me a default zoom of the entire dataset instead of the timeframe I want to use. Here is the code:
var chart = AmCharts.makeChart("chartdivFC", {
"type": "serial",
"dataLoader": {
"url": "includes/fc-chart-data2.php",
"format": "json"
},
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true,
"guides": [{
"value": 0,
"toValue": "<?=$min_FC?>",
"fillColor": "#CC0000",
"inside": true,
"fillAlpha": 0.1,
"lineAlpha": 0
}]
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "FC",
"balloonText": "<span style='font-size:18px;'>[[FC]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 50,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"listeners": [{
"event": "rendered",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1));
}
}]
});
The json of the dataLoader looks like this:
[{"date":"2016-08-04 14:18:49","FC":"9"},{"date":"2016-08-04 14:44:30","FC":"9"},{"date":"2016-08-04 20:33:11","FC":"7.5"},{.....
Does anyone have any ideas how to make this work?
Thank you.

Answer 1

The reason why it doesn't work is because rendered fires before the dataLoader finishes loading your data; rendered fires when the chart area is rendered, regardless of whether data actually exists in the chart, so by the time you see the "Loading data" message pop up, the event has already fired.
You have two options:
1) Use the complete callback in the dataLoader to call the zoom method after the data has been loaded. Note that you have to wrap the zoom in a setTimeout call:
"dataLoader": {
"url": "includes/fc-chart-data2.php",
"complete": function(chart) {
setTimeout(function() {
chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1))
});
}
},
2) Use the dataUpdated event instead. Note that this will fire every time you call validateData, which might not be ideal.
"listeners": [{
"event": "dataUpdated",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 1), new Date(2017, 11, 1));
}
}]