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

score 1 · Answer 1 · answered Nov 20 '12 at 09:00

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.

answered Nov 20 '12 at 09:00

vadim

1,698
1
10
19

can i do get two gauges on the same page and rather than giving value directly, can i store the values in a array so that the gauges can take the value form the array.. i am trying it but its not working – user1711574 Nov 20 '12 at 12:21
Of course you can. You can create function that will accept gauge object reference, value to set and perform value set for any count of gauges – vadim Nov 20 '12 at 12:40
thank you but there is another problem, this code is not working in IE. it is just showing a blank screen – user1711574 Nov 21 '12 at 05:55
Check this [thread](http://code.google.com/p/google-visualization-api-issues/issues/detail?id=5) this can help. But you should find out what cause problem by yourself or post another question. – vadim Nov 21 '12 at 06:10
i have seen the thread and i have also searched in the net but none of it is working. can you please tell me why is it not working – user1711574 Nov 21 '12 at 09:59

score 1 · Answer 2 · answered Nov 20 '12 at 09:03

1

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

answered Nov 20 '12 at 09:03

sberry

128,281
18
138
165

your fiddle is working but as i am new to this jsgauge, i am not able to understand what you have done in your code, can you please explain it....sorry for the inconvenience.. – user1711574 Nov 20 '12 at 11:45

Create a gauge using jsgauge

2 Answers2

Linked