How to animate a dojo gauge?

Question

I'm trying to animate the duration of the value change in a dojo gauge, but I think I'm missing out something, and I can't figure out what it is.

So far, I've got this code working, but the indicator just moves from one point to another, with no animation whatsoever.

require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/black/CircularLinearGauge", "dojox/dgauges/GaugeBase"],
function(ready, dom, CircularLinearGauge, GaugeBase) {
    var gauge = new CircularLinearGauge({value:10, animationDuration:5000}, dom.byId("circularGauge"));
    setInterval(function() {
        var randomValue = Math.floor((Math.random() * 100) + 1);
        gauge.set("value", randomValue);
        gauge.refreshRendering();
    }, 10000);
});

Any help would be highly appreciated, thanks in advance

Answer 1

Looks like its an issue with dojox.dgauges.components.DefaultPropertiesMixin. If you replace the _setValueAttr function to

_setValueAttr: function(v) {
     this.getElement("scale").getIndicator("indicator").set("value", v);
}

it should animate for you.

As a side note, all the other functions in DefaultPropertiesMixin sets each property directly instead of using the set function. It might be advisable to change them to use the set function instead.