JavaScript Charts: 100% stacked area chart
<script type="text/javascript">
var chart;
var chartData = [{
year: 2000,
cars: 1587,
motorcycles: 650,
bicycles: 121
}, {
year: 1995,
cars: 1567,
motorcycles: 683,
bicycles: 146
}, {
year: 1996,
cars: 1617,
motorcycles: 691,
bicycles: 138
}, {
year: 1997,
cars: 1630,
motorcycles: 642,
bicycles: 127
}, {
year: 1998,
cars: 1660,
motorcycles: 699,
bicycles: 105
}, {
year: 1999,
cars: 1683,
motorcycles: 721,
bicycles: 109
}, {
year: 2000,
cars: 1691,
motorcycles: 737,
bicycles: 112
}, {
year: 2001,
cars: 1298,
motorcycles: 680,
bicycles: 101
}, {
year: 2002,
cars: 1275,
motorcycles: 664,
bicycles: 97
}, {
year: 2003,
cars: 1246,
motorcycles: 648,
bicycles: 93
}, {
year: 2004,
cars: 1218,
motorcycles: 637,
bicycles: 101
}, {
year: 2005,
cars: 1213,
motorcycles: 633,
bicycles: 87
}, {
year: 2006,
cars: 1199,
motorcycles: 621,
bicycles: 79
}, {
year: 2007,
cars: 1110,
motorcycles: 210,
bicycles: 81
}, {
year: 2008,
cars: 1165,
motorcycles: 232,
bicycles: 75
}, {
year: 2009,
cars: 1145,
motorcycles: 219,
bicycles: 88
}, {
year: 2010,
cars: 1163,
motorcycles: 201,
bicycles: 82
}, {
year: 2011,
cars: 1180,
motorcycles: 285,
bicycles: 87
}, {
year: 2012,
cars: 1159,
motorcycles: 277,
bicycles: 71
}];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "/lib/samples/javascript/images/";
chart.marginRight = 30;
chart.zoomOutButton = {
backgroundColor: "#000000",
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.autoMarginOffset = 0;
chart.addTitle("Traffic incidents per year", 15);
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0.07;
categoryAxis.axisColor = "#DADADA";
categoryAxis.startOnAxis = true;
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "100%";
valueAxis.gridAlpha = 0.07;
valueAxis.axisColor = "#DADADA";
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph = new AmCharts.AmGraph();
graph.type = "line"; // it"s simple line graph
graph.title = "Cars";
graph.valueField = "cars";
graph.balloonText = "[[value]] ([[percents]]%)";
graph.lineAlpha = 0;
graph.fillAlphas = 0.6; // setting fillAlphas to > 0 value makes it area graph
chart.addGraph(graph);
// second graph
var graph = new AmCharts.AmGraph();
graph.type = "line";
graph.title = "Motorcycles";
graph.valueField = "motorcycles";
graph.balloonText = "[[value]] ([[percents]]%)";
graph.lineAlpha = 0;
graph.fillAlphas = 0.6;
chart.addGraph(graph);
// third graph
var graph = new AmCharts.AmGraph();
graph.type = "line";
graph.title = "Bicycles";
graph.valueField = "bicycles";
graph.balloonText = "[[value]] ([[percents]]%)";
graph.lineAlpha = 0;
graph.fillAlphas = 0.6;
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
chart.addLegend(legend);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zooming
chartCursor.cursorAlpha = 0;
chart.addChartCursor(chartCursor);
// WRITE
chart.write("chartdiv");
});
</script>
<div id="chartdiv" style="width:100%; height:400px;"></div>
 100% stacked area chart |
