Angular GaugeDashboard Gauge

by Hollie Szadowski

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/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

//var gaugeChart = am4core.create("chartdiv", am4charts.gaugeChart {
var gaugeChart = AmCharts.makeChart( "chartdiv", {

 "type": "gauge",
  "theme": "light",
  "axes": [ {
    "axisThickness": 1,
    "axisAlpha": 0.2,
    "tickAlpha": 0.2,
    "valueInterval": 10,
    "labelFrequency": 1,
    "labelFunction" : function(value){
    		if (value == 90 || value == 130 || value == 220){
        		return value;
        } else {
            return "";
        }
    },
    //gridCount: 1,
    "bands": [ {
      "color": "#84b761",
      "endValue": 90,
      "startValue": 0
    }, {
      "color": "#fdd400",
      "endValue": 130,
      "startValue": 90
    }, {
      "color": "#cc4748",
      "endValue": 220,
      "innerRadius": "95%",
      "startValue": 130
    } ],
    "bottomText": "0 km/h",
      "bottomTextYOffset": -20,
    "endValue": 220
  } ],
  "arrows": [ {} ],
  "export": {
    "enabled": true
  }
} );

setInterval( randomValue, 50000 );
var mynewlabel = gaugeChart.addLabel(400, 20, 'Your Retirement Income Goal');








var label = gaugeChart.Label('hi');
//label.text = "Hello world!";
label.fontSize = 20;
label.align = "center";
label.url="http://www.google.com";




// set random value
function randomValue() {
  var value = Math.round( Math.random() * 200 );
  if ( gaugeChart ) {
    if ( gaugeChart.arrows ) {
      if ( gaugeChart.arrows[ 0 ] ) {
        if ( gaugeChart.arrows[ 0 ].setValue ) {
          gaugeChart.arrows[ 0 ].setValue( value );
          gaugeChart.axes[ 0 ].setBottomText( + value  );
          console.log(gaugeChart.axes[0].value2angle(150));
        }
      }
    }
  }
}