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.

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

var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "gauge",
  "axes": [{
    "topTextFontSize": 20,
    "topTextYOffset": 0,
    "axisColor": "#999",
    "axisAlpha": 0,
    "axisThickness": 1,
    "endValue": 100,
    "gridEnabled": false,
    "axisEnabled": false,
    "gridInside": false,
    "inside": false,
    "radius": "50%",
    "valueInterval": 10,
    "labelsEnabled": false,
    "minorGridEnabled": false,
    "tickColor": "#67b7dc",
    "minorTickLength": 0,
    "tickLength": 0,
    "startAngle": -90,
    "endAngle": 90,
    "unit": "",
    "bandGradientRatio": [0, 0, 0, 0, 0, 0, 0, -0.7, -0.2, 0, 0.3, -0.2, -0.5],
    "bands": [
    {
      "color": "#f00",
      "endValue": 5,
      "innerRadius": "100%",
      "radius": "170%",
      "startValue": 0
    },
    {
      "color": "#FF1A00",
      "endValue": 10,
      "innerRadius": "100%",
      "radius": "170%",
      "startValue": 5
    },
    {
      "color": "#f30",
      "endValue": 15,
      "innerRadius": "100%",
      "radius": "170%",
      "startValue": 10
    },
    {
      "color": "#FF4C00",
      "endValue": 20,
      "innerRadius": "100%",
      "radius": "170%",
      "startValue": 15
    },
    {
      "color": "#f60",
      "endValue": 25,
      "innerRadius": "100%",
      "radius": "170%",
      "startValue": 20
    },
    {
      "color": "#FF8000",
      "endValue": 30,
      "innerRadius": "100%",
      "radius": "170%",
      "startValue": 25
    },
    {
      "color": "#f90",
      "endValue": 35,
      "innerRadius": "100%",
      "radius": "170%",
      "startValue": 30
    },
    {
      "color": "#FFB200",
      "endValue": 40,
      "innerRadius": "100%",
      "radius": "170%",
      "startValue": 35
    },
    {
      "color": "#fc0",
      "endValue": 45,
      "innerRadius": "100%",
      "radius": "170%",
      "startValue": 40
    },
    {
      "color": "#FFE600",
      "endValue": 50,
      "innerRadius": "100%",
      "radius": "170%",
    ...