Skip to content Skip to sidebar Skip to footer

Create A Gauge Using Jsgauge

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

Solution 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.

Solution 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);

Post a Comment for "Create A Gauge Using Jsgauge"