V3: Column 3D stacked
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript
var chart;
var chartData = [
{
"country": "USA",
"year2004": 3.5,
"year2005": 4.2
},
{
"country": "UK",
"year2004": 1.7,
"year2005": 3.1
},
{
"country": "Canada",
"year2004": 2.8,
"year2005": 2.9
},
{
"country": "Japan",
"year2004": 2.6,
"year2005": 2.3
},
{
"country": "France",
"year2004": 1.4,
"year2005": 2.1
},
{
"country": "Brazil",
"year2004": 2.6,
"year2005": 4.9
},
{
"country": "Russia",
"year2004": 6.4,
"year2005": 7.2
},
{
"country": "India",
"year2004": 8,
"year2005": 7.1
},
{
"country": "China",
"year2004": 9.9,
"year2005": 10.1
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.fontSize = 14;
chart.startDuration = 1;
chart.plotAreaFillAlphas = 0.2;
// the following two lines makes chart 3D
chart.angle = 30;
chart.depth3D = 40;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0.2;
categoryAxis.gridPosition = "start";
categoryAxis.axisColor = "#DADADA";
categoryAxis.axisAlpha = 1;
categoryAxis.dashLength = 5;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "3d"; // This line makes chart 3D stacked (columns are placed one behind another)
valueAxis.gridAlpha = 0.2;
valueAxis.axisColor = "#DADADA";
valueAxis.axisAlpha = 1;
valueAxis.dashLength = 5;
valueAxis.unit = "%";
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.title = "2004";
graph1.valueField = "year2004";
graph1.type = "column";
graph1.lineAlpha = 0;
...