Versions Compared

Old Version 5

changes.mady.by.user Sarah Padilla

Saved on

compared with

New Version Current

changes.mady.by.user Sarah Padilla

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Drag and drop the point onto the component

Gauges

Model: svgGauge1.zip

Ractive

Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 375 233" style="enable-background:new 0 0 375 233;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="186.3517" y1="226.6359" x2="186.3517" y2="6.6359">
	<stop  offset="0" style="stop-color:#474747"/>
	<stop  offset="1" style="stop-color:#1B1B1B"/>
</linearGradient>

<g>
	<circle style="fill:#dbdbdb" cx="184.9" cy="193.1" r="15"/>
	<path style="opacity:0.1" d="M184.9,157.1c16.4,0,30.5,9.9,36.6,24c1.9,4.3,6.6,6.7,11.2,5.7c23.9-5.1,44.1-9.4,69.1-14.7
		c5.7-1.2,9.2-7,7.5-12.6c-16.1-53.4-65.8-92.4-124.5-92.4S76.6,106,60.4,159.4c-1.7,5.6,1.8,11.4,7.5,12.6l69.1,14.7
		c4.6,1,9.3-1.4,11.2-5.7C154.4,166.9,168.5,157.1,184.9,157.1z"/>
	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="59.9965" y1="122.9967" x2="309.7596" y2="122.9967">
		<stop  offset="0" style="stop-color:{{color1myColor1}}"/>
		<stop  offset="1" style="stop-color:{{color2myColor2}}"/>
	</linearGradient>
	<path style="fill:url(#SVGID_2_)" d="M184.9,153.1c16.4,0,30.5,9.9,36.6,24c1.9,4.3,6.6,6.7,11.2,5.7c23.9-5.1,44.1-9.4,69.1-14.7
		c5.7-1.2,9.2-7,7.5-12.6c-16.1-53.4-65.8-92.4-124.5-92.4S76.6,102,60.4,155.4c-1.7,5.6,1.8,11.4,7.5,12.6l69.1,14.7
		c4.6,1,9.3-1.4,11.2-5.7C154.4,162.9,168.5,153.1,184.9,153.1z"/>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="184.9" y1="45.1" x2="184.9" y2="59.1"/>
	<text transform="matrix(1 0 0 1 185 40.1498)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+5*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="220.6" y1="49.5" x2="217.3" y2="63"/>
	<text transform="matrix(0.9703 0.2419 -0.2419 0.9703 221.5 44.6224)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="254.3" y1="62.4" x2="247.7" y2="74.7"/>
	<text transform="matrix(0.8829 0.4695 -0.4695 0.8829 257 58)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+7*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="283.8" y1="83" x2="274.4" y2="93.4"/>
	<text transform="matrix(0.7431 0.6691 -0.6691 0.7431 288 79)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="307.4" y1="110.2" x2="295.8" y2="118"/>
	<text transform="matrix(0.5592 0.829 -0.829 0.5592 313 107)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+9*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="323.8" y1="142.3" x2="310.6" y2="147.1"/>
	<text transform="matrix(0.342 0.9397 -0.9397 0.342 330 141)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{(maxInputValue).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="149.1" y1="49.5" x2="152.5" y2="63"/>
	<text transform="matrix(0.9703 -0.2419 0.2419 0.9703 148 45)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="115.5" y1="62.4" x2="122.1" y2="74.7"/>
	<text transform="matrix(0.8829 -0.4695 0.4695 0.8829 113 58)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="86" y1="83" x2="95.3" y2="93.4"/>
	<text transform="matrix(0.7431 -0.6691 0.6691 0.7431 82 79)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="62.3" y1="110.2" x2="73.9" y2="118"/>
	<text transform="matrix(0.5592 -0.829 0.829 0.5592 58 107)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{accentColormyAccentColor}};stroke-linecap:round;stroke-miterlimit:10;" x1="46" y1="142.3" x2="59.1" y2="147.1"/>
	<text transform="matrix(0.342 -0.9397 0.9397 0.342 41 141)" style="fill:{{accentColormyAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{(minInputValue).toFixed(0)}}</text>
	<g>
		<path style="fill:#C1272D;" d="M179.9,193.1l5-120l5,120c0.1,2.8-2,5.1-4.8,5.2s-5.1-2-5.2-4.8C179.9,193.3,179.9,193.2,179.9,193.1z" transform="rotate({{rotateValue}} 184.9,193.1)"/>
	</g>
</g>
<text transform="matrix(1 0 0 1 23 216)" style="fill:{{accentColormyAccentColor}}; font-family:'MyriadPro-Regular'; font-size:16px;">{{myNavName}}</text>
<text transform="matrix(1 0 0 1 310.3008 216)" style="fill:{{accentColormyAccentColor}}; font-family:'MyriadPro-Regular'; font-size:16px;">{{prettyValue}}</text>
</svg>

...

Code Block
linenumberstrue
collapsetrue
var myRactive = this;

myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myNavName          = this.shortName || point.navName;
myRactive.minInputValue      = this.minVal || point.minVal || 0;
myRactive.maxInputValue      = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue     = myRactive.minOutputVal ||  -70;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  70;
myRactive.accentColormyAccentColor      = this.accentColor =|| "#000";
myRactive.color1myColor1           = this.color1 =|| "#7dc5f0";
myRactive.color2myColor2           = this.color2 =|| "#006bac";
 
var myRotateValue     		 = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
 
myRactive.ractive.animate('rotateValue',myRotateValue);

Image Removed

Ractive

Code Block
Colors: To change the colors of the gauge, use the tags accentColor, color1, and color2.  color1 and color2 set the gradient, and accentColor will change the text and number color.
Image Added
Model: svgGauge2.zip
Ractive
 Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 375 233" style="enable-background:new 0 0 375 233;" xml:space="preserve">
<path style="fill:#D4EEF9;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M185.9,42.5c-16.2,0-31.8,2.6-46.4,7.3l46.4,142.7V42.5z"/>
<path style="fill:#F3D4D5;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M232.3,49.8c-14.6-4.7-30.2-7.3-46.4-7.3v150L232.3,49.8z"/>
<path style="fill:#A9DDF3;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M139.6,49.8c-15.1,4.9-29.2,12.2-41.8,21.3l88.2,121.4L139.6,49.8z"/>
<path style="fill:#7FCDEE;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M97.7,71.1C85,80.4,73.8,91.6,64.6,104.3l121.4,88.2L97.7,71.1z"/>
<path style="fill:#54BCE8;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M64.6,104.3c-9.2,12.6-16.4,26.7-21.3,41.8l142.7,46.4L64.6,104.3z"/>
<path style="fill:#C1272D;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M335.9,192.5c0-16.2-2.6-31.8-7.3-46.4l-142.7,46.4H335.9z"/>
<path style="fill:#DA7D81;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M307.3,104.3c-9.3-12.7-20.5-23.9-33.2-33.2l-88.2,121.4L307.3,104.3z"/>
<path style="fill:#CD5257;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M328.6,146.1c-4.9-15.1-12.2-29.2-21.3-41.8l-121.4,88.2L328.6,146.1z"/>
<path style="fill:#E6A9AB;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M274.1,71.1c-12.6-9.2-26.7-16.4-41.8-21.3l-46.4,142.7L274.1,71.1z"/>
<path style="fill:#29ABE2;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M43.2,146.1c-4.7,14.6-7.3,30.2-7.3,46.4h150L43.2,146.1z"/>
<path style="fill:#E6E6E6;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M185.9,62.5c-71.8,0-130,58.2-130,130h260C315.9,120.7,257.7,62.5,185.9,62.5z"/>
<text transform="matrix(0 -1 1 0 30 191)" class="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(minInputValue).toFixed(0)}}</text>
<text transform="matrix(0 1 -1 0 342 191)" class="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(maxInputValue).toFixed(0)}}</text>
<text transform="matrix(0.309 0.9511 -0.9511 0.309 335 145)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+9*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.5878 0.809 -0.809 0.5878 313 100)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.809 0.5878 -0.5878 0.809 278 67)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+7*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.9511 0.309 -0.309 0.9511 234 46)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 186 38)" class="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(((maxInputValue-minInputValue)/2)+2).toFixed(0)}}</text>
<text transform="matrix(0.9511 -0.309 0.309 0.9511 138 45.2013)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.809 -0.5878 0.5878 0.809 95 67)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.5878 -0.809 0.809 0.5878 59 102)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.309 -0.9511 0.9511 0.309 37 146)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+1*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -81.6641 187.8453)" style="fill:#808080;" cx="185.9" cy="192.5" rx="15" ry="15"/>
<g>
	<text transform="matrix(1 0 0 1 185.9 145)" style="font-family:'SourceSansPro-Bold'; font-size:60px;" text-anchor="middle">{{prettyValue}}</text>
