Amchart doesn't show up when listed with html <select> tag - amcharts

Question

My previous issue was to get json data attached to amcharts, after struggling for a while, I got it running the way I want. But when I move it from test page to page where it would be listed with other charts it doesn't seem to work. When I click on blank chart this error appears in the console
Uncaught TypeError: Cannot read property 'length' of undefined
at Object.xToIndex (serial.js:14)
at b.handleCursorMove (serial.js:8)
at Object.a.inherits.b.fire (amcharts.js:1)
at Object.dispatchMovedEvent (amcharts.js:27)
at Object.handleMouseDown (amcharts.js:26)
at b.handleMouseDown (serial.js:1)
at HTMLDivElement.<anonymous> (amcharts.js:18)
Below is the code which is working when I have it on separate page
var chart = AmCharts.makeChart("chart1", {
"type": "serial",
"dataLoader": {
"url": "#myURL"
},
"valueAxes": [{
"title": "Load Average",
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"id": "AmGraph-1",
"lineThickness": 3,
"valueField": "LoadAverage"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "EndTimeLoop",
"categoryAxis": {
"title": "End Time Loop",
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"labelRotation": 90
}
});
function setDataSet(dataset_url) {
AmCharts.loadFile(dataset_url, {}, function(data) {
chart.dataProvider = AmCharts.parseJSON(data);
chart.validateData();
});
};
this is the part where select happens in html side
<div class="chartWrapper" id="chartSingleTest1">
<select onchange="showChart(this.options[this.selectedIndex].value);">
<option value="chart1">Chart #1</option>
<option value="chart2">Chart #2</option>
<option value="chart3">Chart #3</option>
</select>
<div id="chart1" class="chartBoxSingle" style="display: none;"></div>
<div id="chart2" class="chartBoxSingle" style="display: none;"></div>
<div id="chart3" class="chartBoxSingle" style="display: none;"></div>
</div>
and here is js part where selects the first option on page load
var currentChart;
function showChart( divid ) {
if (currentChart !== undefined)
currentChart.style.display = "none";
if ( divid ) {
currentChart = document.getElementById(divid);
currentChart.style.display = "block";
}
else {
currentChart = undefined;
}
}
$(document).ready(function() { showChart('chart1'); });

Answer 1

You have to call the chart object's validateSize method when toggling the display of a chart from none to block as shown in this example that uses tabs. Here's another example using your structure:
var charts = {};
charts["chart1"] = AmCharts.makeChart("chart1", {
type: "serial",
dataProvider: [{
"value": 1,
"category": "Category 1"
}, {
"value": 2,
"category": "Category 2"
}, {
"value": 3,
"category": "Category 3"
}],
categoryField: "category",
graphs: [{
valueField: "value",
type: "column",
fillAlphas: .8
}]
});
charts["chart2"] = AmCharts.makeChart("chart2", {
type: "pie",
dataProvider: [{
"value": 2,
"title": "Slice 1"
}, {
"value": 2,
"title": "Slice 2"
}, {
"value": 2,
"category": "Slice 3"
}],
titleField: "title",
valueField: "value"
});
var currentChart;
function showChart(divid) {
if (currentChart !== undefined)
currentChart.style.display = "none";
if (divid) {
currentChart = document.getElementById(divid);
currentChart.style.display = "block";
charts[divid].validateSize();
} else {
currentChart = undefined;
}
}
$(document).ready(function() {
showChart('chart1');
});
.chartBoxSingle {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/pie.js"></script>
<div class="chartWrapper" id="chartSingleTest1">
<select onchange="showChart(this.options[this.selectedIndex].value);">
<option value="chart1">Chart #1</option>
<option value="chart2">Chart #2</option>
</select>
<div id="chart1" class="chartBoxSingle" style="display: none;"></div>
<div id="chart2" class="chartBoxSingle" style="display: none;"></div>
</div>