Re: Radial Gauge / "Meter" - Inline Dynamic Icon -... - Page 2

Koichi_Tsuji · 01-07-2020 04:03 PM

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 same gauge.

It looks like this.

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.

Bit of customise we ca like a color. Just change the last part of code, like ‘red’ or ‘blue’ etc

This is the easiest trick to place KPI indicator to the view .

Try it out.

I will test the other chart, but most of the type are on the Appsheet default chart features can manage, so it may not be useful, but if any user wish to have chart as INLINE, rather than Chart view, this javascript liberary could be found useful.

If anyone in the community to test this and found new tricks and tips, it is grateful if they share the finding in this post, thanks.

Additional Note

The texts in the vc looks like this fyg.

“https://quickchart.io/chart?c={type:‘radialGauge’,data:{datasets:[{data:["&[Percent]&"],backgroundCo...]}}”

This case i have column callced “[Percent]”, i refer it in the strings and concat.

I tested another simple chart from the library, like bar chart. It looks like this within Appsheet detail view. Chart is now shown as inline!

Cristhian_Macia

Wonderful, thank you!

IvanCruz

Hi Taylor

I''ve some data listed below

ID	Name	Actual 1	Actual 2	Actual 3	Actual 4	Target
1	David	90	92	95	98	100

Is it possible to make radar chart in appsheet, based on that data?

I want the result like this

Thanks, for your help

Paul_Janson

Hello tsuji_koichi! I found your post very helpful. I was wondering if you might be able to help me solve this- I’m trying to set the color for my radial gauge to be conditional on a certain score from another column using an IF() formula. To test this out, I’m just trying to get a score of 1 from [Urgency] to show red on the chart. Is this possible? Am I on the right track?

“https://quickchart.io/chart?c={
type:‘radialGauge’,
data:{datasets:[{
data:[”&[Progress RW]&"],
backgroundColor:["& IF([Urgency]=1,‘red’,‘green’) &"]
}]},

options:{
trackColor: ‘white’,

centerArea:{
fontColor:‘white’,
fontSize:85,
}

}

}”

GreenFlux

I think the single quotes are being stripped away when the expression is evaluated. But they are needed in the final URL.

Try adding double-quotes around the single-quotes.

"'green'"

Paul_Janson

Single quotes are working fine when it’s just-
backgroundColor: ‘green’

It’s only when I add the If statement that things break. I tried adding double quotes around the single quotes like you suggested-
backgroundColor:["& IF([Urgency]=1,"‘red’","‘green’") &"]

No luck. I also tried additional quotes on the other side of the & to make a more obvious concatenation-
backgroundColor:["&“IF([Urgency]=1,‘red’,‘green’)”&"]

That didn’t work either… Wondering if the entire IF() needs to be wrapped in something? Square braces didn’t work.

“https://quickchart.io/chart?c={
type:‘radialGauge’,
data:{datasets:[{
data:[”&[Progress RW]&"],
backgroundColor:["& IF([Urgency]=1,‘red’,‘green’) &"]
}]},

options:{
trackColor: ‘white’,

centerArea:{
fontColor:‘white’,
fontSize:85,
}

}

}”

Koichi_Tsuji

Pushing the Appsheet expression is making things more complicated. I suggest you create the virtual column to calculate your if statement, for example [Color] field, then you anchor that field within expression.

Paul_Janson

This makes a lot of sense. I tried it and it’s pushing me an error. In the main column I have-

“https://quickchart.io/chart?c={
type:‘radialGauge’,
data:{datasets:[{
data:[”&[Progress RW]&"],
backgroundColor:["&[Color]&"]
}]}, …

This is the same syntax as data: in the previous line, which works. Also tried backgroundColor:[Color].

In the Color virtual column, to simplify things for testing purposes I just put ‘blue’-

I’ve tried this without quotes and with double quotes. Also tried changing the type to Color, that definitely breaks things.

I think this is the right idea, I’m just not executing it properly.

Koichi_Tsuji

You are passing “background” color parameter value in the form of ARRAY instead of the text value.

I m not able to validate this expression with me, so not tested. However try this.

“https://quickchart.io/chart?c={
type:‘radialGauge’,
data:{datasets:[{
data:[”&[Progress RW]&"],
backgroundColor:"&[Color]&"
}]},
options:{
trackColor:‘white’,

centerArea:{
fontColor:‘white’,
fontSize:85,
}

}

}"

Paul_Janson

Got it- no ARRAY brackets in the url, and in the Color virtual column I did what Joseph suggested and wrapped the single quoted color in double quotes- " ‘red’ ".

Thanks for the help! Moving on to incorporate the IF statement…

Koichi_Tsuji

Good to know you get through.

UrboyType

Recently I try. IF statement in background color. It’s work

data:
{
    datasets:[{
    data:[”,[Progress]*100,"],
    borderWidth:2,
    backgroundColor:"&IF([Progress]<0,' "Red" ',' "Green" ')&"
    }]

},

You need to adding single-quotes around the double-quotes.

' "Green" '

vlackie

Hello Mr Koichi

i´m tryng to use this API, but when i Replace (70) by the column PPCM wich is my % KPI the image dosn´t appear. What show is a square with 3 letters like "ceE" or "exp". Would you help me?

Koichi_Tsuji

Try this instead.

CONCATENATE(
“https://quickchart.io/chart?c={type:‘radialGauge’,data:{datasets:[{data:[”,
NUMBER([VC Offset Percentage]),"],
backgroundColor:‘Green’}]},options:{ title: {
display: true,
text:‘Energy Usage Offset’
},
trackColor: ‘rgb(255,0,0)’,centerPercentage: 70,roundedCorners: false,
centerArea:
{
text:’ “,NUMBER([VC Offset Percentage]),”%25’},
fontSize:70
}
}"
)

Taylor_Felt2

That didn’t work but this did. Thanks!

CONCATENATE(
“https://quickchart.io/chart?c={type:‘radialGauge’,data:{datasets:[{data:[”,
NUMBER([VC Offset Percentage]),"],
backgroundColor:‘Green’}]},options:{ title: {
display: true,
text:‘Energy Usage Offset’,fontSize:70
},
trackColor: ‘rgb(255,0,0)’,centerPercentage: 70,roundedCorners: false,
centerArea:
{
text:’ “,NUMBER([VC Offset Percentage]),”%25’},
}
}"
)

Koichi_Tsuji

Good.

As far as my experience is concerned, max font size could be something like 75 based on texts numbers, such as 5% 10% 100%.
Once you apply large font size, it is a risk the image chart return the NO text in the middle.

Try different number of font size which perfectly fit with your case.

Taylor_Felt2

Got it. Thanks for your help.

Paul_Janson

I did try without the brackets, sorry I posted the ARRAY attempt as my post, it was a moonshot.

robertpetitto

Anyone know of a way to throw an image in the center rather than the text?

Fabian_Weller

Instead of text you can use Emojis. Would that be a solution for you?

IvanCruz

hello Koichi

I''ve some data listed below

ID	Name	Actual 1	Actual 2	Actual 3	Actual 4	Target
1	David	90	92	95	98	100

Is it possible to make radar chart in appsheet, based on that data?

I want the result like this

Thanks, for your help

vlackie

Good day.

I use this code

The texts in the vc looks like this fyg.

“https://quickchart.io/chart?c={type:‘radialGauge’,data:{datasets:[{data:["&[Percent]&"],backgroundCo...]}}”

the UX card, but istead of gauge in each lie oly can see a square with: ecE

Radial Gauge / "Meter" - Inline Dynamic Icon - How to create?