</g>
<g>
	<path style="fill:#C1272D;" d="M182.4,196L81.3,87.8L189.5,189c2,1.9,2.1,5.1,0.2,7.1c-1.9,2-5.1,2.1-7.1,0.2
		C182.5,196.2,182.5,196.1,182.4,196z" transform="rotate({{rotateValue}} 185.9,192.5)"/>
</g>
<g>
	<text transform="matrix(1 0 0 1 185.9 145)" style="font-family:'SourceSansPro-Bold'; font-size:60px;" text-anchor="middle">{{prettyValue}}</text>
</g>
</svg>
Program
 Code Block
linenumberstrue
collapsetrue
var myRactive = this;
 
myRactive.prettyValue        = GetPrettyValue(point);
myRactive.</svg>
Program
 Code Block
linenumberstrue
collapsetrue
var myRactive = this;
 
myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myNavName          = this.shortName || point.navName;
myRactive.minInputValue      = this.minVal || point.minVal || 0;
myRactive.maxInputValue      = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue     = myRactive.minOutputVal ||  -45;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  135;
myRactive.accentColor  
var myRotateValue     = "#000";fin.Utils.ResetBAS(point.curVal, myRactive.color1minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
  
    = "#7dc5f0";
myRactive.color2             = "#006bac";
  
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
  
myRactive.ractive.animate('myRactive.ractive.animate('rotateValue',myRotateValue);
Model: svgGauge3.zip
Ractive
 Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 375 233" style="enable-background:new 0 0 375 233;" xml:space="preserve">
<path style="fill:#E6E6E6;" d="M46.5,184c-5.8,0-10.4-4.9-10-10.7C42,95.4,106.9,34,186.2,34s144.1,61.4,149.6,139.3c0.4,5.8-4.2,10.7-10,10.7
	H46.5z"/>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -75.5798 185.5332)" style="fill:#808080;" cx="186.2" cy="184" rx="15" ry="15"/>
<line style="fill:none;stroke:#756988;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="186.2" y1="34" x2="186.2" y2="58"/>
<text transform="matrix(1 0 0 1 186.4203 72.1063)" style="fill:#756988; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+5*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#627A9E;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="139.8" y1="41.3" x2="147.2" y2="64.2"/>
<text transform="matrix(0.9511 -0.309 0.309 0.9511 151.6 77.3606)" style="fill:#627A9E; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#4F8AB5;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="98" y1="62.6" x2="112.1" y2="82.1"/>
<text transform="matrix(0.809 -0.5878 0.5878 0.809 121 93.837)" style="fill:#4F8AB5; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#3C9BCB;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="64.8" y1="95.8" x2="84.2" y2="109.9"/>
<text transform="matrix(0.5878 -0.809 0.809 0.5878 96 119)" style="fill:#3C9BCB; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#29ABE2;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="43.5" y1="137.6" x2="66.3" y2="145.1"/>
<text transform="matrix(0.309 -0.9511 0.9511 0.309 79 149)" style="fill:#29ABE2; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+1*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#C1272D;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="328.8" y1="137.6" x2="306" y2="145.1"/>
<text transform="matrix(0.309 0.9511 -0.9511 0.309 292 150)" style="fill:#C1272D; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+9*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#AE3844;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="307.5" y1="95.8" x2="288.1" y2="109.9"/>
<text transform="matrix(0.5878 0.809 -0.809 0.5878 276.332 119)" style="fill:#AE3844; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#9B485A;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="274.3" y1="62.6" x2="260.2" y2="82.1"/>
<text transform="matrix(0.809 0.5878 -0.5878 0.809 252 94)" style="fill:#9B485A; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+7*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#885971;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="232.5" y1="41.3" x2="225.1" y2="64.2"/>
<text transform="matrix(0.9511 0.309 -0.309 0.9511 221 77)" style="fill:#885971; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<g>
	<path style="fill:#C1272D;style" d="M182.6,187.5L81.5,79.3l108.2,101.1c2,1.9,2.1,5.1,0.2,7.1c-1.9,2-5.1,2.1-7.1,0.2
		C182.8,187.7,182.7,187.6,182.6,187.5z" transform="rotate({{rotateValue}} 186.2,184)"/>
</g>
</svg>
...
 Code Block
linenumberstrue
collapsetrue
var myRactive = this;
 
myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myNavName          = this.shortName || point.navName;
myRactive.minInputValue      = this.minVal || point.minVal || 0;
myRactive.maxInputValue      = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue     = myRactive.minOutputVal ||  -45;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  135;
 myRactive.accentColor 
var myRotateValue     = "#000";fin.Utils.ResetBAS(point.curVal, myRactive.color1minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
  
    = "#7dc5f0";
myRactive.color2             = "#006bac";
  
var myRotateValuemyRactive.ractive.animate('rotateValue',myRotateValue);
Image Added
Model: svgGauge4.zip
Ractive
 Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 333.1 330.1" style="enable-background:new 0 0 333.1 330.1;" xml:space="preserve">
<circle style="fill:#FFFFFF;" cx="166.5" cy="158.2" r="151"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="8.2485" x2="166.5468" y2="308.2485">
	<stop  offset="0" style="stop-color:#D8D8D8"/>
	<stop  offset="0.3673" style="stop-color:#6E6E6E"/>
	<stop  offset="0.6684" style="stop-color:#ABABAB"/>
	<stop  offset="1" style="stop-color:#303030"/>
</linearGradient>
<circle style="fill:url(#SVGID_1_);" cx="166.5" cy="158.2" r="150"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="291.2485" x2="166.5468" y2="25.2485">
	<stop  offset="0" style="stop-color:#FFFFFF"/>
	<stop  offset="0.2194" style="stop-color:#C4C4C4"/>
	<stop  offset="0.4388" style="stop-color:#C0C0C0"/>
	<stop  offset="0.6173" style="stop-color:#ABABAB"/>
	<stop  offset="0.7704" style="stop-color:#6E6E6E"/>
	<stop  offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<circle style="fill:url(#SVGID_2_);" cx="166.5" cy="158.2" r="133"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="288.2485" x2="166.5468" y2="28.2485">
	<stop  offset="0" style="stop-color:#DEDEDE"/>
	<stop  offset="1" style="stop-color:#303030"/>
</linearGradient>
<circle style="fill:url(#SVGID_3_);" cx="166.5" cy="158.2" r="130"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="273.2485" x2="166.5468" y2="43.2485">
	<stop  offset="0" style="stop-color:#363636"/>
	<stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<circle style="fill:url(#SVGID_4_);" cx="166.5" cy="158.2" r="115"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="268.2485" x2="166.5468" y2="48.2485">
	<stop  offset="0" style="stop-color:#363636"/>
	<stop  offset="2.381682e-03" style="stop-color:#363636"/>
	<stop  offset="0.2586" style="stop-color:#272727"/>
	<stop  offset="0.5574" style="stop-color:#1E1E1E"/>
	<stop  offset="1" style="stop-color:#1B1B1B"/>
</linearGradient>
<circle style="fill:url(#SVGID_5_);" cx="166.5" cy="158.2" r="110"/>
<g>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="147" y1="51.6" x2="150.2" y2="69.4"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="110.4" y1="65" x2="119.4" y2="80.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="80.5" y1="90.1" x2="94.3" y2="101.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="61" y1="123.8" x2="77.9" y2="130"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="54.2" y1="162.2" x2="72.2" y2="162.2"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="278.9" y1="162.2" x2="260.9" y2="162.2"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="272.1" y1="123.8" x2="255.2" y2="130"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="252.6" y1="90.1" x2="238.8" y2="101.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="222.7" y1="65" x2="213.7" y2="80.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="186" y1="51.6" x2="182.9" y2="69.4"/>
</g>
<g>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="147" y1="47.6" x2="150.2" y2="65.4"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="110.4" y1="61" x2="119.4" y2="76.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="80.5" y1="86.1" x2="94.3" y2="97.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="61" y1="119.8" x2="77.9" y2="126"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="54.2" y1="158.2" x2="72.2" y2="158.2"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="278.9" y1="158.2" x2="260.9" y2="158.2"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="272.1" y1="119.8" x2="255.2" y2="126"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="252.6" y1="86.1" x2="238.8" y2="97.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="222.7" y1="61" x2="213.7" y2="76.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="186" y1="47.6" x2="182.9" y2="65.4"/>
</g>
<radialGradient id="SVGID_6_" cx="166.5468" cy="212.2485" r="24" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#000000"/>
	<stop  offset="1" style="stop-color:#FFFFFF"/>
</radialGradient>
<!-- <circle class="st8" cx="166.5" cy="212.2" r="24"/> -->
<g id="needle">
	<g>
		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="156.5468" y1="153.2485" x2="176.5468" y2="153.2485">
			<stop  offset="0" style="stop-color:#F1A224"/>
			<stop  offset="1" style="stop-color:#F13524"/>
		</linearGradient>
		<path style="fill:url(#SVGID_7_);" d="M170.6,92.3l5.9,116c0,5.5-4.5,10-10,10s-10-4.5-10-10l6.1-116c0-2.2,1.8-4,4-4S170.6,90,170.6,92.3z" transform="rotate({{rotateValue}} 166.5,208.2)"/>
	</g>
	<circle style="fill:none;" cx="166.5" cy="208.2" r="120"/>
	<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="216.2485" x2="166.5468" y2="90.2485">
		<stop  offset="0" style="stop-color:#FFE68C"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</linearGradient>
  
  
	<path style="fill:url(#SVGID_8_);" d="M166.6,90.2c1.1,0,2,0.9,2,2l0,0.1l0,0.1l5.9,115.9c0,4.4-3.6,7.9-8,7.9c-2.1,0-4.1-0.8-5.7-2.3
		c-1.5-1.5-2.3-3.5-2.3-5.6l6.1-115.9l0-0.1l0-0.1C164.6,91.1,165.5,90.2,166.6,90.2L166.6,90.2" transform="rotate({{rotateValue}} 166.5,208.2)"/>
  
  
</g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="188.2485" x2="166.5468" y2="228.2485">
	<stop  offset="0" style="stop-color:#FFFFFF"/>
	<stop  offset="1" style="stop-color:#4A4A4A"/>
</linearGradient>
<circle style="fill:url(#SVGID_9_);" cx="166.5" cy="208.2" r="20"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="190.2485" x2="166.5468" y2="226.2485">
	<stop  offset="0" style="stop-color:#BBBBBB"/>
	<stop  offset="1" style="stop-color:#767676"/>
</linearGradient>
<circle style="fill:url(#SVGID_10_);" cx="166.5" cy="208.2" r="18"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="196.2485" x2="166.5468" y2="220.2485">
	<stop  offset="0" style="stop-color:#767676"/>
	<stop  offset="1" style="stop-color:#BBBBBB"/>
</linearGradient>
<circle style="fill:url(#SVGID_11_);" cx="166.5" cy="208.2" r="12"/>
<text transform="matrix(1 0 0 1 80.2416 164.3913)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 167 82.0573)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+maxInputValue)/2).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 254 164.3913)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="end">{{(maxInputValue).toFixed(0)}}</text>
</svg>
Program
 Code Block
linenumberstrue
collapsetrue
var myRactive = this;
  
myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myNavName          = this.shortName || point.navName;
myRactive.minInputValue      = this.minVal || point.minVal || 0;
myRactive.maxInputValue      = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue     = myRactive.minOutputVal ||  -65;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  65;
   
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
   
myRactive.ractive.animate('rotateValue',myRotateValue);
Image Added
Model: 
Ractive
 Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-10 0 380 152.9" style="enable-background:new 0 0 330 152.9;" xml:space="preserve">
<title>svg_bar_gauge</title>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 {{rotateValue1}} 114.4473)" style="fill:{{myAccentColor}};" cx="113" cy="117.9" rx="35" ry="35"/>
<polygon style="fill:{{myAccentColor}};"  transform='translate({{rotateValue2}} 0)' points="113,64.9 121,84.9 105,84.9"/>
<text transform="matrix(1 0 0 1 {{rotateValue3}} 125)" style="fill:#fff; font-family:'SourceSansPro-Bold'; font-size:20px;" text-anchor="middle">{{prettyValue}}</text>
<line style="fill:none;stroke:#E6E6E6;stroke-width:30;stroke-linecap:round;stroke-miterlimit:10;" x1="15" y1="44.9" x2="315" y2="44.9"/>
<line style="fill:none;stroke:{{myAccentColor}};stroke-width:30;stroke-linecap:round;stroke-miterlimit:10;" x1="15" y1="44.9" x2="{{rotateValue4}}" y2="44.9"/>
<line style="opacity:0.5;fill:none;stroke:{{myAccentColor}};stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;enable-background:new;" x1="164.6" y1="64.9" x2="164.6" y2="24.9"/>
<text transform="matrix(1 0 0 1 155.98 14.94)" style="fill:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{((maxInputValue+minInputValue)/2).toFixed(0)}}</text>
</svg>

Program
 Code Block
linenumberstrue
collapsetrue
var myRactive = this;
  
myRactive.prettyValue         = GetPrettyValue(point);
myRactive.myValue             = point.curVal;
myRactive.myNavName           = this.shortName || point.navName;
myRactive.minInputValue       = this.minVal || point.minVal || 0;
myRactive.maxInputValue       = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue1     = myRactive.minOutputVal ||  -135;
myRactive.maxOutputValue1     = myRactive.maxOutputVal ||  165;
myRactive.minOutputValue2     = myRactive.minOutputVal ||  -85;
myRactive.maxOutputValue2     = myRactive.maxOutputVal ||  215;
myRactive.minOutputValue3     = myRactive.minOutputVal ||  28;
myRactive.maxOutputValue3     = myRactive.maxOutputVal ||  328;
myRactive.minOutputValue4     = myRactive.minOutputVal ||  15;
myRactive.maxOutputValue4     = myRactive.maxOutputVal ||  315;
myRactive.myAccentColor       = this.accentColor || "#29ABE2";
   
var myRotateValue1     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue1, myRactive.maxOutputValue1);
var myRotateValue2     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue2, myRactive.maxOutputValue2);
var myRotateValue3     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue3, myRactive.maxOutputValue3);
var myRotateValue4     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue4, myRactive.maxOutputValue4);
   
