CODEWITHSUNDEEP
javascriptanimationgoogle-visualizationgoogle-gauges
Ryan
Ryan

Reputation: 86

How do I animate the numerical value using a Google Charts animation? Specifically the Gauage

In this JS Fiddle example, the gauge updates with new values periodically.

https://jsfiddle.net/n5fvb8ft/ (thanks nbering for correction)

This example uses setInterval to assign random new values eg

setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);

As you can see the new number appears and the needle animates towards it. I would really like to show the current number updating with the needle rather than just displaying the final value. Is this possible using Google Charts? Also I'd like to slow down the animation but that is probably another question.

I figure could probably set up a tween on the value and animate it with the same duration as the needle animation and then repeatedly update the gauge but this would be pretty clumsy and the needle would likely animate in lots of small movements. Surely though there must be a better way.

Any help would be greatly appreciated.

Upvotes: 1

Views: 102

Answers (1)

nbering
nbering

Reputation: 2800

As I understand the question, you'd like the number that appears inside the radial gauge to show the value that the needle is pointed at rather than the value that the needle is animating toward.

If that is the case, then no, this is not an available feature of the Google Charts API. You may be able to hack it as you suggested, but that would likely not perform as well as you hope, and would involve a lot of setTimeouts. So if you have any other long-running code blocking the event loop you'd get jittery animation.

Upvotes: 1

Related Questions