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
Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on August 17, 2022 at 8am PDT.

Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Users online (1,562)