myRactive.ractive.animate('rotateValue1',myRotateValue1);
myRactive.ractive.animate('rotateValue2',myRotateValue2);
myRactive.ractive.animate('rotateValue3',myRotateValue3);
myRactive.ractive.animate('rotateValue4',myRotateValue4);
Colors: To change the colors of the bar, use the tag accentColor.  accentColor will change the color of the ball and bar.
Image Added
Model: 
Ractive
 Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 333.1 330.1" style="enable-background:new 0 0 333.1 330.1;" xml:space="preserve">
<circle style="fill:#CCCCCC;" cx="166.5" cy="165" r="150"/>
<circle style="fill:{{myAccentColor}};" cx="166.5" cy="35" r="10" transform="rotate({{rotateValue}} 166.5, 165)"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="166.5" y1="20" x2="166.5" y2="310"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="153.9" y1="20.6" x2="179.2" y2="309.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="141.4" y1="22.3" x2="191.7" y2="307.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="129" y1="25" x2="204.1" y2="305.1"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="117" y1="28.8" x2="216.1" y2="301.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="105.3" y1="33.6" x2="227.8" y2="296.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="94" y1="39.5" x2="239" y2="290.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="83.4" y1="46.3" x2="249.7" y2="283.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="73.3" y1="54" x2="259.8" y2="276.1"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="64" y1="62.5" x2="269.1" y2="267.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="55.5" y1="71.8" x2="277.6" y2="258.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="47.8" y1="81.9" x2="285.3" y2="248.2"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="41" y1="92.5" x2="292.1" y2="237.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="35.1" y1="103.8" x2="298" y2="226.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="30.3" y1="115.5" x2="302.8" y2="214.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="26.5" y1="127.5" x2="306.6" y2="202.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="23.7" y1="139.9" x2="309.3" y2="190.2"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="22.1" y1="152.4" x2="311" y2="177.7"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="21.5" y1="165" x2="311.5" y2="165"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="22.1" y1="177.7" x2="311" y2="152.4"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="23.7" y1="190.2" x2="309.3" y2="139.9"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="26.5" y1="202.6" x2="306.6" y2="127.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="30.3" y1="214.6" x2="302.8" y2="115.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="35.1" y1="226.3" x2="298" y2="103.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="41" y1="237.5" x2="292.1" y2="92.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="47.8" y1="248.2" x2="285.3" y2="81.9"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="55.5" y1="258.3" x2="277.6" y2="71.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="64" y1="267.6" x2="269.1" y2="62.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="73.3" y1="276.1" x2="259.8" y2="54"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="83.4" y1="283.8" x2="249.7" y2="46.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="94" y1="290.6" x2="239" y2="39.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="105.3" y1="296.5" x2="227.8" y2="33.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="117" y1="301.3" x2="216.1" y2="28.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="129" y1="305.1" x2="204.1" y2="25"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="141.4" y1="307.8" x2="191.7" y2="22.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="153.9" y1="309.5" x2="179.2" y2="20.6"/>
<circle style="opacity:0.1;enable-background:new;" cx="166.5" cy="169" r="120"/>
<circle style="fill:#E6E6E6;" cx="166.5" cy="165" r="120"/>
<path style="fill:#E6E6E6;" d="M166.5,15c-82.8,0-150,67.2-150,150s67.2,150,150,150s150-67.2,150-150S249.4,15,166.5,15z M166.5,305
	c-77.3,0-140-62.7-140-140s62.7-140,140-140s140,62.7,140,140S243.9,305,166.5,305z"/>
