Guage Chart

by Prasanna Brabourame

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/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 gaugeChart = AmCharts.makeChart("chartdiv", {
            "type": "gauge",
            "theme": "light",

            "titles": [
                {
                    "text": "GUAGE",
                    "size": 15
                }
            ],

            "axes": [{
                "axisThickness": 3,
                "axisAlpha": 0.2,
                "tickAlpha": 0.2,
                "valueInterval": 80,

                "bands": [{
                    "color": "#f10",
                    "endValue": 200,
                    "startValue": 0
                }, {
                    "color": "#fdd400",
                    "endValue": 400,
                    "startValue": 200
                }, {
                    "color": "#FFA500",
                    "endValue": 600,
                    "startValue": 400
                }, {
                    "color": "#008000",
                    "endValue": 800,
                    "startValue": 600
                }],
                "bottomText": "0 Q",
                "bottomTextYOffset": -20,
                "endValue": 800
            }],
            "arrows": [{}],
            "export": {
                "enabled": true
            }
        });

        setInterval(randomValue, 2000);

        // 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 + " Q ");
                        }
                    }
                }
            }
        }