Angular Gauge

by Hollie Szadowski

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="chartdiv"></div>

CSS

#chartdiv {
    width : 100%;
    height : 500px;
}

JavaScript

var gaugeChart = AmCharts.makeChart("chartdiv", {
    "type": "gauge",
        "pathToImages": "http://cdn.amcharts.com/lib/3/images/",
        "arrows": [{
        "radius": 100,
            "nailRadius": 5,
            "startWidth": 5,
            "innerRadius": 8,
            "value": 35
    }],
        "fontFamily": "Lato",
        "legend": {
        valueLabels: []
    },
        "axes": [{
        "axisAlpha": 0,
            "axisThickness": 0,
            "tickColor": "#FFFFFF",
            "radius": 100,
            "startAngle": -90,
            "endAngle": 90,
            "startValue": 0,
            "endValue": 100,
            "valueInterval": 10,
            "labelFunction": function () {
            return ""
        },
            "bands": [{
            "color": "#808080",
                "endValue": 100,
                "startValue": 0,
                "innerRadius": 0
        }],
            "topText": "RPM",
            "topTextColor": "#FFFFFF",
            "topTextFontSize": 30,
            "topTextBold": false,
    },

    {
        "bandOutlineAlpha": 1,
            "bandOutlineColor": "#FFFFFF",
            "bandOutlineThickness": 5,

            "axisAlpha": 0,
            "tickAlpha": 0,
            "startAngle": -90,
            "endAngle": 90,
            "startValue": 0,
            "endValue": 100,
            "valueInterval": 10,
            "radius": 150,
            "labelFunction": function () {
            return ""
        },
            "bands": [{
            "balloonText": "Poor",
                "color": "#f6453d",
                "innerRadius": 120,
                "startValue": 0,
                "endValue": 30,
                "label": 'this'
        }, {
            "balloonText": "Fair",
                "color": "#fdd331",
                "innerRadius": 120,
                "startValue": 30,
                "endValue": 50
        }, {
            "balloonText": "Good",
                "color": "#bad234",
             ...