<text transform="matrix(1 0 0 1 168 130.1867)" style="font-family:'SourceSansPro-Light'; font-size:18.5621px;" text-anchor="middle">{{myNavName}}</text>
<text transform="matrix(1 0 0 1 168 248.4367)" style="font-family:'SourceSansPro-Light'; font-size:18.5621px;" text-anchor="middle">{{myUnits}}</text>
<g>
	<g>
		<text transform="matrix(1 0 0 1 168 179.5252)" style="fill:#fff; font-family:'SourceSansPro-Regular'; font-size:51.0082px;" text-anchor="middle">{{myValue.toFixed(2)}}</text>
	</g>
	<g>
		<text transform="matrix(1 0 0 1 168 177.9784)" style="font-family:'SourceSansPro-Regular'; font-size:51.0082px;" text-anchor="middle">{{myValue.toFixed(2)}}</text>
	</g>
</g>
</svg>
Program
 Code Block
linenumberstrue
collapsetrue
var myRactive = this;

myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myUnits            = point.dataPoint.unit;
myRactive.myNavName          = this.shortName || point.navName;
myRactive.minInputValue      = this.minVal || point.minVal || 0;
myRactive.maxInputValue      = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue     = myRactive.minOutputVal ||  0;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  360;
myRactive.myAccentColor      = this.accentColor ||"#29ABE2";
   
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
   
myRactive.ractive.animate('rotateValue',myRotateValue);
Colors: To change the colors of the ball, use the tag accentColor.
Image Added
Model: 
Ractive
 Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 333.1 330.1" style="enable-background:new 0 0 333.1 330.1;" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="167.1998" y1="317.0079" x2="167.1998" y2="15.0079">
	<stop  offset="0" style="stop-color:#474747"/>
	<stop  offset="1" style="stop-color:#1B1B1B"/>
</linearGradient>
<circle style="fill:url(#SVGID_1_);" cx="167.2" cy="166" r="151"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="167.2" y1="16" x2="167.2" y2="40"/>
<text transform="matrix(1 0 0 1 167.3 250)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:25px;" text-anchor="middle">{{prettyValue}}</text>
  <text transform="matrix(1 0 0 1 167.3 280)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:16px;" text-anchor="middle">{{myNavName}}</text>
