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

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.

image

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’}]}}”

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!

9 Likes

Hi @tsuji_koichi,

Thank you for another useful tip. Will try out and update.

Morning friend

Yes please test it out, I suppose we can find more of useful stuffs to create quick chart dynamically to decorate app. Looking forward to hearing your findings. ^.^ /

This is very usefull. Thank you
But if it can be done this easily then Surely the Appsheet Team can build this into the platform by using the GoogleCharts for Developers (https://developers.google.com/chart) or other chart dev libraries

1 Like

Thank you very much @tsuji_koichi
There was a discussion about chart.googleapis.com and quickchart.io

I’m using the Doughnut Chart. The advantage is that you can have your values in different columns. Because when you want to use the AppSheet built in chart, the values have to be in the same column.

Adding @praveen

1 Like

quickchart.io & chart.js are great solutions that I use often! I have been thinking about making up an app to show how to set up more of the advanced options. I’m working on a timeline sort of chart right now.

It’s important to encode the url of parameters (everything after the ?c=). When you get into long strings of data it will make everything much easier.

3 Likes

Hi Fabian,

Thank you for your feedback.
Every different library and service should have own pros and cons, so we should take the better option from each and combine to make the best app!

1 Like

It is great if you could spent some moment to create the sample/portfolio app so that we learn more lesson. I tested other quickchart - chart type as well, and it generally worked well, as well.

I will try to find moment to create sample app as well, by pushing several chart into it.

4 Likes

Interesting Comparison Table:

https://www.chartjs.org/docs/latest/notes/comparison.html

1 Like

Coming in late here: Excellent Tip, @tsuji_koichi !! As I walked through your notes and examples, I was running into errors. Your calculation has curly-quotes in it, which I don’t think our app enjoyed :slight_smile: shame on me for copying and pasting :slight_smile: Also a field of type percent needs to be multiplied by 100 for quickcharts to work best for a radial. The calculation that worked for me against quickchart.io looks like this (for the next person who tries)

concatenate("https://quickchart.io/chart?c={type:'radialGauge',data:{datasets:[{data:[",[PercentComplete]*100,"],backgroundColor:'green'}]}}")
  1. Given a field called PercentComplete which is of type “percent” inside of AppSheet
  2. mark this field as an image or a thumbnail

Hope this helps!

2 Likes

Hi Ty, @TyAlevizos

Thank you for your comment. Yes, you well founded, the percentage column is little tricky to generate. I faced the same problem at first. The thing i have to spend hours and hours was I didnot know appsheet currently not able to return decimal type even with number type divided by number type of column. I mean if we set two number column as NUMBER, and one has value of 3, and other have 2. Device 3 by 2. is equal to 1.5 mathematically, but Appsheet only return numbers I didnt know the trick…

Anyway, this is nothing to do with the subject.

I m now using bar chart, which I call as INLINE-CHART here and there. See sample screenshot.
It might be bit distractive, but i place inline chart as background for the header etc.

It is fun.

Good thing with this inline-chart.

It is difficult to generate the chart with Appsheet native chart for line by line chart. I mean Appsheet chart is not able to generate the chart for data which is coming from single row.

For this inline chart, we are able to easily achieve that, although this is static image, not interactive chart though.

3 Likes

Hello tsuji_koichi,
I am unable to get Labels from array list trying to using Spider chart. The labels will change dinamically, depending for any case. When I could get the label from the virtual column, it is not conected with the data.

I have results ®, for which a certain number of indicators (IND) were defined in order to measure their progress. I want to be able to graph all the indicators for each result, but the names and values ​​of the indicators change for each result.

Here you have the code I am using:

https://quickchart.io/chart?c={type:‘radar’,data:{labels:[‘HERE I WANT TO INSERT VIRTUAL COLUMN NAME THAT HAS THE LIST THAT WILL CHANGE DINAMICALLY’], datasets:[{label:‘Resultado’,data:[”&[vcResultados_IND_Relacionados]&"]}]}}"

hi, there,

Yes, I understood what you want to do, dynamically change the labels, but I do have a workaround, which is little complicated.
I can have a look at your app, if you dont mind.

Share app to koichi.tsuji@vendolasolutions.com

1 Like