Versions Compared

Old Version 3

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.

Image Removed 

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 below for Ractive into the template

...

Adding a Tag

Image Added

  • 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

Image Added Image Added

Image Added

  • 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

Image Added

  • Drag and drop the point onto the component

Gauges

Image Added

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>
<path
<g>
	<circle style="fill:url(#SVGID_1_)#dbdbdb" dcx="M346.4,226.6h-320c-11,0-20-9-20-20v-180c0-11,9-20,20-20h320c11,0,20,9,20,20v180
	C366.4,217.7,357.4,226.6,346.4,226.6z"/>
<g>
	<circle style="fill:#FFFFFF" cx="184.9" cy="193.1" 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:#87FF87{{myColor1}}"/>
		<stop  offset="1" style="stop-color:#29ABE2{{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:#58D5B4{{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 176.256185 40.1498)" style="fill:#58D5B4{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">50</text>
	<line style="fill:none;stroke:#4FCDBE 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 213221.51795 4244.6224)" style="fill:#4FCDBE{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">60< text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:#45C4C7{{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 249.0036 53.987257 58)" style="fill:#45C4C7{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">70</text>
	<line style="fill:none;stroke:#3CBCD0;stroke- 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 280.6273 73.5602288 79)" style="fill:#3CBCD0{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">80< text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:#32B3D9{{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 306.6259 100.322313 107)" style="fill:#32B3D9{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">90</text>
	<line style="fill:none;stroke:#29ABE2;stroke 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 323.9977 128.4633330 141)" style="fill:#29ABE2{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">100< text-anchor="middle">{{(maxInputValue).toFixed(0)}}</text>
	<line style="fill:none;stroke:#61DDAB{{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 139.5854 46.8294148 45)" style="fill:#61DDAB{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">40<" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:#6BE6A2;{{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 105.5707 62.1115113 58)" style="fill:#6BE6A2{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">30< text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:#87FF87{{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 76.2251 85.110282 79)" style="fill:#74EE99{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">20< text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:#7EF790{{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 53.4341 114.572658 107)" style="fill:#7EF790{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">10</text>
	<line style=" text-anchor="middle">{{((minInputValue+(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
	<line style="fill:none;stroke:#87FF87{{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 39.8594 144.716941 141)" style="fill:#87FF87{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">0< 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:#FFFFFF{{myAccentColor}}; font-family:'MyriadPro-Regular'; font-size:16px;">{{myNavName}}</text>
<text transform="matrix(1 0 0 1 310.3008 216)" style="fill:#FFFFFF{{myAccentColor}}; font-family:'MyriadPro-Regular'; font-size:16px;">{{prettyValue}}</text>
</svg>

Program

Image Removed

  • 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

Image Removed Image Removed

Image Removed

  • 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
Code Block
var myRactive = this;

myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myNavName          = point.navName;
myRactive.minInputValue      = 0;
myRactive.maxInputValue      = 100;
myRactive.minOutputValue     = myRactive.minOutputVal ||  -70;
myRactive.maxOutputValue     = myRactive.maxOutputVal ||  70;
 
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
 
myRactive.ractive.animate('rotateValue',myRotateValue);

Adding the Data

Image Removed

  • Drag and drop the point onto the component

Changing the Colors

Image Removed

<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">
Code Block
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.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.

Image Added

Model: svgGauge2.zip

