Angular Gauge With Two Axes
Our Angular Gauge chart can have any number of axes. They can start and end at any angle, with any value. Any number of arrows is supported, different arrow animation effects can be used.
Demo source
<!-- Styles -->
<style>
#chartdiv {
width : 100%;
height : 500px;
}
</style>
<!-- Resources -->
<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" />
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"theme": "none",
"type": "gauge",
"axes": [ {
"axisColor": "#67b7dc",
"axisThickness": 3,
"endValue": 240,
"gridInside": false,
"inside": false,
"radius": "100%",
"valueInterval": 20,
"tickColor": "#67b7dc"
}, {
"axisColor": "#fdd400",
"axisThickness": 3,
"endValue": 160,
"radius": "80%",
"valueInterval": 20,
"tickColor": "#fdd400"
} ],
"arrows": [ {
"color": "#67b7dc",
"innerRadius": "20%",
"nailRadius": 0,
"radius": "85%"
} ],
"export": {
"enabled": true
}
} );
setInterval( randomValue, 2000 );
// set random value
function randomValue() {
var value = Math.round( Math.random() * 240 );
chart.arrows[ 0 ].setValue( value );
}
</script>
<!-- HTML -->
<div id="chartdiv"></div>