V3: Waterfall chart
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 = [
{
"name": "Sucre lent",
"value": 4.5
},
{
"name": "Sucre rapide",
"value": 2.3
},
{
"name": "Sucre morceau",
"value": 5.81
},
{
"name": "Sucre poudre",
"value": 1.8
},
{
"name": "Sucre glace",
"value": 18
}
];
function genere(){
var total = 0;
for (var i = 0; i < chartData.length; i++) {
total += chartData[i]["value"];
}
for (var i = 0; i < chartData.length; i++) {
chartData[i]["percent"] = Math.round(chartData[i]["value"]*100/total);
chartData[i]["color"] = "#54cb6a";
}
chartData.push({
name: "Total",
value: total,
percent: 100,
color: "#1c8ceb"
});
}
AmCharts.ready(function () {
genere();
// Waterfall chart is a simple serial chart with some specific settings
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "name";
chart.columnWidth = 0.6;
chart.startDuration = 1;
// AXES
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
// Value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "regular";
valueAxis.gridAlpha = 0.1;
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.labelText = "[[percent]]%"
graph.valueField = "value";
graph.openField = 0;
graph.type = "column";
graph.lineAlpha = 1;
graph.lineColor = "#BBBBBB";
graph.colorField = "color";
graph.fillAlphas = 0.8;
graph.balloonText = "<span style='color:[[color]]'>[[category]]</span><br><span style='font-size:13px;'><b>[[close]]</b></span>";
chart.addGraph(graph);
// WRITE ...