Multiple stacked charts on same page - amcharts

Question

Figured this would be easy, but I'm missing something. Trying to add two stacked 100% charts to the same page. Data is being fed from MySQL via php. I know the php code is correct, since I am able to see correct data in the source code. Problem is, the second chart isn't showing up.
I have (I think) verified that the charts don't have any conflicting IDs. Here is the code for both charts:
Chart 1 (this one displays as expected):
<!-- Chart code -->
<script>
var ageChart = AmCharts.makeChart("agePie", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"demographic": "National",
"18to34": 30.14,
"35to54": 40.14,
"55to64": 13.40,
"65over": 16.32
},
{
"demographic": "Segment",
"18to34": <?php echo $age1Avg ?>,
"35to54": <?php echo $age2Avg ?>,
"55to64": <?php echo $age3Avg ?>,
"65over": <?php echo $age4Avg ?>
}
],
"valueAxes": [{
"stackType": "100%",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "left"
}],
"graphs": [{
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "18-34",
"type": "column",
"valueField": "18to34"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "35-54",
"type": "column",
"valueField": "35to54"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "55-64",
"type": "column",
"valueField": "55to64"
}, {
"balloonText": "[[category]]:[[title]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "Over 65",
"type": "column",
"valueField": "65over"
}],
"marginTop": 30,
"marginRight": 0,
"marginLeft": 0,
"marginBottom": 40,
"autoMargins": false,
"categoryField": "demographic",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0
}
});
</script>
Chart 2 (this one does NOT display). Should be the same configurations, just a different data comparison.
<script>
var ethChart = AmCharts.makeChart("ethPie", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"demographic2": "National",
"Causacian": 30.14,
"AfricanAmerican": 40.14,
"Latin": 13.40,
"Other": 16.32
},
{
"demographic2": "Segment",
"Causacian": <?php echo $eth1Avg ?>,
"AfricanAmerican": <?php echo $eth2Avg ?>,
"Latin": <?php echo $eth3Avg ?>,
"Other": <?php echo $eth4Avg ?>
}
],
"valueAxes": [{
"stackType": "100%",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "left"
}],
"graphs": [{
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "Caucasian",
"type": "column",
"valueField": "Caucasian"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "African American",
"type": "column",
"valueField": "AfricanAmerican"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "Latin",
"type": "column",
"valueField": "Latin"
}, {
"balloonText": "[[category]]:[[title]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "Other",
"type": "column",
"valueField": "Other"
}],
"marginTop": 30,
"marginRight": 0,
"marginLeft": 0,
"marginBottom": 40,
"autoMargins": false,
"categoryField": "demographic2",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0
}
});
</script>
Calling each chart by the respective ID:
<div id="agePie"></div>
<div id="ethPie"></div>
Thoughts or shoves in the right direction?

Answer 1

Please run the snippet below. Your code is working and it seems the lack of a defined dimension would be causing the issue.
I recommend you to try set a CSS class for both charts in case they should have the same dimension. Check the example below:
.chartdiv {
width: 100%;
height: 300px;
}
Add the class to both DivElement:
<div id="agePie" class="chartdiv"></div>
<div id="ethPie" class="chartdiv"></div>
Make sure you clean your browser cache. That could explain why you didn't see the difference before.
var ageChart = AmCharts.makeChart("agePie", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"demographic": "National",
"18to34": 30.14,
"35to54": 40.14,
"55to64": 13.40,
"65over": 16.32
},
{
"demographic": "Segment",
"18to34": 24,
"35to54": 40,
"55to64": 60,
"65over": 80
}
],
"valueAxes": [{
"stackType": "100%",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "left"
}],
"graphs": [{
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "18-34",
"type": "column",
"valueField": "18to34"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "35-54",
"type": "column",
"valueField": "35to54"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "55-64",
"type": "column",
"valueField": "55to64"
}, {
"balloonText": "[[category]]:[[title]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "Over 65",
"type": "column",
"valueField": "65over"
}],
"marginTop": 30,
"marginRight": 0,
"marginLeft": 0,
"marginBottom": 40,
"autoMargins": false,
"categoryField": "demographic",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0
}
});
var ethChart = AmCharts.makeChart("ethPie", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"demographic2": "National",
"Causacian": 30.14,
"AfricanAmerican": 40.14,
"Latin": 13.40,
"Other": 16.32
},
{
"demographic2": "Segment",
"Causacian": 23,
"AfricanAmerican": 34,
"Latin": 12,
"Other": 3
}
],
"valueAxes": [{
"stackType": "100%",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "left"
}],
"graphs": [{
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "Caucasian",
"type": "column",
"valueField": "Caucasian"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "African American",
"type": "column",
"valueField": "AfricanAmerican"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "Latin",
"type": "column",
"valueField": "Latin"
}, {
"balloonText": "[[category]]:[[title]]<br><span style='font-size:14px;'><b>[[value]]</b></span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[title]]: [[value]]%",
"lineAlpha": 0.5,
"title": "Other",
"type": "column",
"valueField": "Other"
}],
"marginTop": 30,
"marginRight": 0,
"marginLeft": 0,
"marginBottom": 40,
"autoMargins": false,
"categoryField": "demographic2",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0
}
});
.chartdiv {
width: 100%;
height: 300px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.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>
<div id="agePie" class="chartdiv"></div>
<div id="ethPie" class="chartdiv"></div>