Thank you for visiting my site!

Home / PowerApps - Forms / Charts – Gauge Indicator

Charts – Gauge Indicator

Create Your png image for the background
.

Create another svg image for the Gauge 900 * 900

For the background add a new image to the screen, in the image property add:

Add a second image to the screen:

add the following to the image property:

"data:image/svg+xml,"
&EncodeUrl("
<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 900 900' style='enable-background:new 0 0 900 900;' xml:space='preserve'>
<style type='text/css'>
	.st0{fill:#4D4D4D;}
</style>
<path class='st0' d='M427.12,403.43L13.98,450l413.14,46.57c7.16,3.67,15.26,5.76,23.86,5.76c28.9,0,52.33-23.43,52.33-52.33
	s-23.43-52.33-52.33-52.33C442.38,397.67,434.27,399.76,427.12,403.43z M474.98,450.27c0,13.41-10.73,24.27-23.98,24.27
	c-13.24,0-23.98-10.87-23.98-24.27c0-13.41,10.73-24.27,23.98-24.27C464.24,426,474.98,436.87,474.98,450.27z'/>

    <animateTransform attributeName='transform'
                    type='rotate'
                    from='0' to='"& txt_procentage.Text &"'
                    begin='0s' dur='3s'
                    repeatCount='1'
                    fill='freeze' 
          />
</svg>

")



To make it dynamic add a text box “txt_procentage”

 

You can make it with no animation

"data:image/svg+xml,"
&EncodeUrl("
<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 900 900' style='enable-background:new 0 0 900 900;' xml:space='preserve'>
<style type='text/css'>
	.st0{fill:#4D4D4D;
    transform-origin:center;
    transform:  rotate(" & txt_procentage_1.Text &"deg);
    
    }
</style>
<path class='st0' d='M427.12,403.43L13.98,450l413.14,46.57c7.16,3.67,15.26,5.76,23.86,5.76c28.9,0,52.33-23.43,52.33-52.33
	s-23.43-52.33-52.33-52.33C442.38,397.67,434.27,399.76,427.12,403.43z M474.98,450.27c0,13.41-10.73,24.27-23.98,24.27
	c-13.24,0-23.98-10.87-23.98-24.27c0-13.41,10.73-24.27,23.98-24.27C464.24,426,474.98,436.87,474.98,450.27z'/>

  
</svg>

")

ADD YOUR COMMENT