Counter-clockwise gauges

[mainstreetmark]

In some configurations, it would make sense to have an option for a counter-clockwise gauge. There are situations where I'd like to make a pair of "half-moon" gauges next to each other, but the one on the right needs to rotate in the opposite direction. I tried to hack it up by using (1-VALUE) and reversing the scale, but the valueBox shows 1-VALUE.

I've fiddled the example.

https://jsfiddle.net/4zyovuzk/1/

[whurlston-cl]

// Counter clockwise radial gauge

// The value we want to display.
var wantedValue = 40;
// Needle will be maxValue - wantedValue
var needleValue = 100 - wantedValue;
var gauge = new RadialGauge({
renderTo: 'right',
animatedValue:true,
animation: true,
startAngle:180,
ticksAngle:135,
borders:false,
// Reverse the major tick numbers
majorTicks: ["100","80","60","40","20","0"],
highlights: [
// Reverse highlight colors.
{ from: 80, to: 100, color: 'rgba(0,255,0,.15)' },
{ from: 60, to: 80, color: 'rgba(255,255,0,.15)' },
{ from: 20, to: 60, color: 'rgba(255,30,0,.25)' },
{ from: 0, to: 20, color: 'rgba(255,0,225,.25)' }
],
value: needleValue,
// Make sure we display the wanted value in the valueBox
valueText: wantedValue.toFixed(2),
valueBoxWidth: 40
}).draw();