Progress Bar Chart ; new static image chart type in place!

Some people may say this is not bit deal, but for me, it is big!

I introduced to the community before how to create the gauge chart, but now we are able to create the progress bar chart dynamically. :grinning: thanks to the effort and contribution of https://quickchart.io/ :+1:

Link to QuickChart

They should have introduced Progress Bar Chart, and I tested if it can be used in Appsheet. This new type of chart should be just in place, so not much rich docs are presented, but I played around with it and found how and what “Property” we are able to control to customize the Progress Bar chart.

This demo is to share how it looks like.

we should be able to control more of “properties” to change the appearance, like we are controlling CSS, I will try to dig in deeper.

This chart should support us to present the progress or percentage in capacity etc depending on your use case.

The code (actually this is not a CODE, as far as we are working on Appsheet no-code platform), but you can twist it around to customize the chart further to fit with your taste. :grin:

https://quickchart.io/chart?bkg=white&height=80&c={
type: ‘progressBar’,
data: {
datasets: [{
data: [”&number([Percentage])&"],
backgroundColor: ‘rgba(207, 0, 15, 0.5)’,
borderColor: ‘rgb(231, 76, 60)’,
borderWidth: 5,
datalabels: {
align: ‘’,
color: ‘rgba(0,0,0,0.9)’,
font: {
weight: ‘bold’,
size:40
},
},
}],
},
“options”: {
responsive: true,

title: {
  align: 'end',
  display: true,
  position: 'right',
  text: 'Progress Bar'

}

}
}"

Enjoy new type of chart with Appsheet!

At last, I would say tons of thanks to @ianw who are now community member to the appsheet, but he should be running opensource Quickchart! Thanks again Ian.

8 Likes

To put this great chart, copy my code (again, it is not a code…) from my post. Make sure you create Virtual Column with name of [Percentage], with number type.
Then place this snippet ? to another virtual column, then appsheet will look after to generate the progress bar chart for you, powered by QuickChart.

@TDhers
@praveen

3 Likes

Thanks For this post. But this no longer works.

Welcome.