Ractive

Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 375 233" style="enable-background:new 0 0 375 233;" xml:space="preserve">
<path style="fill:#D4EEF9;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M185.9,42.5c-16.2,0-31.8,2.6-46.4,7.3l46.4,142.7V42.5z"/>
<path style="fill:#F3D4D5;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M232.3,49.8c-14.6-4.7-30.2-7.3-46.4-7.3v150L232.3,49.8z"/>
<path style="fill:#A9DDF3;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M139.6,49.8c-15.1,4.9-29.2,12.2-41.8,21.3l88.2,121.4L139.6,49.8z"/>
<path style="fill:#7FCDEE;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M97.7,71.1C85,80.4,73.8,91.6,64.6,104.3l121.4,88.2L97.7,71.1z"/>
<path style="fill:#54BCE8;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M64.6,104.3c-9.2,12.6-16.4,26.7-21.3,41.8l142.7,46.4L64.6,104.3z"/>
<path style="fill:#C1272D;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M335.9,192.5c0-16.2-2.6-31.8-7.3-46.4l-142.7,46.4H335.9z"/>
<path style="fill:#DA7D81;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M307.3,104.3c-9.3-12.7-20.5-23.9-33.2-33.2l-88.2,121.4L307.3,104.3z"/>
<path style="fill:#CD5257;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M328.6,146.1c-4.9-15.1-12.2-29.2-21.3-41.8l-121.4,88.2L328.6,146.1z"/>
<path style="fill:#E6A9AB;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M274.1,71.1c-12.6-9.2-26.7-16.4-41.8-21.3l-46.4,142.7L274.1,71.1z"/>
<path style="fill:#29ABE2;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M43.2,146.1c-4.7,14.6-7.3,30.2-7.3,46.4h150L43.2,146.1z"/>
<path style="fill:#E6E6E6;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" d="M185.9,62.5c-71.8,0-130,58.2-130,130h260C315.9,120.7,257.7,62.5,185.9,62.5z"/>
<text transform="matrix(0 -1 1 0 30 191)" class="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(minInputValue).toFixed(0)}}</text>
<text transform="matrix(0 1 -1 0 342 191)" class="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(maxInputValue).toFixed(0)}}</text>
<text transform="matrix(0.309 0.9511 -0.9511 0.309 335 145)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+9*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.5878 0.809 -0.809 0.5878 313 100)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+8*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.809 0.5878 -0.5878 0.809 278 67)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+7*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.9511 0.309 -0.309 0.9511 234 46)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+6*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 186 38)" class="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{(((maxInputValue-minInputValue)/2)+2).toFixed(0)}}</text>
<text transform="matrix(0.9511 -0.309 0.309 0.9511 138 45.2013)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+4*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.809 -0.5878 0.5878 0.809 95 67)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+3*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.5878 -0.809 0.809 0.5878 59 102)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+2*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<text transform="matrix(0.309 -0.9511 0.9511 0.309 37 146)" style="font-family:'SourceSansPro-Light'; font-size:12px;" text-anchor="middle">{{((minInputValue+1*(maxInputValue-minInputValue)/10)).toFixed(0)}}</text>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -81.6641 187.8453)" style="fill:#808080;" cx="185.9" cy="192.5" rx="15" ry="15"/>
<g>
	<text transform="matrix(1 0 0 1 185.9 145)" style="font-family:'SourceSansPro-Bold'; font-size:60px;" text-anchor="middle">{{prettyValue}}</text>
</g>
<g>
	<path style="fill:#C1272D;" d="M182.4,196L81.3,87.8L189.5,189c2,1.9,2.1,5.1,0.2,7.1c-1.9,2-5.1,2.1-7.1,0.2
		C182.5,196.2,182.5,196.1,182.4,196z" transform="rotate({{rotateValue}} 185.9,192.5)"/>
</g>
</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;
  
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
  
myRactive.ractive.animate('rotateValue',myRotateValue);

Image Added

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>

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

Image Added

Model: svgGauge4.zip

Ractive

Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 333.1 330.1" style="enable-background:new 0 0 333.1 330.1;" xml:space="preserve">
<circle style="fill:#FFFFFF;" cx="166.5" cy="158.2" r="151"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="8.2485" x2="166.5468" y2="308.2485">
	<stop  offset="0" style="stop-color:#D8D8D8"/>
	<stop  offset="0.3673" style="stop-color:#6E6E6E"/>
	<stop  offset="0.6684" style="stop-color:#ABABAB"/>
	<stop  offset="1" style="stop-color:#303030"/>
