Making circle/dial/radial graphics out of "Number" type data?

[Tiger1]

I was asked if i can make the data numbers appear like a radial/ circle and i am unsure if I can. I know about “Card” views - but it is not allowing me to use the “Number” type field data.

This is what my users want:

[jacksonmihailov]

Hey Tiger
You should google for “appsheet SVG”. There are also lots of SVG generators available online that you can use to create your own styled shapes.

[Tiger1]

How do i use those in Appsheets and put my “Number” type value inside of it?

[Marc_Dillon · Accepted solution]

I don’t understand what the desired view is supposed to be exactly from your example.

But here’s a tip for making Radial graphs:

Radial Gauge / "Meter" - Inline Dynamic Icon - How to create? Tips & Tricks 💡

Dear community, On various occasions, we wish to have some sort of KPI so that the user can get the better experience and insight. Most of the “icon” is basically “static”, but I found a way to create KIP radial gauge type of Icon, based on the data in Appsheet column/data field. This is super easy. Borrowing code from ; - This is Javascript open-source library, and they have bunch of chart image type. Among other, I use Radial Gauge meter to place the same an icon for inline display the…

There is also this that might be easier but get you what you want.

help.appsheet.com

TEXT_ICON()

Icon from text

This expression turns a couple letters/number of text into a simple icon graphic.
@Steve, this help article is completely blank!

[Steve]

Marc_Dillon:

@Steve, this help article is completely blank!

Yeah, at some point someone blanked it, and I haven’t gotten around to recreating it…

[LeventK]

@Steve
It’s working for me actually, the article is not blank…

P.S. Ooops…I have realized that @Marc_Dillon is talking about the help page not the community post. Sorry…

[Tiger1]

Thank you I will give both a try…

[Tiger1]

I tried using the expressions given in the link post - but none worked for me.

I created one VC column and copied and pasted every one of those example codes - none worked.

[Marc_Dillon]

The radial gauge thread is very extensive. I don’t think less than an hour is enough time to have thoroughly gone through it.

“I tried it, it didn’t work” is not near enough information for anyone to help you with.

[Tiger1]

Sorry - I looked through each of the comments and the code each presented. I tried each one and swapped out my column to be shown from their example. In my app I see no data. I tried making the VC and :“image” and a “thumbnail” - neither worked. I tried using a deck view and a card view - neither worked. I am unsure why my value is not even showing in my app. The one thing i can figure is maybe its the column I refer to in the expression is a “number” type and not a “Percent”?

I also looked into using Text_Icon - but failed to make this work as well.

Maybe my column types are wrong? I and looking at a “Number” type in my table. I want that number to be shown in my app with a circle - meaning the number is inside the circle (as my original example picture shows).

I did EXCATLY this and nothing shows up in my view?

First, please create virtual column and insert following texts.

“https://quickchart.io/chart?c={type:‘radialGauge’,data:{datasets:[{data:[Number or Float type data field],backgroundColor:‘green’}]}}”

–

For the part of [Number or Float type data field], please refer to the data fileld you wish to show as KPI. For instance, the percent of achievement, kind of number should be best fitting for this kind of KPI indicator.

And make the column type to either IMAGE or THUMBNAIL.

Or you can hard-code the number as well optionally.

Thats it.

looking further at my slice - i had a condition stopping the data value from showing. It all seems to work now. Thanks for the help…