#7872

by amcharts

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/gauge.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="lgg_chartdiv"></div>

CSS

#lgg_chartdiv {
    width : 270px;
    height : 400px;
}

JavaScript

var gaugeChart = AmCharts.makeChart("lgg_chartdiv", {
    "type": "gauge",
        "theme": "light",
    //"theme": "none", 
    "axes": [{
        "axisThickness": 1,
        //"axisColor": "#ffffff",	
        "axisAlpha": 0.2,
            "tickAlpha": 0.2,
            "topTextYOffset": 40,
            "topTextFontSize": 32,
            "topTextColor": "#33CCFF",
            "startAngle": -90,
            "endAngle": 90,
            "startValue": 50,
            "gridCount": 10,
            "valueInterval": 5,
            "bands": [{
            //"color": "#84b761", 
            "color": "#66CC00",
                "endValue": 85,
            //"innerRadius": "60%",	
            "startValue": 50
        }, {
            //"color": "#fdd400", 
            "color": "#99FF00",
                "endValue": 90,
            //"innerRadius": "70%",	
            "startValue": 85
        }, {
            //"color": "#cc4748", 
            "color": "#FFFF00",
                "endValue": 94,
            //"innerRadius": "95%",	
            "startValue": 90
        }, {
            "color": "#FF0000",
                "endValue": 100,
                "innerRadius": "92%",
                "ballroomText": "Test",
                "startValue": 94
        }],
            "bottomText": "Max：3728.2\nNow： 0 ",
            "bottomTextFontSize": 12,
            "bottomTextYOffset": -40,
            "endValue": 100
    }],
        "arrows": [{
        "startWidth": 8
    }]
});