</linearGradient>
<circle style="fill:url(#SVGID_1_);" cx="166.5" cy="158.2" r="150"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="291.2485" x2="166.5468" y2="25.2485">
	<stop  offset="0" style="stop-color:#FFFFFF"/>
	<stop  offset="0.2194" style="stop-color:#C4C4C4"/>
	<stop  offset="0.4388" style="stop-color:#C0C0C0"/>
	<stop  offset="0.6173" style="stop-color:#ABABAB"/>
	<stop  offset="0.7704" style="stop-color:#6E6E6E"/>
	<stop  offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<circle style="fill:url(#SVGID_2_);" cx="166.5" cy="158.2" r="133"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="288.2485" x2="166.5468" y2="28.2485">
	<stop  offset="0" style="stop-color:#DEDEDE"/>
	<stop  offset="1" style="stop-color:#303030"/>
</linearGradient>
<circle style="fill:url(#SVGID_3_);" cx="166.5" cy="158.2" r="130"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="273.2485" x2="166.5468" y2="43.2485">
	<stop  offset="0" style="stop-color:#363636"/>
	<stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<circle style="fill:url(#SVGID_4_);" cx="166.5" cy="158.2" r="115"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="268.2485" x2="166.5468" y2="48.2485">
	<stop  offset="0" style="stop-color:#363636"/>
	<stop  offset="2.381682e-03" style="stop-color:#363636"/>
	<stop  offset="0.2586" style="stop-color:#272727"/>
	<stop  offset="0.5574" style="stop-color:#1E1E1E"/>
	<stop  offset="1" style="stop-color:#1B1B1B"/>
</linearGradient>
<circle style="fill:url(#SVGID_5_);" cx="166.5" cy="158.2" r="110"/>
<g>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="147" y1="51.6" x2="150.2" y2="69.4"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="110.4" y1="65" x2="119.4" y2="80.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="80.5" y1="90.1" x2="94.3" y2="101.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="61" y1="123.8" x2="77.9" y2="130"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="54.2" y1="162.2" x2="72.2" y2="162.2"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="278.9" y1="162.2" x2="260.9" y2="162.2"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="272.1" y1="123.8" x2="255.2" y2="130"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="252.6" y1="90.1" x2="238.8" y2="101.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="222.7" y1="65" x2="213.7" y2="80.6"/>
	<line style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="186" y1="51.6" x2="182.9" y2="69.4"/>
</g>
<g>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="147" y1="47.6" x2="150.2" y2="65.4"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="110.4" y1="61" x2="119.4" y2="76.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="80.5" y1="86.1" x2="94.3" y2="97.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="61" y1="119.8" x2="77.9" y2="126"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="54.2" y1="158.2" x2="72.2" y2="158.2"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="278.9" y1="158.2" x2="260.9" y2="158.2"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="272.1" y1="119.8" x2="255.2" y2="126"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="252.6" y1="86.1" x2="238.8" y2="97.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="222.7" y1="61" x2="213.7" y2="76.6"/>
	<line style="fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;" x1="186" y1="47.6" x2="182.9" y2="65.4"/>
</g>
<radialGradient id="SVGID_6_" cx="166.5468" cy="212.2485" r="24" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#000000"/>
	<stop  offset="1" style="stop-color:#FFFFFF"/>
</radialGradient>
<!-- <circle class="st8" cx="166.5" cy="212.2" r="24"/> -->
<g id="needle">
	<g>
		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="156.5468" y1="153.2485" x2="176.5468" y2="153.2485">
			<stop  offset="0" style="stop-color:#F1A224"/>
			<stop  offset="1" style="stop-color:#F13524"/>
		</linearGradient>
		<path style="fill:url(#SVGID_7_);" d="M170.6,92.3l5.9,116c0,5.5-4.5,10-10,10s-10-4.5-10-10l6.1-116c0-2.2,1.8-4,4-4S170.6,90,170.6,92.3z" transform="rotate({{rotateValue}} 166.5,208.2)"/>
	</g>
	<circle style="fill:none;" cx="166.5" cy="208.2" r="120"/>
	<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="216.2485" x2="166.5468" y2="90.2485">
		<stop  offset="0" style="stop-color:#FFE68C"/>
		<stop  offset="1" style="stop-color:#000000"/>
	</linearGradient>
  
  
	<path style="fill:url(#SVGID_8_);" d="M166.6,90.2c1.1,0,2,0.9,2,2l0,0.1l0,0.1l5.9,115.9c0,4.4-3.6,7.9-8,7.9c-2.1,0-4.1-0.8-5.7-2.3
		c-1.5-1.5-2.3-3.5-2.3-5.6l6.1-115.9l0-0.1l0-0.1C164.6,91.1,165.5,90.2,166.6,90.2L166.6,90.2" transform="rotate({{rotateValue}} 166.5,208.2)"/>
  
  