<text transform="matrix(1 0 0 1 167.3 54.1143)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+5*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="233" y1="31.2" x2="222.4" y2="52.8"/>
<text transform="matrix(0.8988 0.4384 -0.4384 0.8988 216.5 65)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="285.4" y1="73.7" x2="266.5" y2="88.4"/>
<text transform="matrix(0.6157 0.788 -0.788 0.6157 256 97)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+7*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="313.9" y1="134.8" x2="290.4" y2="139.8"/>
<text transform="matrix(0.2079 0.9782 -0.9782 0.2079 277 143)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="312.7" y1="202.3" x2="289.5" y2="196.5"/>
<text transform="matrix(-0.2419 0.9703 -0.9703 -0.2419 276.5 193)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+9*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="282.1" y1="262.4" x2="263.7" y2="247"/>
<text transform="matrix(-0.6428 0.766 -0.766 -0.6428 253 239)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(maxInputValue).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="101.4" y1="31.2" x2="112" y2="52.8"/>
<text transform="matrix(0.8988 -0.4384 0.4384 0.8988 118 66)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="49" y1="73.7" x2="67.9" y2="88.4"/>
<text transform="matrix(0.6157 -0.788 0.788 0.6157 79 97)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="20.5" y1="134.8" x2="44" y2="139.8"/>
<text transform="matrix(0.2079 -0.9782 0.9782 0.2079 58 143)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="21.7" y1="202.3" x2="44.9" y2="196.5"/>
<text transform="matrix(-0.2419 -0.9703 0.9703 -0.2419 59 193)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+1*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="52.3" y1="262.4" x2="70.7" y2="247"/>
<text transform="matrix(-0.6428 -0.766 0.766 -0.6428 81 238)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(minInputValue).toFixed(0)}}</text>
<path style="fill:#00FF00;" d="M95.9,208l-12.4,7.1c-1.4,0.8-1.9,2.6-1,4c1.8,2.9,3.7,5.6,5.8,8.2c1,1.3,2.9,1.5,4.1,0.4l11-9.2
	c1.2-1,1.4-2.7,0.4-3.9c-1.4-1.9-2.8-3.8-4.1-5.8C98.9,207.7,97.2,207.3,95.9,208z"/>
<path style="fill:#15FF00;" d="M89.7,195l-13.4,4.9c-1.5,0.6-2.3,2.3-1.7,3.8c1.3,3.1,2.7,6.2,4.3,9.1c0.8,1.4,2.6,2,4,1.1l12.4-7.1
	c1.3-0.8,1.8-2.4,1.1-3.8c-1.1-2.1-2.1-4.2-3-6.4C92.7,195.2,91.1,194.5,89.7,195z"/>
<path style="fill:#2AFF00;" d="M85.8,181.1l-14.1,2.5c-1.6,0.3-2.6,1.8-2.3,3.4c0.7,3.3,1.6,6.6,2.6,9.7c0.5,1.5,2.2,2.4,3.7,1.8l13.4-4.9
	c1.4-0.5,2.2-2.1,1.7-3.5c-0.7-2.2-1.3-4.5-1.8-6.8C88.8,181.8,87.3,180.8,85.8,181.1z"/>
<path style="fill:#40FF00;" d="M84.4,166.7l-14.3,0c-1.6,0-2.9,1.4-2.9,3c0.1,3.4,0.4,6.7,0.9,10c0.2,1.6,1.7,2.7,3.3,2.4l14.1-2.5
	c1.5-0.3,2.5-1.7,2.3-3.2c-0.3-2.3-0.5-4.7-0.6-7C87.2,167.9,86,166.7,84.4,166.7z"/>
<path style="fill:#55FF00;" d="M85.6,152.3l-14.1-2.5c-1.6-0.3-3.1,0.8-3.3,2.4c-0.5,3.3-0.7,6.6-0.9,10c-0.1,1.6,1.2,3,2.9,3l14.3,0
	c1.5,0,2.8-1.2,2.8-2.7c0.1-2.4,0.3-4.7,0.6-7C88.1,154,87.1,152.6,85.6,152.3z"/>
<path style="fill:#6AFF00;" d="M89.2,138.4l-13.4-4.9c-1.5-0.6-3.2,0.3-3.7,1.8c-1,3.2-1.9,6.4-2.6,9.7c-0.3,1.6,0.7,3.1,2.3,3.4l14.1,2.5
	c1.5,0.3,3-0.7,3.3-2.2c0.5-2.3,1.1-4.6,1.8-6.8C91.4,140.5,90.6,138.9,89.2,138.4z"/>
<path style="fill:#7FFF00;" d="M95.2,125.2l-12.4-7.1c-1.4-0.8-3.2-0.3-4,1.1c-1.6,3-3,6-4.3,9.1c-0.6,1.5,0.1,3.2,1.7,3.8l13.4,4.9
	c1.4,0.5,3-0.2,3.6-1.6c0.9-2.2,1.9-4.3,3-6.4C97,127.7,96.5,126,95.2,125.2z"/>
<path style="fill:#95FF00;" d="M103.3,113.4l-11-9.2c-1.2-1-3.1-0.8-4.1,0.4c-2.1,2.6-4,5.4-5.8,8.2c-0.9,1.4-0.4,3.2,1,4l12.4,7.1
	c1.3,0.8,3,0.3,3.8-0.9c1.3-2,2.6-3.9,4.1-5.8C104.7,116.1,104.5,114.3,103.3,113.4z"/>
<path style="fill:#AAFF00;" d="M113.5,103.1l-9.2-11c-1-1.2-2.9-1.4-4.1-0.3c-2.5,2.3-4.9,4.6-7.1,7.1c-1.1,1.2-1,3.1,0.3,4.1l11,9.2
	c1.2,1,2.9,0.9,3.9-0.3c1.6-1.7,3.3-3.4,5-5C114.3,106,114.4,104.2,113.5,103.1z"/>
<path style="fill:#BFFF00;" d="M125.2,94.7L118,82.3c-0.8-1.4-2.6-1.9-4-1c-2.9,1.8-5.6,3.7-8.2,5.8c-1.3,1-1.5,2.9-0.4,4.1l9.2,11
	c1,1.2,2.7,1.4,3.9,0.4c1.9-1.4,3.8-2.8,5.8-4.1C125.5,97.7,126,96,125.2,94.7z"/>
<path style="fill:#D4FF00;" d="M138.2,88.5L133.3,75c-0.6-1.5-2.3-2.3-3.8-1.7c-3.1,1.3-6.2,2.7-9.1,4.3c-1.4,0.8-2,2.6-1.1,4l7.1,12.4
	c0.8,1.3,2.4,1.8,3.8,1.1c2.1-1.1,4.2-2.1,6.4-3C138,91.5,138.7,89.9,138.2,88.5z"/>
<path style="fill:#EAFF00;" d="M152.1,84.6l-2.5-14.1c-0.3-1.6-1.8-2.6-3.4-2.3c-3.3,0.7-6.6,1.6-9.7,2.6c-1.5,0.5-2.4,2.2-1.8,3.7l4.9,13.4
	c0.5,1.4,2.1,2.2,3.5,1.7c2.2-0.7,4.5-1.3,6.8-1.8C151.4,87.6,152.4,86.1,152.1,84.6z"/>
<path style="fill:#FFFF00;" d="M166.5,83.2l0-14.3c0-1.6-1.4-2.9-3-2.9c-3.3,0.1-6.7,0.4-10,0.9c-1.6,0.2-2.7,1.7-2.4,3.3l2.5,14.1
	c0.3,1.5,1.7,2.5,3.2,2.3c2.3-0.3,4.7-0.5,7-0.6C165.3,86,166.5,84.8,166.5,83.2z"/>
<path style="fill:#FFFF00;" d="M180.9,84.4l2.5-14.1c0.3-1.6-0.8-3.1-2.4-3.3c-3.3-0.5-6.6-0.7-10-0.9c-1.6-0.1-3,1.2-3,2.9l0,14.3
	c0,1.5,1.2,2.8,2.7,2.8c2.4,0.1,4.7,0.3,7,0.6C179.2,86.9,180.6,85.9,180.9,84.4z"/>
<path style="fill:#FFEA00;" d="M194.8,88l4.9-13.4c0.6-1.5-0.3-3.2-1.8-3.7c-3.2-1-6.4-1.9-9.7-2.6c-1.6-0.3-3.1,0.7-3.4,2.3l-2.5,14.1
	c-0.3,1.5,0.7,3,2.2,3.3c2.3,0.5,4.6,1.1,6.8,1.8C192.8,90.2,194.3,89.4,194.8,88z"/>
