Using QuickChart in your apps

@tsuji_koichi has shared several useful posts about how to use QuickChart (https://quickchart.io) to augment AppSheet’s native chart functions:

I had some difficulty figuring out how to implement these tips. Judging from the comments, it seems like most people have been able to understand the posts fairly easily but I thought I’d explain it in my own way in the hope that that might help some creators out there who, like me, had some difficulty following the instructions.

First, I made a little app to illustrate how it works, which I put on my portfolio page:

https://www.appsheet.com/portfolio/230844

The app is “Pie Chart Demo”. Be aware that I may decided to take it down after a few months. I generally limit my portfolio page to my main app.

In my own attempt to use QuickChart, I found the following page to be particularly useful:

https://quickchart.io/sandbox/#{ %20%20type%3A%20'pie'%2C %20%20data%3A%20{ %20%20%20%20datasets%3A%20[ %20%20%20%20%20%20{ %20%20%20%20%20%20%20%20data%3A%20[84%2C%2028%2C%2057%2C%2019%2C%2097]%2C %20%20%20%20%20%20%20%20backgroundColor%3A%20[ %20%20%20%20%20%20%20%20%20%20'rgb(255%2C%2099%2C%20132)'%2C %20%20%20%20%20%20%20%20%20%20'rgb(255%2C%20159%2C%2064)'%2C %20%20%20%20%20%20%20%20%20%20'rgb(255%2C%20205%2C%2086)'%2C %20%20%20%20%20%20%20%20%20%20'rgb(75%2C%20192%2C%20192)'%2C %20%20%20%20%20%20%20%20%20%20'rgb(54%2C%20162%2C%20235)'%2C %20%20%20%20%20%20%20%20]%2C %20%20%20%20%20%20%20%20label%3A%20'Dataset%201'%2C %20%20%20%20%20%20}%2C %20%20%20%20]%2C %20%20%20%20labels%3A%20['Red'%2C%20'Orange'%2C%20'Yellow'%2C%20'Green'%2C%20'Blue']%2C %20%20}%2C }

This “sandbox” page helped me understand that, with QuickChart, you make a URL that contains the data that is used to make the chart. I played with the sandbox until I understood how the URL worked.

Then in my demo app, I used CONCATENATE() to build URLs with data from different columns. The CONCATENATE() expression is in an IMAGE type virtual column. I think it works pretty well, and adds some functionality that is currently missing from AppSheet.

10 Likes

I copied your app to my public portfolio, in case you want to take it off of yours.

https://www.appsheet.com/portfolio/546920

4 Likes

Thanks! I’ll do that eventually!

1 Like

@Steve has shown us how to avoid a common type of error that can occur when using URL based services such as this one:

2 Likes