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. thanks to the effort and contribution of https://quickchart.io/

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.

โ€œ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.

22 16 4,855
  • UX
16 REPLIES 16

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

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.

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.

Rifad
Participant V

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.

teambelair
Participant V

3X_e_f_ef7fa9398d37fe9f829e8e21d5c0fb964246675e.jpeg

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.

teambelair
Participant V

Has anyone figure out how to change the main bar border color?

I have this code but the the borderColor applied only to the progress sub-bar (blue sky color):

https://quickchart.io/chart?c={
	type:'progressBar',
	data:{
		datasets:[{
			data:[50],
			borderColor: ['rgba(72, 145, 219, 1)'],
			borderWidth:5
		}]
	}
}

Thanks!

@tsuji_koichi have you customized the outer border color?

Also did you always use this for percentage progress? I canโ€™t find how to indicate my own progress value and total that is not percentage.

https://quickchart.io/documentation/


Not sure what this mean.

Did you manage to change the label?... I canโ€™t find how to indicate my own progress value and instead of the value of the percentage column?

 

thanks in advance.

Hi, Iยดm getting the erro:

โ€œChart error: Error: Unexpected token โ€˜{โ€™ - 1:2โ€

Or

โ€œChart error: Error: Unexpected token โ€˜{โ€™ - 1:8โ€

Can you helpe me?

you just change the data range means select the data column in DATA section

Top Labels in this Space