Displaying AMCharts inside an HTML table cell - html

Question

I am trying to display AMCharts inside an HTML table cell. I'm looping through data and creating a chart for each data item. Here is my HTML code:
<table id="theTable" class="display table table-bordered">
<thead>
<tr>
<th>Department</th>
<th>Number of Employees</th>
<th>Number of Volunteers</th>
<th>Chart</th>
</tr>
</thead>
<tbody>
<tr>
<td>IT</td>
<td>30</td>
<td>5</td>
<td><div id="chart_1"></div></td>
</tr>
<tr>
<td>HR</td>
<td>35</td>
<td>14</td>
<td><div id="chart_2"></div></td>
</tr>
<tr>
<td>LG</td>
<td>100</td>
<td>65</td>
<td><div id="chart_3"></div></td>
</tr>
</tbody>
</table>
And here is my Javascript code:
var emp = [30, 35, 100];
var vol = [5, 14, 65];
for (var j = 0; j < 3; j++) {
var str = "chart_" + j.toString();
var chart = AmCharts.makeChart(str, {
"type": "pie",
"dataProvider": [{
"type": "Employees",
"per": parseFloat(emp[j]),
"color": "#54e83a"
}, {
"type": "Volunteers",
"per": parseFloat(vol[j]),
"color": "#41ba2c"
}],
"valueField": "per",
"titleField": "type",
"colorField": "color",
"balloon": {
"fixedPosition": true
},
"export": {
"enabled": true
},
"startDuration": 0
});
}
What am I doing wrong? Any help is appreciated! Here is a JSFiddle
(Please ignore this text the Editor is saying my post is mostly code so I'm adding non-code text hoping to trick it...This is unprofessional I know.)

Answer 1

AmChart divs must have dimensions specified through CSS, otherwise they won't display. Set the sizes and you're all set, for example:
#chart_1, #chart_2, #chart_3 {
width: 300px;
height: 100px;
}
You also need to adjust your loop logic as you're starting from chart_0, when your divs are starting from chart_1. Either update your html or fix your string creation, e.g. var str = "chart_" + (j + 1); (note you don't need toString())
Updated fiddle