Angular Gauge

Angular Gauge, or Speedometer chart is mostly used to show data which is shown using similar gauges in real life, like speed, volume equalizer, clock, etc. Our Angular Gauge chart can display multiple axes, multiple arrows, also show color bands on the axis.

by Ravichandra Thota

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/gauge.js"></script>

<div id="chartdiv"></div>

CSS

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

JavaScript

var gaugeChart = AmCharts.makeChart( "chartdiv", {
  "type": "gauge",
  "theme": "light",
  "axes": [ {
    "axisThickness": 1,
    "axisAlpha": 0.2,
    "tickAlpha": 0.2,
    "valueInterval": 1,
        "bottomText": 6.5,
    "endValue": 10,
    "bands": [ {
      "color": "#84b761",
      "endValue": 4.5,
      "startValue": 0
    }, {
      "color": "#fdd400",
      "endValue": 6.5,
      "startValue": 4.5
    }, {
      "color": "#cc4748",
      "endValue": 10,
      "innerRadius": "96%",
      "startValue": 6
    } ]
  
  } ],
      "balloon": {
    "adjustBorderColor": true,
    "color": "#000000",
    "cornerRadius": 5,
    "fillColor": "#ffffff"
  },   
  "arrows": [  {
      "value": 6.5,
      "title": "PainScore"
    }],
  "export": {
    "enabled": true
  }, 
    "listeners": [{
    "event": "rendered",
    "method": function(event) {
      var chart = event.chart;
      var text = "";
      for(var i = 0; i < chart.arrows.length; i++) {
        var arrow = chart.arrows[i];
        text += arrow.title + ": " + arrow.value + "<br />";
      }
      for(var i = 0; i < chart.axes[0].bands.length; i++) {
        chart.axes[0].bands[i].balloonText = text;
      }
    }
  }]
} );

setInterval( randomValue, 2000 );