V3: Column and line mix
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 = [{
"year": 2009,
"income": 23.5,
"expenses": 18.1
}, {
"year": 2010,
"income": 26.2,
"expenses": 22.8
}, {
"year": 2011,
"income": 30.1,
"expenses": 23.9
}, {
"year": 2012,
"income": 29.5,
"expenses": 25.1
}, {
"year": 2013,
"income": 30.6,
"expenses": 27.2,
"dashLengthLine": 5
}, {
"year": 2014,
"income": 34.1,
"expenses": 29.9,
"dashLengthColumn": 5
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "../amcharts/images/";
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.startDuration = 1;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPHS
// column graph
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "INVERSIÓN REAL";
graph1.lineColor = "#005fa9";
graph1.valueField = "income";
graph1.lineAlpha = 1;
graph1.fillAlphas = 1;
graph1.alphaField = "alpha";
graph1.balloonText = "[[title]] en [[category]] : [[value]] [[additional]]";
chart.addGraph(graph1);
// line
var graph2 = new AmCharts.AmGraph();
graph2.type = "line";
graph2.title = "PLAN INVERSIÓN";
graph2.titleColor = "#e9ef40"
graph2.lineColor = "#e9ef40";
graph2.valueField = "expenses";
graph2.lineThickness = 3;
graph2.bullet = "round";
graph2.bulletBorderThickness = 3;
graph2.bulletBorderColor = "#e9ef40";
graph2.bulletBorderAlpha = 1;
graph2.bulletColor = "#ffffff";
graph2.balloonText = "[[title]] en [[category]] : [[value]] [[additional]]";
chart.addGraph(graph2);
// LEGEND
var legend = new...