Versions Compared

Old Version 8

changes.mady.by.user Sarah Padilla (Unlicensed)

Saved on

compared with

New Version Current

changes.mady.by.user Sarah Padilla (Unlicensed)

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);

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.

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>
	<path<text styletransform="fill:#C1272D;" 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.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";
myRactive.color1             = "#7dc5f0";
myRactive.color2             = "#006bac";
  
var myRotateValue     = fin.fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
  
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      
 = "#000"; myRactive.color1
            = "#7dc5f0";
myRactive.color2             = "#006bac";
  
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
  
myRactive.ractive.animate('rotateValue',myRotateValue);

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>

...

Code Block
linenumberstrue
collapsetrue
var myRactive = this;
  
myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myNavName          = pointthis.navName;
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;
myRactive.accentColor    
   =
"#000";
myRactive.color1             = "#7dc5f0";
myRactive.color2             = "#006bac";
   
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
   
myRactive.ractive.animate('rotateValue',myRotateValue);

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:#29ABE2{{myAccentColor}};" cx="113" cy="117.9" rx="35" ry="35"/>
<polygon style="fill:#29ABE2{{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:#29ABE2{{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:#29ABE2{{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:#29ABE2{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{((maxInputValue+minInputValue)/2).toFixed(0)}}</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.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);

Image Removed

Ractive

...

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:{{accentColormyAccentColor}};" 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>

...

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.accentColormyAccentColor      =  = 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.minOutputValue3, myRactive.maxOutputValue3);

myRactive.ractive.animate('point1',myPoint1);
myRactive.ractive.animate('point2',myPoint2);
myRactive.ractive.animate('point3',myPoint3);