amCharts zoomtodates not loading - amcharts

Question

First question ever on the stack. Trying to get zoomToDates to work in amCharts I'm developing. I've tried the other solutions I could find to others' questions and nothing worked. So without further ado ...
Resources:
//www.amcharts.com/lib/3/amcharts.js
//www.amcharts.com/lib/3/serial.js
//www.amcharts.com/lib/3/amstock.js
//www.amcharts.com/lib/3/themes/black.js
//www.amcharts.com/lib/3/plugins/export/export.min.js
//www.amcharts.com/lib/3/plugins/export/export.css
//www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js
HTML:
<div id="$CHART$" style="width: 100%; height: 450px;"></div>
JS:
AmCharts.makeChart( "$CHART$", {
"type": "stock",
"theme": "black",
"categoryAxesSettings.equalSpacing": true,
"dataDateFormat":"YYYY-MM-DD",
"valueAxes": [ {
"position": "left",
} ],
"dataSets": [ {
"title": "Bond",
"fieldMappings": [ {
"fromField": "open",
"toField": "open"
}, {
"fromField": "high",
"toField": "high"
}, {
"fromField": "low",
"toField": "low"
}, {
"fromField": "close",
"toField": "close"
} ],
"dataLoader": {
"url": "removed for stackoverflow post"
},
"categoryField": "date"
},
],
panels: [ {
title: "Security",
percentHeight: 100,
stockGraphs: [ {
"valueField": "security",
"type": "candlestick",
"showBalloon": true,
"proCandlesticks": true,
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"closeField": "close",
"fillColors": "#7f8da9",
"highField": "high",
"lineColor": "#7f8da9",
"lineAlpha": 1,
"lowField": "low",
"fillAlphas": 0.9,
"negativeFillColors": "#db4c3c",
"negativeLineColor": "#db4c3c",
"openField": "open",
} ],
stockLegend: {
periodValueTextRegular: "[[security.close]]"
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
event.chart.zoomToDates(new Date(2017, 10, 22), new Date(2017, 10, 25));
}
});
Any help would be really appreciated. I've been working on this for too long to admit. Thanks.

Answer 1

It looks like you're using the AmCharts Wordpress plugin going by the $CHART idenfitier. The main issue is the syntax of your AmCharts.makeChart call - your addListener code is inside the config when it should be outside of the call entirely. You're also not referring to the actual chart instance, nor are you using the event argument correctly, for example:
var $CHART$ = AmCharts.makeChart("$CHART$", {
// ...
});
$CHART$.addListener("rendered", zoomChart);
function zoomChart(event) {
event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
};
You also have to use zoom for stock charts as zoomToDates won't work.
Ideally, you should use the listeners array instead of addListener as you can sometimes run into timing issues where events like rendered can fire before you can call addListener:
AmCharts.makeChart("$CHART$", {
// all of your other config and data omitted
"listeners": [{
"event": "rendered",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
}
}]
});