</g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="188.2485" x2="166.5468" y2="228.2485">
	<stop  offset="0" style="stop-color:#FFFFFF"/>
	<stop  offset="1" style="stop-color:#4A4A4A"/>
</linearGradient>
<circle style="fill:url(#SVGID_9_);" cx="166.5" cy="208.2" r="20"/>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="190.2485" x2="166.5468" y2="226.2485">
	<stop  offset="0" style="stop-color:#BBBBBB"/>
	<stop  offset="1" style="stop-color:#767676"/>
</linearGradient>
<circle style="fill:url(#SVGID_10_);" cx="166.5" cy="208.2" r="18"/>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="166.5468" y1="196.2485" x2="166.5468" y2="220.2485">
	<stop  offset="0" style="stop-color:#767676"/>
	<stop  offset="1" style="stop-color:#BBBBBB"/>
</linearGradient>
<circle style="fill:url(#SVGID_11_);" cx="166.5" cy="208.2" r="12"/>
<text transform="matrix(1 0 0 1 80.2416 164.3913)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:18px;">{{(minInputValue).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 167 82.0573)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="middle">{{((minInputValue+maxInputValue)/2).toFixed(0)}}</text>
<text transform="matrix(1 0 0 1 254 164.3913)" style="fill:#FFFFFF; font-family:'SourceSansPro-Light'; font-size:18px;" text-anchor="end">{{(maxInputValue).toFixed(0)}}</text>
</svg>

Program

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

Image Added

Model: 

Ractive

Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-10 0 380 152.9" style="enable-background:new 0 0 330 152.9;" xml:space="preserve">
<title>svg_bar_gauge</title>
<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 {{rotateValue1}} 114.4473)" style="fill:{{myAccentColor}};" cx="113" cy="117.9" rx="35" ry="35"/>
<polygon style="fill:{{myAccentColor}};"  transform='translate({{rotateValue2}} 0)' points="113,64.9 121,84.9 105,84.9"/>
<text transform="matrix(1 0 0 1 {{rotateValue3}} 125)" style="fill:#fff; font-family:'SourceSansPro-Bold'; font-size:20px;" text-anchor="middle">{{prettyValue}}</text>
<line style="fill:none;stroke:#E6E6E6;stroke-width:30;stroke-linecap:round;stroke-miterlimit:10;" x1="15" y1="44.9" x2="315" y2="44.9"/>
<line style="fill:none;stroke:{{myAccentColor}};stroke-width:30;stroke-linecap:round;stroke-miterlimit:10;" x1="15" y1="44.9" x2="{{rotateValue4}}" y2="44.9"/>
<line style="opacity:0.5;fill:none;stroke:{{myAccentColor}};stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;enable-background:new;" x1="164.6" y1="64.9" x2="164.6" y2="24.9"/>
<text transform="matrix(1 0 0 1 155.98 14.94)" style="fill:{{myAccentColor}}; font-family:'SourceSansPro-Light'; font-size:18px;">{{((maxInputValue+minInputValue)/2).toFixed(0)}}</text>
</svg>


Program

Code Block
linenumberstrue
collapsetrue
var myRactive = this;
  
myRactive.prettyValue         = GetPrettyValue(point);
myRactive.myValue             = point.curVal;
myRactive.myNavName           = this.shortName || point.navName;
myRactive.minInputValue       = this.minVal || point.minVal || 0;
myRactive.maxInputValue       = this.maxVal || point.maxVal || 100;
myRactive.minOutputValue1     = myRactive.minOutputVal ||  -135;
myRactive.maxOutputValue1     = myRactive.maxOutputVal ||  165;
myRactive.minOutputValue2     = myRactive.minOutputVal ||  -85;
myRactive.maxOutputValue2     = myRactive.maxOutputVal ||  215;
myRactive.minOutputValue3     = myRactive.minOutputVal ||  28;
myRactive.maxOutputValue3     = myRactive.maxOutputVal ||  328;
myRactive.minOutputValue4     = myRactive.minOutputVal ||  15;
myRactive.maxOutputValue4     = myRactive.maxOutputVal ||  315;
myRactive.myAccentColor       = this.accentColor || "#29ABE2";
   
