Page Comparison

...

Code Block

linenumbers	true
collapse	true

var myRactive = this;

myRactive.prettyValue        = GetPrettyValue(point);
myRactive.myValue            = point.curVal;
myRactive.myUnits            = point.dataPoint.unit;
myRactive.myNavName          = 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.accentColor        = "#29ABE2";
   
var myRotateValue     = fin.Utils.ResetBAS(point.curVal, myRactive.minInputValue , myRactive.maxInputValue , myRactive.minOutputValue, myRactive.maxOutputValue);
   
myRactive.ractive.animate('rotateValue',myRotateValue);

Image Added

Model: gauge7.zip

Ractive

Code Block

linenumbers	true
collapse	true

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

Program

Code Block

linenumbers	true
collapse	true

var myRactive = this;

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

Versions Compared

Old Version 9

New Version 10

Key