Blame view
samples/column3DStacked.html
4.54 KB
eed3c9f67
first file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script type="text/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.color = "#FFFFFF";
chart.fontSize = 14;
chart.startDuration = 1;
chart.plotAreaFillAlphas = 0.2;
// the following two lines makes chart 3D
chart.angle = 30;
chart.depth3D = 60;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0.2;
categoryAxis.gridPosition = "start";
categoryAxis.gridColor = "#FFFFFF";
categoryAxis.axisColor = "#FFFFFF";
categoryAxis.axisAlpha = 0.5;
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.gridColor = "#FFFFFF";
valueAxis.axisColor = "#FFFFFF";
valueAxis.axisAlpha = 0.5;
valueAxis.dashLength = 5;
valueAxis.title = "GDP growth rate";
valueAxis.titleColor = "#FFFFFF";
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;
graph1.lineColor = "#D2CB00";
graph1.fillAlphas = 1;
graph1.balloonText = "GDP grow in [[category]] (2004): <b>[[value]]</b>";
chart.addGraph(graph1);
// second graph
var graph2 = new AmCharts.AmGraph();
graph2.title = "2005";
graph2.valueField = "year2005";
graph2.type = "column";
graph2.lineAlpha = 0;
graph2.lineColor = "#BEDF66";
graph2.fillAlphas = 1;
graph2.balloonText = "GDP grow in [[category]] (2005): <b>[[value]]</b>";
chart.addGraph(graph2);
chart.write("chartdiv");
});
</script>
</head>
<body style="background-color:#000000;">
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
</html>
|