Angular GaugeDashboard Gauge
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 = AmCharts.makeChart( "chartdiv", {
"valueAxes": [
{
"axisColor": "white",
"totalTextColor":"red",
}
],
"categoryAxis": {
"axisColor": "red"
},
"type": "gauge",
"theme": "light",
"axes": [ {
"tickColor":"red",
"axisThickness": 1,
"axisAlpha": 0.2,
"tickAlpha": 0.2,
"axisColor":"red",
//"valueInterval": 20,
"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": [ {"color": "green"}],
"export": {
"enabled": true
}
} );
setInterval( randomValue, 2000 );
//gaugeChart.addLabel(0, 0, 'alma');
// 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 + " km/h" );
}
}
}
}
}