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

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

Program

var myRactive = this;

myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myNavName          = 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.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);

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

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

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

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:#29ABE2;" cx="113" cy="117.9" rx="35" ry="35"/>
<polygon style="fill:#29ABE2;"  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;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;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; 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          = 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;
   
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);