V3: Line with duration on value axis

by amcharts

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
<div id="chartdiv2" style="width: 100%; height: 362px;"></div>

JavaScript

var consumption_data = [
{year: '2008',  gas: '0',electricity: '20713' }

,{year: '2009', gas:'137377', electricity: '348523' }

,{year: '2010', gas:'174975', electricity: '414909' }

,{year: '2011', gas:'205343', electricity: '449686' }

,{year: '2012', gas:'344470', electricity: '600500' }

,{year: '2013', gas:'444214', electricity: '731672' }

];

var annual_spend_data = [
{year: '2008',  gas: '0',electricity: '5452.12' }

,{year: '2009', gas:'4445.52', electricity: '41878.84' }

,{year: '2010', gas:'5506.95', electricity: '41842.58' }

,{year: '2011', gas:'6322.72', electricity: '39588.85' }

,{year: '2012', gas:'12326.45', electricity: '54382.68' }

,{year: '2013', gas:'14817.91', electricity: '67170.76' }

];

AmCharts.ready(function () {

	// Estimated Consumption Since XXXX
	// SERIAL CHART
	var eac_chart = new AmCharts.AmSerialChart();
	eac_chart.dataProvider = consumption_data;
	eac_chart.categoryField = "year";
	eac_chart.addTitle('Estimated Consumption Since 2008', '14px', '#302a54');
	eac_chart.marginBottom = 5;
	eac_chart.color = '#9592a7';
	eac_chart.zoomOutButton = {
		backgroundColor: '#000000',
		backgroundAlpha: 0.15
	};

	var eac_legend = new AmCharts.AmLegend();
	eac_legend.switchable = false;
	eac_legend.valueText = false;
	eac_chart.addLegend(eac_legend);

	// AXES
	// category
	var categoryAxis = eac_chart.categoryAxis;
	categoryAxis.axisColor = '#4c4187';
	categoryAxis. gridAlpha = 0;

	//categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
	categoryAxis.minPeriod = "YYYY"; // our data is yearly, so we set minPeriod to YYYY
	categoryAxis.startOnAxis = true;
	categoryAxis.equalSpacing = true;

	// value
	var valueAxis = new AmCharts.ValueAxis(); // http://docs.amcharts.com/javascriptcharts/ValueAxis
	valueAxis.axisAlpha = 0;
	valueAxis.position = 'bottom';
	valueAxis.title = 'kWh';
	valueAxis.labelFunction = function(value, valueText, valueAxis) {
		if(value==0) {
			return '0';
		} else {
			return value...