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 )
