cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
luuminhvuong93
Post Patron
Post Patron

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
Post Patron
Post Patron

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
Post Patron
Post Patron

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>")

 

Deleted

Helpful resources

Announcements
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Top Solution Authors
Top Kudoed Authors
Users online (1,263)