<path style="fill:#FFD500;" d="M208,94l7.1-12.4c0.8-1.4,0.3-3.2-1.1-4c-3-1.6-6-3-9.1-4.3c-1.5-0.6-3.2,0.1-3.8,1.7l-4.9,13.4
	c-0.5,1.4,0.2,3,1.6,3.6c2.2,0.9,4.3,1.9,6.4,3C205.5,95.8,207.2,95.3,208,94z"/>
<path style="fill:#FFBF00;" d="M219.9,102.2l9.2-11c1-1.2,0.8-3.1-0.4-4.1c-2.6-2.1-5.4-4-8.2-5.8c-1.4-0.9-3.2-0.4-4,1l-7.1,12.4
	c-0.8,1.3-0.3,3,0.9,3.8c2,1.3,3.9,2.6,5.8,4.1C217.1,103.5,218.9,103.3,219.9,102.2z"/>
<path style="fill:#FFAA00;" d="M230.1,112.3l11-9.2c1.2-1,1.4-2.9,0.3-4.1c-2.3-2.5-4.6-4.9-7.1-7.1c-1.2-1.1-3.1-1-4.1,0.3l-9.2,11
	c-1,1.2-0.9,2.9,0.3,3.9c1.7,1.6,3.4,3.3,5,5C227.2,113.1,229,113.2,230.1,112.3z"/>
<path style="fill:#FF9500;" d="M238.5,124l12.4-7.1c1.4-0.8,1.9-2.6,1-4c-1.8-2.9-3.7-5.6-5.8-8.2c-1-1.3-2.9-1.5-4.1-0.4l-11,9.2
	c-1.2,1-1.4,2.7-0.4,3.9c1.4,1.9,2.8,3.8,4.1,5.8C235.5,124.3,237.2,124.8,238.5,124z"/>
<path style="fill:#FF7F00;" d="M244.7,137l13.4-4.9c1.5-0.6,2.3-2.3,1.7-3.8c-1.3-3.1-2.7-6.2-4.3-9.1c-0.8-1.4-2.6-2-4-1.1l-12.4,7.1
	c-1.3,0.8-1.8,2.4-1.1,3.8c1.1,2.1,2.1,4.2,3,6.4C241.7,136.8,243.3,137.5,244.7,137z"/>
<path style="fill:#FF6A00;" d="M248.6,150.9l14.1-2.5c1.6-0.3,2.6-1.8,2.3-3.4c-0.7-3.3-1.6-6.6-2.6-9.7c-0.5-1.5-2.2-2.4-3.7-1.8l-13.4,4.9
	c-1.4,0.5-2.2,2.1-1.7,3.5c0.7,2.2,1.3,4.5,1.8,6.8C245.6,150.2,247.1,151.2,248.6,150.9z"/>
<path style="fill:#FF5500;" d="M250,165.3h14.3c1.6,0,2.9-1.4,2.9-3c-0.1-3.4-0.4-6.7-0.9-10c-0.2-1.6-1.7-2.7-3.3-2.4l-14.1,2.5
	c-1.5,0.3-2.5,1.7-2.3,3.2c0.3,2.3,0.5,4.7,0.6,7C247.2,164.1,248.4,165.3,250,165.3z"/>
<path style="fill:#FF4000;" d="M248.8,179.7l14.1,2.5c1.6,0.3,3.1-0.8,3.3-2.4c0.5-3.3,0.7-6.6,0.9-10c0.1-1.6-1.2-3-2.9-3l-14.3,0
	c-1.5,0-2.8,1.2-2.8,2.7c-0.1,2.4-0.3,4.7-0.6,7C246.3,178,247.3,179.4,248.8,179.7z"/>
<path style="fill:#FF2B00;" d="M245.2,193.7l13.4,4.9c1.5,0.6,3.2-0.3,3.7-1.8c1-3.2,1.9-6.4,2.6-9.7c0.3-1.6-0.7-3.1-2.3-3.4l-14.1-2.5
	c-1.5-0.3-3,0.7-3.3,2.2c-0.5,2.3-1.1,4.6-1.8,6.8C243,191.6,243.8,193.1,245.2,193.7z"/>
<path style="fill:#FF1500;" d="M239.2,206.8l12.4,7.1c1.4,0.8,3.2,0.3,4-1.1c1.6-3,3-6,4.3-9.1c0.6-1.5-0.1-3.2-1.7-3.8l-13.4-4.9
	c-1.4-0.5-3,0.2-3.6,1.6c-0.9,2.2-1.9,4.3-3,6.4C237.4,204.3,237.9,206,239.2,206.8z"/>
<path style="fill:#FF0000;" d="M231.1,218.7l11,9.2c1.2,1,3.1,0.8,4.1-0.4c2.1-2.6,4-5.4,5.8-8.2c0.9-1.4,0.4-3.2-1-4l-12.4-7.1
	c-1.3-0.8-3-0.3-3.8,0.9c-1.3,2-2.6,3.9-4.1,5.8C229.7,215.9,229.9,217.7,231.1,218.7z"/>
