Re: SVG render issue

Matteo_Menghett · 09-23-2019 01:21 PM

Hello,

I am trying to use an SVG chart in one of my apps to create a dynamic progress chart.
The chart displays correctly in the form view but doesn’t render correctly in the detail/deck view. Any idea of the cause?

Grant_Stead

SVG isn’t fully supported. I’ve experimented with it quite a bit. Different devices even respond differently. I experimented with this exact one… What column type, and settings.

Matteo_Menghett

My column is a virtual column of type Image. The formula I used is this one:

    SWITCH([STATUS],
100, CONCATENATE(
"data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 
0 120 120"">
<text font-family=""Roboto,Arial,sans-serif"" font-size=""30px"" font-weight=""300"" text-anchor=""middle"" fill=""rgb(88,89,91)"" x=""52.5%"" y=""60%"">",[STATUS],"<tspan font-size=""20px"" fill=""rgb(167,169,172)"" style=""baseline-shift: super"">%</tspan></text>
<circle cx=""60"" cy=""60"" r=""54"" fill=""none"" stroke=""Lime"" stroke-width=""12"" />
</svg>"),
CONCATENATE(
"data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 120 120"">
<text font-family=""Roboto,Arial,sans-serif"" font-size=""30px"" font-weight=""300"" text-anchor=""middle"" fill=""rgb(88,89,91)"" x=""52.5%"" y=""60%"">",[STATUS],"<tspan font-size=""20px"" fill=""rgb(167,169,172)"" style=""baseline-shift: super"">%</tspan></text>
<circle cx=""60"" cy=""60"" r=""54"" fill=""none"" stroke=""lightgrey"" stroke-width=""12"" />
<circle cx=""60"" cy=""60"" r=""54"" fill=""none"" stroke=""Blue"" stroke-width=""12"" stroke-dasharray=""339.292"" stroke-dashoffset=""",339.292*(1-([STATUS]/100)),""" transform=""rotate(-90 60 60)""/>
</svg>")
)

The column STATUS is of type number.

Grant_Stead

Experiment with SVG in a physical column…

Jonathon

If you share access to me (jonathonsinclair@gmail.com) I can take a quick look when I get home in an hour!

Nothing is jumping out from your code or description as the obvious problem.

Jonathon

This is the current version of this code i’m using in one of my apps. Try using this in your app as column type Image.

CONCATENATE(
"data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 120 120"">",
IF(([STATUS]/100)>1,
"<style type=""text/css"">.bg{fill:none;stroke:rgb(10,90,130);}.prog{fill:none;stroke:rgb(200,30,100);}</style>",
"<style type=""text/css"">.bg{fill:none;stroke:rgb(183,200,240);}.prog{fill:none;stroke:rgb(20,90,130);}</style>"
)
,"<text font-family=""Roboto,Arial,sans-serif"" font-size=""30px"" font-weight=""300"" text-anchor=""middle"" fill=""rgb(88,89,91)"" x=""55%"" y=""60%"">",[STATUS],"<tspan font-size=""20px"" fill=""rgb(167,169,172)"" style=""baseline-shift: super"">%</tspan></text>
<circle class=""bg"" cx=""60"" cy=""60"" r=""54"" stroke-width=""12""/>
<circle class=""prog"" cx=""60"" cy=""60"" r=""54"" stroke-width=""12"" stroke-dasharray=""339.292"" stroke-dashoffset=""",IF(([STATUS]/100)>1,339.292*(2-([STATUS]/100)),339.292*(1-([STATUS]/100))),""" transform=""rotate(-90 60 60)""/>
</svg>")

Dave_Willett

Hi Jonathon. This SVG chart is great, just wandering if you have any other snippets for SVG charts?
Or know of a good website to build them.

Kind Regards

Fabian_Weller

This is a nice page:

And here a nice Video: