New Chart series - Half round gauge chart ; QuickChart new chart type

In addition to circle gauge chart as well as progress bar chart, which are generated using QuickChart Open Source chart library, I found now harf gauge chart was in place.

Link to QuickChart

You see all the details and properties to control the looks of the chart, like color, size, boarders etc.

However, if you want to create the exactly same chart in this screenshot, please copy and paste the expression below to your table and Virtual Column.

https://quickchart.io/chart?c={
type: ‘doughnut’,
data: {
datasets: [{
label: ‘foo’,
data: [”&number([Percentage])&", “&number([Remainder])&”],
backgroundColor: [
‘rgba(255, 0, 0, 0.8)’,
‘rgba(255, 165, 0, 0.4)’
],
borderWidth: 2,
borderColor: ‘rgba(0, 0, 0, 1)’,
}]
},
options: {
rotation: Math.PI,
circumference: Math.PI,
cutoutPercentage: 75,
plugins: {
datalabels: { display: false },
doughnutlabel: {
labels: [
{
text: ‘\nRate’,
color: ‘rgba(255, 0, 0, 0.9)’,
font: {
size: 50
},
},
{
text:"&MID(“x’x”,2,1)&"\n"&number([Percentage])&encodeurl("%25")&MID(“x’x”,2,1)&",
color: ‘rgba(255, 0, 0, 0.9)’,
font: {
size: 70,
},
},
]
}
}
}
}"

Make sure you have [Percentage] column (or any prefered name) and make the field to number type.

In addition to VC for chart itself, preare another chart to calculate [Remainder] In this VC, place the simple expression 100-[Remainder]

Once you place the number to percentage field, for example, you enter 10 , then reminder column will yeild 90. Those number are needed to draw the chart to construct chart URL.

Enjoy.

cc to @ianw

8 Likes

Very Cool :wink:

Can you explain how this works? How would I use different charts on the website and have it interact with my data?

See and examine the documents provided by https://quickchart.io/gallery/
Generally, you can create any type of Chart they are providing in their gallery, and consume Appsheet table column to dynamically change the appearance like my quick demo as above.

3 Likes

Thank you, I don’t fully understand how this would be done. I think appsheet should do a tutorial on these because they just look and seem fantastic :smiley: