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.
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:
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:
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!