var myRotateValue1     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue1, myRactive.maxOutputValue1);
var myRotateValue2     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue2, myRactive.maxOutputValue2);
var myRotateValue3     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue3, myRactive.maxOutputValue3);
var myRotateValue4     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue4, myRactive.maxOutputValue4);
   
myRactive.ractive.animate('rotateValue1',myRotateValue1);
myRactive.ractive.animate('rotateValue2',myRotateValue2);
myRactive.ractive.animate('rotateValue3',myRotateValue3);
myRactive.ractive.animate('rotateValue4',myRotateValue4);

Colors: To change the colors of the bar, use the tag accentColor.  accentColor will change the color of the ball and bar.

Image Added

Model: 

Ractive

Code Block
linenumberstrue
collapsetrue
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 333.1 330.1" style="enable-background:new 0 0 333.1 330.1;" xml:space="preserve">
<circle style="fill:#CCCCCC;" cx="166.5" cy="165" r="150"/>
<circle style="fill:{{myAccentColor}};" cx="166.5" cy="35" r="10" transform="rotate({{rotateValue}} 166.5, 165)"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="166.5" y1="20" x2="166.5" y2="310"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="153.9" y1="20.6" x2="179.2" y2="309.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="141.4" y1="22.3" x2="191.7" y2="307.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="129" y1="25" x2="204.1" y2="305.1"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="117" y1="28.8" x2="216.1" y2="301.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="105.3" y1="33.6" x2="227.8" y2="296.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="94" y1="39.5" x2="239" y2="290.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="83.4" y1="46.3" x2="249.7" y2="283.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="73.3" y1="54" x2="259.8" y2="276.1"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="64" y1="62.5" x2="269.1" y2="267.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="55.5" y1="71.8" x2="277.6" y2="258.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="47.8" y1="81.9" x2="285.3" y2="248.2"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="41" y1="92.5" x2="292.1" y2="237.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="35.1" y1="103.8" x2="298" y2="226.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="30.3" y1="115.5" x2="302.8" y2="214.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="26.5" y1="127.5" x2="306.6" y2="202.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="23.7" y1="139.9" x2="309.3" y2="190.2"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="22.1" y1="152.4" x2="311" y2="177.7"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="21.5" y1="165" x2="311.5" y2="165"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="22.1" y1="177.7" x2="311" y2="152.4"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="23.7" y1="190.2" x2="309.3" y2="139.9"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="26.5" y1="202.6" x2="306.6" y2="127.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="30.3" y1="214.6" x2="302.8" y2="115.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="35.1" y1="226.3" x2="298" y2="103.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="41" y1="237.5" x2="292.1" y2="92.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="47.8" y1="248.2" x2="285.3" y2="81.9"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="55.5" y1="258.3" x2="277.6" y2="71.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="64" y1="267.6" x2="269.1" y2="62.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="73.3" y1="276.1" x2="259.8" y2="54"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="83.4" y1="283.8" x2="249.7" y2="46.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="94" y1="290.6" x2="239" y2="39.5"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="105.3" y1="296.5" x2="227.8" y2="33.6"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="117" y1="301.3" x2="216.1" y2="28.8"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="129" y1="305.1" x2="204.1" y2="25"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="141.4" y1="307.8" x2="191.7" y2="22.3"/>
<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" x1="153.9" y1="309.5" x2="179.2" y2="20.6"/>
<circle style="opacity:0.1;enable-background:new;" cx="166.5" cy="169" r="120"/>
<circle style="fill:#E6E6E6;" cx="166.5" cy="165" r="120"/>
<path style="fill:#E6E6E6;" d="M166.5,15c-82.8,0-150,67.2-150,150s67.2,150,150,150s150-67.2,150-150S249.4,15,166.5,15z M166.5,305
	c-77.3,0-140-62.7-140-140s62.7-140,140-140s140,62.7,140,140S243.9,305,166.5,305z"/>
