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.

15 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.

“bkg=white&height=80&” remove from the code and follow the process as it is. It will work.

1 Like

Thanks for this @tsuji_koichi

Does the [Percentage] virtual column (type Number) not need an app formula?

Not sure exactly what your question will be, but you need numeric value to let the chart service to draw the progress bar chart. You need to pass the number , 1%, 2% 20% whatsoever, otherwise you cant draw such a chart.
So that parameter is essential.

Your instruction was…
“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.”

I created a virtual column & named it [Percentage], type 'Number. Appsheet is telling me that ‘virtual columns need a formula/expression’.

I also created another virtual column, I named it [ChartCode] & this is where I entered the Expression(Code) for the quickchart.io. This column has no issues

I think I’m missing something from the instructions above

Sorry if my comments and instructions were vague and give some confusion.
Actually it is not really a matter, percentage colummn which is used to contruct the chart url is, either virtual or physical.

If you can elabrate more your case where you stuck and what sort of error message you see, as well as your table/column set up you could share then probably i can guide you better.

Sorry, but it will be a tomorrow job for me as I m now calling a day. Good night and good day.

1 Like

Okay, I think that I may be elaborating a bit too much.

Basically… does the [Percentage] column need a formula?

No . Direct number or returned by expression . Either way should work.

1 Like

2020-12-29_22-31-00

Works great. I need to play with the parameters to make it look smaller.

Does it needs to be on a field of Show type with Image as category? It creates an indentation that I would like to remove.

[UPDATE]
Figure it out. It works with the field type Image and paste the “Code” in the Formula.

1 Like

I would like to update dynamically the backgroundColor but get this error:

Looks like the issue comes from the double quotes inside the single quotes.
2020-12-30_0-00-00

The working value:
2020-12-29_23-56-30