JavaScript Function to Ease a Needle Around a Circle

Handwritten by TVD

Ease a Needle around a Circle with this JavaScript Function

Raphael makes rotating a needle around a speedometer or fuel gauge intuitive. But, what if you wanted a smooth easing of the needle from the gauge’s starting vector to its ending vector.

The first thing that should come to mind is acceleration and what you are really searching for is Circular Easing.

You may need to modify the code to fit your specific needs, but here is the JavaScript code to implement Circular Easing:

// Circular Easing: sqrt(1-t^2)
// t: current time, b: beginning value
// c: change in position, d: duration
easeInCirc = function (t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;

Here, the output is in radians. So, for my jquery dashboard speedometer gauge, that means I need a way to map each radian to a degree on my gauge, which will in turn map to a miles-per-hour (mph) on the texture itself.

Here is my mapping the needle texture to each easing point:

Speedometer.prototype.mph2deg = function() {
return ((this.mph - 50) * 2.62) +
(((this.mph - 50) * 1.8999) * 0.022900763);

The result is a degree value that directly corresponds to the needle’s position on my speedometer gauge. This creates the degree that I need to pass to Raphael’s rotation methods.

The exact Euclidean translation is a bit involved here and very much specific to the gauge texture you’re working with. Yet the results are a familiar part of our everyday lives - informational intelligence.

Each needle instance I create inherits the rotate function from the Raphael prototype. So the actual image processing is handled by the Raphael core like so:

Gauge.prototype.RotateNeedle = function(deg) {
this.needle.rotate(deg, this.cX, this.cY);

TechOctave’s JavaScript Gauge Suite really is a unique partnership between business and open source.

If Gauges interest you or you are a Business Intelligence junkie, feel free to check the project out - it’s open source! A portion of each sale goes toward maintaining the project and extending it for the benefit of the development community. Happy Coding and Take Care!

discuss on twitter

every day thousands of developers use our charts & gauges to get the job done right

JavaScript Charts JavaScript Gauges JavaScript Flight Gauges

← return to all articles