V3: Angular Gauge

by harsh dand

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/gauge.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://jackrugile.com/jrumble/js/jquery.jrumble.1.3.min.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
<h3 id="description">Initial</h3>

CSS

h3{
    text-align:center;
}

JavaScript

var Wajid = function(){
    this.weight = 70;
    this.numOfChickensForEating = 0;
    
    this.eatChicken = function(num){
        this.numOfChickensForEating++;
         this._addWeight(num);
    }
    
    this._addWeight = function(num){
        this.weight = this.weight + num*3;
    }
}

var wajid = new Wajid();

var chart;
var arrow;
var interval;
var axis;

AmCharts.ready(function () {
    // create angular gauge
    chart = new AmCharts.AmAngularGauge();
    chart.addTitle("Wajid Weight Meter");

    // create axis
    axis = new AmCharts.GaugeAxis();
    axis.startValue = 0;
    axis.endValue = 220;
    // color bands
    var band1 = new AmCharts.GaugeBand();
    band1.startValue = 0;
    band1.endValue = 90;
    band1.color = "#00CC00";

    var band2 = new AmCharts.GaugeBand();
    band2.startValue = 90;
    band2.endValue = 130;
    band2.color = "#ffac29";

    var band3 = new AmCharts.GaugeBand();
    band3.startValue = 130;
    band3.endValue = 220;
    band3.color = "#ea3838";
    band3.innerRadius = "95%";

    axis.bands = [band1, band2, band3];

    // bottom text
    axis.bottomTextYOffset = -20;
    axis.setBottomText("0 kg");
    chart.addAxis(axis);

    // gauge arrow
    arrow = new AmCharts.GaugeArrow();
    chart.addArrow(arrow);

    chart.write("chartdiv");
    // change value every 2 seconds
   interval = setInterval(displayValue, 1000);
});

function displayValue() {
    wajid.eatChicken(2);
    $('#description').html("Weight Meter after eating "+wajid.numOfChickensForEating+' chickens');
    if(wajid.weight>150){
        $('#chartdiv').jrumble({
	x: 10,
	y: 10,
	rotation: 4
});
        $('#chartdiv').trigger('startRumble');
    }
    if(wajid.weight>190){
        $('#chartdiv').jrumble({
	x:50,
	y: 50,
	rotation: 10
});
        $('#chartdiv').trigger('startRumble');
        setTimeout(function(){
            $('#chartdiv').hide('explode');
            $('#description').html("Sorry unable to measure, the meter got broken");
       ...