<text transform="matrix(1 0 0 1 168 130.1867)" style="font-family:'SourceSansPro-Light'; font-size:18.5621px;" text-anchor="middle">{{myNavName}}</text>
<text transform="matrix(1 0 0 1 168 248.4367)" style="font-family:'SourceSansPro-Light'; font-size:18.5621px;" text-anchor="middle">{{myUnits}}</text>
<g>
	<g>
		<text transform="matrix(1 0 0 1 168 179.5252)" style="fill:#fff; font-family:'SourceSansPro-Regular'; font-size:51.0082px;" text-anchor="middle">{{myValue.toFixed(2)}}</text>
	</g>
	<g>
		<text transform="matrix(1 0 0 1 168 177.9784)" style="font-family:'SourceSansPro-Regular'; font-size:51.0082px;" text-anchor="middle">{{myValue.toFixed(2)}}</text>
	</g>
</g>
</svg>

Program

Code Block
linenumberstrue
collapsetrue
var myRactive = this;

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

Colors: To change the colors of the ball, use the tag accentColor.

Image Added

Model: 

Ractive

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

<g>radialGradient>
	<circle<path style="fill:#dbdbdb" cx="184.9" cy="193.1" r="15"/>
	<path style="opacity:0.1"url(#SVGID_24_);" d="M184.9,157.1c16.4,0,30.5,9.9,36M248.8,179.7l14.1,2.5c1.6,24c10.93,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.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_225_" gradientUnitscx="userSpaceOnUse" x1="59.9965254.202" y1cy="122189.99678778" x2r="3099.75968904" y2gradientUnits="122.9967userSpaceOnUse">
		<stop  offset="0" style="stop-color:{{color1}}#FFFFFF"/>
		<stop  offset="1" style="stop-color:{{color2}}#000000"/>
	</linearGradient>radialGradient>
	<path style="fill:url(#SVGID_225_);" d="M184M245.92,153.1c16.4,0,30.5,9.9,36.6,24c1.9193.7l13.4,4.39c1.5,60.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;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).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 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>
<text<polygon transformstroke="matrix(1 0 0 1 310.3008 216)" style="fill:{{accentColor}}; font-family:'MyriadPro-Regular'; font-size:16px;">{{prettyValue}}</text>
</svg>
Code Block
var myRactive = this;

myRactive.prettyValue{{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 =|| GetPrettyValue(point)point.maxVal || 100;
myRactive.myValueminOutputValue1    = myRactive.minOutputVal1 ||  12.032;
myRactive.maxOutputValue1    = point.curValmyRactive.maxOutputVal1 ||  520.032;
myRactive.myNavNameminOutputValue2    = myRactive.minOutputVal2 ||  15.404;
myRactive.maxOutputValue2    = point.navNamemyRactive.maxOutputVal2 ||  523.404;
myRactive.minInputValue  minOutputValue3    = thismyRactive.minValminOutputVal3 || point.minVal  18.776;
myRactive.maxOutputValue3    = myRactive.maxOutputVal3 || 0 526.776;
myRactive.maxInputValuemyBorderColor      = this.maxValcolorBorder || "#000";
pointmyRactive.maxValmyTextColor || 100; myRactive.minOutputValue     = myRactivethis.minOutputValcolorText ||  -70"#000";
myRactive.maxOutputValuemySubTextColor     = myRactivethis.maxOutputValcolorSubText ||  70"#000";
myRactive.accentColormyPointerColor     =   =this.colorPointer || "#000";
myRactive.color1   
var myPoint1     = fin.Utils.ResetBAS(point.curVal,  = "#7dc5f0";myRactive.minInputValue , myRactive.maxInputValue , myRactive.color2   minOutputValue1, myRactive.maxOutputValue1);
var myPoint2     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , = "#006bac";
 myRactive.minOutputValue2, myRactive.maxOutputValue2);
var myRotateValuemyPoint3     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValueminOutputValue3, myRactive.maxOutputValuemaxOutputValue3);

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