cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
luuminhvuong93
Level: Powered On

SVG not showing on mobile

Dear all,

I have a SVG chart which shows perfectly on Web browser,

But on my mobile phone (Android) , this cannot be shown

Basically concept is from the AppMan sample app by Brian-Dang, which I leverage Concat and SVG to create this chart,

 

First I create the collection colVolume on the onStart

ClearCollect(colVolume,
{id: 1, qty: 100,ratio:0},
{id: 2, qty: 130},
{id: 3, qty: 150},
{id: 4, qty: 110},
{id: 5, qty: 140},
{id: 6, qty: 100},
{id: 7, qty: 90},
{id: 8, qty: 200},
{id: 9, qty: 40},
{id: 10, qty: 50},
{id: 11, qty: 200},
{id: 12, qty: 300});
Set(varMax,Max(colVolume,qty));Set(varMin,Min(colVolume,qty));
UpdateIf(colVolume,true,{ratio: qty/ varMax })

 

Then on an Image control, I insert this code

"data:image/svg+xml;utf8, " & EncodeUrl("
<svg version='1.1'
	xmlns='http://www.w3.org/2000/svg' 	xmlns:xlink='http://www.w3.org/1999/xlink'
 width='" & test.Width  & "px' 
 height='"& test.Height+5 & "px' >
	<defs>
		<linearGradient id='grad1' x1='0%' y1='0%' x2='70%' y2='100%'>
			<stop offset='0%' style='stop-color:#0575E6;stop-opacity:1' />
			<stop offset='100%' style='stop-color:#021B79;stop-opacity:1' />
		</linearGradient>
	</defs>"
&Concat(colVolume,
 	"<g class='bar'>
		<rect width='" & test.Width/12-1 
         &"' height='"& test.Height*ratio
         &"' fill='url(#grad1)' 
    x='"& test.Width/12 *(id-1) &"' 
    y ='" & test.Height-test.Height*ratio &"'></rect>
     <text fill='white' font-family='Helvetica, sans-serif' x='"& test.Width/12 *(id-1) &"' 
     y='" & test.Height-test.Height*ratio &"'
     dy='1em' 
     dx ='0.45em'>"& qty &"</text>
	</g>")
&"</svg>")

 

The Result is good on Web  but this is not possible for mobile

(I tried opening the AppMan by Brian-Dang also cannot show the walls on my phone but works on the web )

 

non showing SVG Chart.JPG

1 ACCEPTED SOLUTION

Accepted Solutions
luuminhvuong93
Level: Powered On

Re: SVG not showing on mobile

After reading the post of "AppMan" further, I solved this issue myself,

 

I realize that the issue was due to my country uses "," as number decimal

Thus, a Substitute (Text ( image.Width , ",",".")) .... was needed where there is any calculated width/ height/ x/ y.

 

The complete code is below.

However, Does anyone know how to simplify this code,

The Text(test.Width) -> can it be refer to as a variable in the SVG code?

"data: image/svg+xml;utf8, " & EncodeUrl("
<svg version='1.1'
	xmlns='http://www.w3.org/2000/svg' 	xmlns:xlink='http://www.w3.org/1999/xlink'
 width='" & Substitute(Text(test.Width),",",".")  & "px' 
 height='"& Substitute(Text(test.Height+5),",",".") & "px' >
	<defs>
		<linearGradient id='grad1' x1='0%' y1='0%' x2='70%' y2='100%'>
			<stop offset='0%' style='stop-color:#0575E6;stop-opacity:1' />
			<stop offset='100%' style='stop-color:#021B79;stop-opacity:1' />
		</linearGradient>
	</defs>"
&Concat(colVolume,
 	"<g class='bar'>
		<rect width='" & Substitute(Text(test.Width/12-1),",",".") 
         &"' height='"& Substitute(Text(test.Height*ratio),",",".")
         &"' fill='url(#grad1)' 
    x='"& Substitute(Text(test.Width/12 *(id-1)),",",".") &"' 
    y ='" & Substitute(Text(test.Height-test.Height*ratio),",",".") &"'></rect>
     <text fill='white' font-family='Helvetica, sans-serif' 
     x='"& Substitute(Text(test.Width/12 *(id-1)),",",".") &"' 
     y='" & Substitute(Text(test.Height-test.Height*ratio),",",".") &"'
     dy='1em' 
     dx ='0.45em'>"& qty &"</text>
	</g>")
&"</svg>")

 

View solution in original post

2 REPLIES 2
luuminhvuong93
Level: Powered On

Re: SVG not showing on mobile

After reading the post of "AppMan" further, I solved this issue myself,

 

I realize that the issue was due to my country uses "," as number decimal

Thus, a Substitute (Text ( image.Width , ",",".")) .... was needed where there is any calculated width/ height/ x/ y.

 

The complete code is below.

However, Does anyone know how to simplify this code,

The Text(test.Width) -> can it be refer to as a variable in the SVG code?

"data: image/svg+xml;utf8, " & EncodeUrl("
<svg version='1.1'
	xmlns='http://www.w3.org/2000/svg' 	xmlns:xlink='http://www.w3.org/1999/xlink'
 width='" & Substitute(Text(test.Width),",",".")  & "px' 
 height='"& Substitute(Text(test.Height+5),",",".") & "px' >
	<defs>
		<linearGradient id='grad1' x1='0%' y1='0%' x2='70%' y2='100%'>
			<stop offset='0%' style='stop-color:#0575E6;stop-opacity:1' />
			<stop offset='100%' style='stop-color:#021B79;stop-opacity:1' />
		</linearGradient>
	</defs>"
&Concat(colVolume,
 	"<g class='bar'>
		<rect width='" & Substitute(Text(test.Width/12-1),",",".") 
         &"' height='"& Substitute(Text(test.Height*ratio),",",".")
         &"' fill='url(#grad1)' 
    x='"& Substitute(Text(test.Width/12 *(id-1)),",",".") &"' 
    y ='" & Substitute(Text(test.Height-test.Height*ratio),",",".") &"'></rect>
     <text fill='white' font-family='Helvetica, sans-serif' 
     x='"& Substitute(Text(test.Width/12 *(id-1)),",",".") &"' 
     y='" & Substitute(Text(test.Height-test.Height*ratio),",",".") &"'
     dy='1em' 
     dx ='0.45em'>"& qty &"</text>
	</g>")
&"</svg>")

 

View solution in original post

v-siky-msft
Level 10

Re: SVG not showing on mobile

Deleted

Helpful resources

Announcements
thirdimage

Power Apps Super User Class of 2020

Check it out!

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

SecondImage

Difinity Conference

The largest Power BI, Power Platform, and Data conference in New Zealand

Top Solution Authors
Top Kudoed Authors (Last 30 Days)
Users online (5,817)