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

 

View solution in original post

Deleted

Helpful resources

Announcements
2022 Release Wave 1 760x460.png

2022 Release Wave 1 Plan

Power Platform release plan for the 2022 release wave 1 describes all new features releasing from April 2022 through September 2022.

User Group Leader Meeting January 768x460.png

Calling all User Group Leaders!

Don't miss the User Group Leader meetings on January, 24th & 25th, 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Top Solution Authors
Top Kudoed Authors
Users online (2,798)