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]&”],backgroundColor:‘green’}](https://quickchart.io/chart?c={type:‘radialGauge’,data:{datasets:[{data:[“&[Percent]&”],backgroundColor:‘green’})]}}”
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!
