Dynamic SVG graphics

so far… faster than my PNG’s.

Bahaha, that’s awesome!

@Mike @Jonathon Real talk - Have ya’ll found a way for these to show up in Microsoft Edge…

I haven’t used with Edge. There are some issues with how IE handles SVG’s…

Just tested one of my apps in Edge. Static SVG’s encoded to base64, which are loaded from a database, work in Edge. Dynamic SVG’s stored in the app virtual columns do not appear to work.

So, I wouldn’t write SVG’s off completely if you have users in Edge. At the very least, static assets like banners and icons can be made use of.


While testing this, I also noticed a few global AppSheet UI bugs which occur in Edge… So if you have Edge users, this may not be your biggest concern :wink:

@Jonathon @Mike This is a little video showing you something i’m seeing, and i’m curious if you see this issue as well? Long story short, virtual column, type image, gets reset back to grey after sync…
CloudApp

And, this is my code:
SWITCH([complete_pct],
100, CONCATENATE(
“data:image/svg+xml;utf8,<svg xmlns=”“http://www.w3.org/2000/svg”" viewBox="“0 0 240 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%”">100<tspan font-size="“20px”" fill="“rgb(167,169,172)”" style="“baseline-shift: super”">%
<circle cx="“120"” cy="“60"” r="“54"” fill="“none”" stroke="“lime”" stroke-width="“12"” />
"
),
CONCATENATE(“data:image/svg+xml;utf8,<svg xmlns=”“http://www.w3.org/2000/svg”" viewBox="“0 0 240 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%”">",[complete_pct],"<tspan font-size="“20px”" fill="“rgb(167,169,172)”" style="“baseline-shift: super”">%
<circle cx="“120"” cy="“60"” r="“54"” fill="“none”" stroke="“silver”" stroke-width="“12"” />
<circle cx="“120"” cy="“60"” r="“54"” fill="“none”" stroke="“blue”" stroke-width="“12"” stroke-dasharray="“339.292"” stroke-dashoffset=""",339.292*(1-([complete_pct]/100)),""" transform="“rotate(-90 120 60)”"/>
")
)

Grant, are you experiencing that behavior in Chrome as well? Specifically regarding the virtual column resetting itself, I have not experienced that.

Regarding the SHOW() type resizing, try changing your viewBox variable to “0 0 120 120” instead of " 0 0 240 120"


For your troubleshooting, maybe try a simplified svg, without the SWITCH() clause:

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

Also, note that the above code seems to have the word stylized “” quotes. I’m not sure how that will impact the performance, but its probably worth replacing them all with the UTF8 simple quotes (")

Yes, it does it in chrome emulator and full and Android…
I’ll check out your recommendations and report back

@Mike and @Jonathon Thank you for the help! My eyes are open now.
Jon, for posterity you should fix your code snippet it’s missing some code at the end of text, and missing the svg closure…
I ended up with a single VC_Show column, and it looks great in the deck view and is responsive everywhere… it seems you can’t put it as a background in detail, or on the card / gallery views. It still doesn’t render in Microsoft Edge, which is used in businesses way more than you imagine…
Here is my code.

SWITCH([complete_pct],
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%"">",[complete_pct],"<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%"">",[complete_pct],"<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-([complete_pct]/100)),""" transform=""rotate(-90 60 60)""/>
</svg>")
)

Edit, I guess I should drop a screen shot

3 Likes

@Grant_Stead you’r da man bud!

1 Like

Meh, suffering through it…

1 Like

No pain, no gain buddy :slight_smile:

I’m Just uncomfortable with it not being decent in edge…

Yes… there are gaps here… and it requires more comfort with raw SVG syntax than I might like, but you have to admit the potential is big!

If Appsheet could make a field type for this (to handle the compatibility issues, remove the need to pre-pend formula with “data:image/svg+xml;utf8,“, and automate the double quotes, i still think this is a way to make the Appsheet experience richer. Might only be 10-29 of users that work at this level, but even for Marketing the Appsheet solution, it might be worth it :slight_smile:

As a side note, in a prior community comment, I suggested to @Peter that we add a section for “Advanced Topics” like google script, svg’s, api’s, etc - so people pushing the envelope had a way to discuss and not overload the “no code” section.

2 Likes

Agreed, it makes many, many things possible… Thanks for the primer course. I hope the team figures out a clean way to integrate it into the platform.

1 Like

Thanks to @Jonathon for “pushing the envelope”!!!

And this is without any doubt @Jonathon’s fault @Mike LOL

Without a doubt! He is such a trouble maker :joy:

Some inspiration; my take on a mobile-friendly dashboard of sorts:

Hoping to add more to it when I can think of useful visualizations; maybe turn the produced/placed/wasted to a pie chart.

3 Likes

Hey @Jonathon you are big pain buddy LOL. Right @Mike?