<circle style="fill:#0071BC;" cx="167.2" cy="166" r="20"/>
<g>
</g>
<g style="opacity:0.3;">
	<radialGradient id="SVGID_2_" cx="93.2051" cy="218.0773" r="10.8016" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_2_);" d="M95.9,208l-12.4,7.1c-1.4,0.8-1.9,2.6-1,4c1.8,2.9,3.7,5.6,5.8,8.2c1,1.3,2.9,1.5,4.1,0.4l11-9.2
		c1.2-1,1.4-2.7,0.4-3.9c-1.4-1.9-2.8-3.8-4.1-5.8C98.9,207.7,97.2,207.3,95.9,208z"/>
	<radialGradient id="SVGID_3_" cx="85.4563" cy="204.5661" r="10.4556" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_3_);" d="M89.7,195l-13.4,4.9c-1.5,0.6-2.3,2.3-1.7,3.8c1.3,3.1,2.7,6.2,4.3,9.1c0.8,1.4,2.6,2,4,1.1l12.4-7.1
		c1.3-0.8,1.8-2.4,1.1-3.8c-1.1-2.1-2.1-4.2-3-6.4C92.7,195.2,91.1,194.5,89.7,195z"/>
	<radialGradient id="SVGID_4_" cx="80.2064" cy="189.8766" r="9.8867" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_4_);" d="M85.8,181.1l-14.1,2.5c-1.6,0.3-2.6,1.8-2.3,3.4c0.7,3.3,1.6,6.6,2.6,9.7c0.5,1.5,2.2,2.4,3.7,1.8l13.4-4.9
		c1.4-0.5,2.2-2.1,1.7-3.5c-0.7-2.2-1.3-4.5-1.8-6.8C88.8,181.8,87.3,180.8,85.8,181.1z"/>
	<radialGradient id="SVGID_5_" cx="77.591" cy="174.4641" r="9.1207" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_5_);" d="M84.4,166.7l-14.3,0c-1.6,0-2.9,1.4-2.9,3c0.1,3.4,0.4,6.7,0.9,10c0.2,1.6,1.7,2.7,3.3,2.4l14.1-2.5
		c1.5-0.3,2.5-1.7,2.3-3.2c-0.3-2.3-0.5-4.7-0.6-7C87.2,167.9,86,166.7,84.4,166.7z"/>
	<radialGradient id="SVGID_6_" cx="77.5911" cy="157.5516" r="9.1209" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_6_);" d="M85.6,152.3l-14.1-2.5c-1.6-0.3-3.1,0.8-3.3,2.4c-0.5,3.3-0.7,6.6-0.9,10c-0.1,1.6,1.2,3,2.9,3l14.3,0
		c1.5,0,2.8-1.2,2.8-2.7c0.1-2.4,0.3-4.7,0.6-7C88.1,154,87.1,152.6,85.6,152.3z"/>
	<radialGradient id="SVGID_7_" cx="80.1977" cy="142.1376" r="9.8904" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_7_);" d="M89.2,138.4l-13.4-4.9c-1.5-0.6-3.2,0.3-3.7,1.8c-1,3.2-1.9,6.4-2.6,9.7c-0.3,1.6,0.7,3.1,2.3,3.4l14.1,2.5
		c1.5,0.3,3-0.7,3.3-2.2c0.5-2.3,1.1-4.6,1.8-6.8C91.4,140.5,90.6,138.9,89.2,138.4z"/>
	<radialGradient id="SVGID_8_" cx="85.4637" cy="127.4538" r="10.456" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_8_);" d="M95.2,125.2l-12.4-7.1c-1.4-0.8-3.2-0.3-4,1.1c-1.6,3-3,6-4.3,9.1c-0.6,1.5,0.1,3.2,1.7,3.8l13.4,4.9
		c1.4,0.5,3-0.2,3.6-1.6c0.9-2.2,1.9-4.3,3-6.4C97,127.7,96.5,126,95.2,125.2z"/>
	<radialGradient id="SVGID_9_" cx="93.2138" cy="113.9446" r="10.8006" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_9_);" d="M103.3,113.4l-11-9.2c-1.2-1-3.1-0.8-4.1,0.4c-2.1,2.6-4,5.4-5.8,8.2c-0.9,1.4-0.4,3.2,1,4l12.4,7.1
		c1.3,0.8,3,0.3,3.8-0.9c1.3-2,2.6-3.9,4.1-5.8C104.7,116.1,104.5,114.3,103.3,113.4z"/>
	<radialGradient id="SVGID_10_" cx="103.2038" cy="102.0105" r="10.917" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_10_);" d="M113.5,103.1l-9.2-11c-1-1.2-2.9-1.4-4.1-0.3c-2.5,2.3-4.9,4.6-7.1,7.1c-1.1,1.2-1,3.1,0.3,4.1l11,9.2
		c1.2,1,2.9,0.9,3.9-0.3c1.6-1.7,3.3-3.4,5-5C114.3,106,114.4,104.2,113.5,103.1z"/>
	<radialGradient id="SVGID_11_" cx="115.1302" cy="92.0132" r="10.8016" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_11_);" d="M125.2,94.7L118,82.3c-0.8-1.4-2.6-1.9-4-1c-2.9,1.8-5.6,3.7-8.2,5.8c-1.3,1-1.5,2.9-0.4,4.1l9.2,11
		c1,1.2,2.7,1.4,3.9,0.4c1.9-1.4,3.8-2.8,5.8-4.1C125.5,97.7,126,96,125.2,94.7z"/>
	<radialGradient id="SVGID_12_" cx="128.6414" cy="84.2644" r="10.4556" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_12_);" d="M138.2,88.5L133.3,75c-0.6-1.5-2.3-2.3-3.8-1.7c-3.1,1.3-6.2,2.7-9.1,4.3c-1.4,0.8-2,2.6-1.1,4l7.1,12.4
		c0.8,1.3,2.4,1.8,3.8,1.1c2.1-1.1,4.2-2.1,6.4-3C138,91.5,138.7,89.9,138.2,88.5z"/>
	<radialGradient id="SVGID_13_" cx="143.3311" cy="79.0144" r="9.8869" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_13_);" d="M152.1,84.6l-2.5-14.1c-0.3-1.6-1.8-2.6-3.4-2.3c-3.3,0.7-6.6,1.6-9.7,2.6c-1.5,0.5-2.4,2.2-1.8,3.7l4.9,13.4
		c0.5,1.4,2.1,2.2,3.5,1.7c2.2-0.7,4.5-1.3,6.8-1.8C151.4,87.6,152.4,86.1,152.1,84.6z"/>
	<radialGradient id="SVGID_14_" cx="158.7451" cy="76.397" r="9.1277" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_14_);" d="M166.5,83.2l0-14.3c0-1.6-1.4-2.9-3-2.9c-3.3,0.1-6.7,0.4-10,0.9c-1.6,0.2-2.7,1.7-2.4,3.3l2.5,14.1
		c0.3,1.5,1.7,2.5,3.2,2.3c2.3-0.3,4.7-0.5,7-0.6C165.3,86,166.5,84.8,166.5,83.2z"/>
	<radialGradient id="SVGID_15_" cx="175.6561" cy="76.3991" r="9.1207" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_15_);" d="M180.9,84.4l2.5-14.1c0.3-1.6-0.8-3.1-2.4-3.3c-3.3-0.5-6.6-0.7-10-0.9c-1.6-0.1-3,1.2-3,2.9l0,14.3
		c0,1.5,1.2,2.8,2.7,2.8c2.4,0.1,4.7,0.3,7,0.6C179.2,86.9,180.6,85.9,180.9,84.4z"/>
	<radialGradient id="SVGID_16_" cx="191.0698" cy="79.0057" r="9.8904" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_16_);" d="M194.8,88l4.9-13.4c0.6-1.5-0.3-3.2-1.8-3.7c-3.2-1-6.4-1.9-9.7-2.6c-1.6-0.3-3.1,0.7-3.4,2.3l-2.5,14.1
		c-0.3,1.5,0.7,3,2.2,3.3c2.3,0.5,4.6,1.1,6.8,1.8C192.8,90.2,194.3,89.4,194.8,88z"/>
	<radialGradient id="SVGID_17_" cx="205.7536" cy="84.2715" r="10.4561" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_17_);" d="M208,94l7.1-12.4c0.8-1.4,0.3-3.2-1.1-4c-3-1.6-6-3-9.1-4.3c-1.5-0.6-3.2,0.1-3.8,1.7l-4.9,13.4
		c-0.5,1.4,0.2,3,1.6,3.6c2.2,0.9,4.3,1.9,6.4,3C205.5,95.8,207.2,95.3,208,94z"/>
	<radialGradient id="SVGID_18_" cx="219.2632" cy="92.0219" r="10.801" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_18_);" d="M219.9,102.2l9.2-11c1-1.2,0.8-3.1-0.4-4.1c-2.6-2.1-5.4-4-8.2-5.8c-1.4-0.9-3.2-0.4-4,1l-7.1,12.4
		c-0.8,1.3-0.3,3,0.9,3.8c2,1.3,3.9,2.6,5.8,4.1C217.1,103.5,218.9,103.3,219.9,102.2z"/>
	<radialGradient id="SVGID_19_" cx="231.1973" cy="102.012" r="10.9167" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_19_);" d="M230.1,112.3l11-9.2c1.2-1,1.4-2.9,0.3-4.1c-2.3-2.5-4.6-4.9-7.1-7.1c-1.2-1.1-3.1-1-4.1,0.3l-9.2,11
		c-1,1.2-0.9,2.9,0.3,3.9c1.7,1.6,3.4,3.3,5,5C227.2,113.1,229,113.2,230.1,112.3z"/>
	<radialGradient id="SVGID_20_" cx="241.1944" cy="113.938" r="10.8016" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_20_);" d="M238.5,124l12.4-7.1c1.4-0.8,1.9-2.6,1-4c-1.8-2.9-3.7-5.6-5.8-8.2c-1-1.3-2.9-1.5-4.1-0.4l-11,9.2
		c-1.2,1-1.4,2.7-0.4,3.9c1.4,1.9,2.8,3.8,4.1,5.8C235.5,124.3,237.2,124.8,238.5,124z"/>
	<radialGradient id="SVGID_21_" cx="248.9432" cy="127.4492" r="10.4556" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_21_);" d="M244.7,137l13.4-4.9c1.5-0.6,2.3-2.3,1.7-3.8c-1.3-3.1-2.7-6.2-4.3-9.1c-0.8-1.4-2.6-2-4-1.1l-12.4,7.1
		c-1.3,0.8-1.8,2.4-1.1,3.8c1.1,2.1,2.1,4.2,3,6.4C241.7,136.8,243.3,137.5,244.7,137z"/>
	<radialGradient id="SVGID_22_" cx="254.1932" cy="142.139" r="9.8869" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_22_);" d="M248.6,150.9l14.1-2.5c1.6-0.3,2.6-1.8,2.3-3.4c-0.7-3.3-1.6-6.6-2.6-9.7c-0.5-1.5-2.2-2.4-3.7-1.8l-13.4,4.9
		c-1.4,0.5-2.2,2.1-1.7,3.5c0.7,2.2,1.3,4.5,1.8,6.8C245.6,150.2,247.1,151.2,248.6,150.9z"/>
	<radialGradient id="SVGID_23_" cx="256.8085" cy="157.5516" r="9.1209" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_23_);" d="M250,165.3h14.3c1.6,0,2.9-1.4,2.9-3c-0.1-3.4-0.4-6.7-0.9-10c-0.2-1.6-1.7-2.7-3.3-2.4l-14.1,2.5
		c-1.5,0.3-2.5,1.7-2.3,3.2c0.3,2.3,0.5,4.7,0.6,7C247.2,164.1,248.4,165.3,250,165.3z"/>
	<radialGradient id="SVGID_24_" cx="256.8086" cy="174.4641" r="9.1208" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_24_);" d="M248.8,179.7l14.1,2.5c1.6,0.3,3.1-0.8,3.3-2.4c0.5-3.3,0.7-6.6,0.9-10c0.1-1.6-1.2-3-2.9-3l-14.3,0
		c-1.5,0-2.8,1.2-2.8,2.7c-0.1,2.4-0.3,4.7-0.6,7C246.3,178,247.3,179.4,248.8,179.7z"/>
	<radialGradient id="SVGID_25_" cx="254.202" cy="189.8778" r="9.8904" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_25_);" d="M245.2,193.7l13.4,4.9c1.5,0.6,3.2-0.3,3.7-1.8c1-3.2,1.9-6.4,2.6-9.7c0.3-1.6-0.7-3.1-2.3-3.4l-14.1-2.5
		c-1.5-0.3-3,0.7-3.3,2.2c-0.5,2.3-1.1,4.6-1.8,6.8C243,191.6,243.8,193.1,245.2,193.7z"/>
	<radialGradient id="SVGID_26_" cx="248.9361" cy="204.5617" r="10.4561" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_26_);" d="M239.2,206.8l12.4,7.1c1.4,0.8,3.2,0.3,4-1.1c1.6-3,3-6,4.3-9.1c0.6-1.5-0.1-3.2-1.7-3.8l-13.4-4.9
		c-1.4-0.5-3,0.2-3.6,1.6c-0.9,2.2-1.9,4.3-3,6.4C237.4,204.3,237.9,206,239.2,206.8z"/>
	<radialGradient id="SVGID_27_" cx="241.1859" cy="218.0711" r="10.8008" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</radialGradient>
	<path style="fill:url(#SVGID_27_);" d="M231.1,218.7l11,9.2c1.2,1,3.1,0.8,4.1-0.4c2.1-2.6,4-5.4,5.8-8.2c0.9-1.4,0.4-3.2-1-4l-12.4-7.1
		c-1.3-0.8-3-0.3-3.8,0.9c-1.3,2-2.6,3.9-4.1,5.8C229.7,215.9,229.9,217.7,231.1,218.7z"/>
  
