Model: gaugeColor.zip

How to Make Your Own

Adding Ractive

Drag out Ractive from components on the left side menu
Under Properties, click ractive editor, then open editor
Copy and paste the desired gauge code for Ractive into the template

Adding a Tag

Add a tag to the ractive component
Name it whatever you want, just remember the name of the tag as it will be used when creating the program

Making a Program

Go to programs in the left menu
Click the plus to add a new program, and it will pull up the program editor
In the Program Target Filter type the name of the tag added to the Ractive component
Click the three dots in the top right corner, and select variables
Click the + icon to add a new variable
Click the gear that appears as you hover over the new variable
On the first line type point
The second line call id==$virtualPointRef
Turn on Invokes the Function
Change the dropdown to Tag Change
In the textbox below the dropdown type curVal
Click the gray Save button
Copy and paste the code below into the main section and click the blue save

Adding the Data

Drag and drop the point onto the component

Gauges

Model: gauge1.zip

Ractive

<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:{{myColor1}}"/>
		<stop  offset="1" style="stop-color:{{myColor2}}"/>
	</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:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+5*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+7*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+9*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{(maxInputValue).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:{{myAccentColor}};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:{{myAccentColor}}; 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:{{myAccentColor}}; font-family:'MyriadPro-Regular'; font-size:16px;">{{myNavName}}</text>
<text transform="matrix(1 0 0 1 310.3008 216)" style="fill:{{myAccentColor}}; font-family:'MyriadPro-Regular'; font-size:16px;">{{prettyValue}}</text>
</svg>

Program

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.myAccentColor      = this.accentColor || "#000";
myRactive.myColor1           = this.color1 || "#7dc5f0";
myRactive.myColor2           = 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: gauge2.zip

Ractive

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

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;
  
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
  
myRactive.ractive.animate('rotateValue',myRotateValue);

Model: gauge3.zip

Ractive

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

Program

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;
  
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
  
myRactive.ractive.animate('rotateValue',myRotateValue);

Model: gauge4.zip

Ractive

<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

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

Model: gauge5.zip

Ractive

<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

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.

Model: gauge6.zip

Ractive

<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

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.

Model: gauge7.zip

Ractive

<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

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