Kendo UI gauge animation - kendo-ui

Question

I would like to animate my kendoUI gauges in realtime, whenever the data changes. I currently can do this by setting the values of the gauge pointer directly and refresh, but when i do that it will jump straight to the new value and not animate gracefully to it. How do I add the animation, like the Gauge control does when it first starts?

Answer 1

You don't need to refresh it, just set the new value using value and it gets updated and animated.
Example: Defined an HTML input that I decorate with a Kendo Numeric Text Box. Each time I update the value both a radial and linear gauge get updated.
HTML code:
<div>
<input id="gauge-value" value="65">
</div>
<div id="gauge-container">
<div id="gaugeR"></div>
<div id="gaugeL"></div>
</div>
JavaScript (Gauges initialization):
var gaugeR = $("#gaugeR").kendoRadialGauge({
pointer: {
value: value.value()
},
scale : {
minorUnit : 5,
startAngle: -30,
endAngle : 210,
max : 180
}
}).data("kendoRadialGauge");
var gaugeL = $("#gaugeL").kendoLinearGauge({
pointer: {
value: value.value(),
shape: "arrow"
},
scale : {
majorUnit: 20,
minorUnit: 5,
max : 180
}
}).data("kendoLinearGauge");
and NumericTextBox with change event handler that updates the gauges:
var value = $("#gauge-value").kendoNumericTextBox({
min : 0,
max : 180,
change: function () {
var v = $("#gauge-value").val();
gaugeR.value(v);
gaugeL.value(v);
}
}).data("kendoNumericTextBox");
Example in JSFiddle