Create a gauge using jsgauge

Question

I have created a gauge using jsgauge plugin

What I am not able to do is to control the speed of the needle. It should move to the assigned value a bit slower than the default speed. The needle should also start from 0.

The fiddle for this is http://jsfiddle.net/aryan7987/h45Tr/2/

Query(document).ready(function(){
        jQuery("#example")
          .gauge({
             min: 0,
             max: 100,
             label: 'EMPLOYEE',
             startangle: 0,
             bands: [{color: "#ff0000", from: 90, to: 100}]
           })
          .gauge('setValue', 59);
        });

Answer 1

One of solutions is to use setInterval function and increase gauge value step by step with needed delay like this:

    jQuery(document).ready(function(){
            var g = jQuery("#example")
              .gauge({
                 min: 0,
                 max: 100,
                 label: 'RPM',
                 bands: [{color: "#ff0000", from: 90, to: 100}]
               });
              var m = 0;
              var timer = window.setInterval(function()
              {
                m++;
                g.gauge('setValue', m);
                if (m==58)
                {
                    clearInterval(timer);
                }
              }, 200);                   
});

The code is quite dirty but you should get a point. Also here working fiddle.

Answer 2

Unfortunately it looks like the speed is hardcoded by defining the delta for each frame. Here is an monkey patched version to change the speed see this jsfiddle

The problem line is:

increment = Math.max(Math.abs( that.settings.pointerValue - pointerValue ) / 8, 3);