Animated gauge

This demo shows how to implement dynamic, good-looking dashboards. The gradient fill of the GaugeBand is achieved via <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#gradientRatio"><code>gradientRatio</code></a> setting. The arrow and band angle is updated via <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeArrow#setValue"><code>setValue()</code></a> and <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#setStartValue"><code>setStartValue()</code></a> / <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#setEndValue"><code>setEndValue()</code></a> API functions respectively.

by HemalathaThanigaivel

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/gauge.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

let chart = AmCharts.makeChart("chartdiv", {
        "theme": "dark",
        "type": "gauge",
        "axes": [{
            "topTextFontSize": 20,
            "topTextYOffset": 80,
            "axisColor": "#31d6ea",
            "axisThickness": 1,
            "endValue": 1.5,
            "startValue": 0.5,
            "gridInside": true,
            "inside": true,
            "radius": "45%",
            "valueInterval": 0.5,
            //"tickColor": "#67b7dc",
            "startAngle": -90,
            "endAngle": 90,
            "unit": "",
            "bandOutlineAlpha": 0,
            "bands": [{
              //  "color": "#ea4335",
                "endValue": 0.7,
                "innerRadius": "105%",
                "radius": "170%",
             //   "gradientRatio": [0.1, 0, -0.3],
                "startValue": 0.5
            },
            {
                // "color": "#32CD32", //color must empty
                "endValue": 0,
                "innerRadius": "1%",
                "radius": "1%",  // not to color changes 
                "gradientRatio": [0.5, 0, -0.5],
                "startValue": 0
            },
            {
                "color": "#55bf3b",
                "endValue": 0.97,
                "innerRadius": "105%",
                "radius": "170%",
                "gradientRatio": [0.5, 0, -0.5],
                "startValue": 0.7
            },
            {
                "color": "#ea4335",
                "endValue": 1.5,
                "innerRadius": "105%",
                "radius": "170%",
                "gradientRatio": [0.5, 0, -0.5],
                "startValue": 0.97
            }
            ]
        }],
        "arrows": [{
            "alpha": 1,
            "innerRadius": "35%",
            "nailRadius": 0,
            "radius": "170%",
            //  "color":"#666"
        }]
    });
setInterval(randomValue, 2000);
   chart.axes[0].bands[0].color = "#3cd3a3";
  chart.axes[0].bands[0].gradientRatio =...