Cylinder gauge

Cylinder gauge is actually a simple serial chart with a single series and two column graphs stacked on each other. The only trick which is made here - <strong>showOnAxis</strong> property of both graphs is set to true. This makes the cylinder center to start on the 0 value of the axis (by default front of a cylinder is placed there).

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var chartData = [{
     "category":"Your data",
     "value1":.8,
     "value2":-.5
}];


var chart = AmCharts.makeChart("chartdiv", {
    "theme": "light",
    "type": "serial",
    "depth3D":100,
    "angle":30,
    "autoMargins":false,
    "marginBottom":100,
    "marginLeft":150,
    "pathToImages": "http://www.amcharts.com/lib/3/images/",
    "dataProvider": chartData,
    "valueAxes": [{
        "stackType": "regular",
        "gridAlpha": 0,
        //"axisAlpha": 0,
		"labelsEnabled": false,
        "minimum": -1,
        "maximum": 1
    }],
    "graphs": [{
        "type":"column",
        "topRadius":1,
        "columnWidth":1,
        "showOnAxis":true,
        "lineThickness": 2,
        "lineAlpha": 0.5,
        "fillAlphas": 0.8,
        "valueField": "value1"
    },{
        "type":"column",
        "topRadius":1,
        "columnWidth":1,
        "showOnAxis":true,
        "lineThickness": 2,
        "lineAlpha": 0.5,
        "fillAlphas": 0.5,
        "valueField": "value2"
    }],

    "categoryField": "category",
    "categoryAxis": {
        "axisAlpha": 0,
        "labelOffset":40,
        "gridAlpha":0
    }
});