Simple GAUGE in AM Charts

by Faisal Khan Janjua

HTML

<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css">
<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>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var initialVal = 250, finalVal = 99750, currentVal = 49875;
var percentageVal = Math.round((currentVal/finalVal)*100);
var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "gauge",
	"fontSize": 14,
  "hideCredits":true,
  "axes": [{
    "topTextFontSize": 20,
    "topTextYOffset": 60,
    "axisColor": "rgba(0,0,0,1)",
    "axisThickness": 1,
    "endValue": finalVal,
    "startValue": initialVal,
    "gridInside": true,
    "inside": true,
    "radius": "50%",
		"labelOffset": -14,
    "valueInterval": finalVal,
    "tickColor": "#F99",
    "startAngle": -90,
    "endAngle": 90,
    "bands": [{
      "color": "#0080ff",
      "innerRadius": "105%",
      "radius": "170%",
      "gradientRatio": [0.5, 0, -0.5],
      "startValue": initialVal,
      "endValue": finalVal
    }, {
      "color": "#3cd3a3",
      "innerRadius": "105%",
      "radius": "170%",
      "gradientRatio": [0.5, 0, -0.5],
      "startValue": initialVal,
      "endValue": finalVal,
    }]
  }],
  "arrows": [{
    "color": 'rgba(0,0,0,0)',
    "radius": "0%"
  }]
});
function randomValue() {
  var value = currentVal;
  chart.axes[0].setTopText(percentageVal + " %");
  chart.axes[0].bands[1].setEndValue(value);
}
jQuery(document).ready(function(){
    randomValue();
});