Animate and different value than what shown

[maeishoj]

Hello there I was wondering how you would achieve the "animation" that I did as follows in Jquery:

$.when( $('.knob').animate({ value: 100 }, { duration: 1000, easing: 'swing', progress: function() { if ($scope.cpiScore == "N/A") { $('.knob').val(0).trigger('change'); //WARNING: might have to change class if using more than 1 knob } else { $(this).val(Math.round(this.value / 100 * $scope.cpiScore)).trigger('change'); } } }) );

and

$('#knob_cpi').trigger('configure', { 'draw': function(v) { v = parseInt(document.getElementById('knob_cpi').value); //console.log(v); if (v > 67) { this.o.fgColor = '#20960c'; $("#knob_cpi").css("color", "#20960c"); // this.o.inputColor='red'; } if (v <= 67 && v > 33) { this.o.fgColor = '#f8e700'; $("#knob_cpi").css("color", "#f8e700"); //this.o.inputColor='#87CEEB'; } if (v <= 33 & v > 0) { this.o.fgColor = 'red'; $("#knob_cpi").css("color", "red"); //this.o.inputColor='#87CEEB'; } if (v == 0) { // console.log(v); this.o.fgColor = '#red'; $("#knob_cpi").css("color", "red"); $('#knob_cpi').val("N/A"); } }, 'format': function(v) { return v; } }); $('#knob_cpi').trigger('change');

Furthermore is there a way of changing the "number" inside the knob to represent another number than the one the graph is based on?