</g>
	<path style="fill:#29ABE2;" d="M162.2,166l5-111l5,111c0.1,2.8-2,5.1-4.8,5.2s-5.1-2-5.2-4.8C162.2,166.3,162.2,166.2,162.2,166z" transform="rotate({{rotateValue}} 167.2,166)"/>
</svg>

Program
 Code Block
linenumberstrue
collapsetrue
var myRactive = this;

myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myUnits            = point.dataPoint.unit;
myRactive.myNavName          = this.shortName || point.navName;
myRactive.minInputValue      = this.minVal || point.minVal || 0;
myRactive.maxInputValue      = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue     = myRactive.minOutputVal ||  -130;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  130;
   
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
   
myRactive.ractive.animate('rotateValue',myRotateValue);


Image Added Image Added
Model: horizontalBarGaugeBorder.f5m
Ractive
 Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 534 106" enable-background="new 0 0 534 106" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="13.2856" y1="43.3574" x2="525.4287" y2="43.3574">
	<stop  offset="0" style="stop-color:#8B90C7"/>
	<stop  offset="0.5" style="stop-color:#FFFFFF"/>
	<stop  offset="1" style="stop-color:#E97D84"/>
</linearGradient>
<rect x="13.286" y="9.714" fill="url(#SVGID_1_)" stroke="{{myBorderColor}}" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="512.143" height="67.286"/>
<text x="13.286" y="90" font-family="Arial" fill="{{mySubTextColor}}" font-size="12" text-anchor="middle">{{minInputValue}}</text>
<text x="525.429" y="90" font-family="Arial" fill="{{mySubTextColor}}" font-size="12" text-anchor="middle">{{maxInputValue}}</text>
<text x="270" y="57" font-family="Arial" fill="{{myTextColor}}" font-size="37" text-anchor="middle">{{prettyValue}}</text>
<polygon stroke="{{myPointerColor}}" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="{{point1}},76 
	{{point2}},62.048 
 {{point3}},76 "/>
</svg>

Program
 Code Block
linenumberstrue
collapsetrue
var myRactive = this;
  
myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.minInputValue      = this.minVal || point.minVal || 0;
myRactive.maxInputValue      = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue1    = myRactive.minOutputVal1 ||  12.032;
myRactive.maxOutputValue1    = myRactive.maxOutputVal1 ||  520.032;
myRactive.minOutputValue2    = myRactive.minOutputVal2 ||  15.404;
myRactive.maxOutputValue2    = myRactive.maxOutputVal2 ||  523.404;
myRactive.minOutputValue3    = myRactive.minOutputVal3 ||  18.776;
myRactive.maxOutputValue3    = myRactive.maxOutputVal3 ||  526.776;
myRactive.myBorderColor      = this.colorBorder || "#000";
myRactive.myTextColor        = this.colorText || "#000";
myRactive.mySubTextColor     = this.colorSubText || "#000";
myRactive.myPointerColor     = this.colorPointer || "#000";
   
var myPoint1     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue1, myRactive.maxOutputValue1);
var myPoint2     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue2, myRactive.maxOutputValue2);
var myPoint3     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValueminOutputValue3, myRactive.maxOutputValuemaxOutputValue3);

myRactive.ractive.animate('point1',myPoint1);
myRactive.ractive.animate('point2',myPoint2);
myRactive.ractive.animate('rotateValuepoint3',myRotateValuemyPoint3);