Adding Pie Chart to Details View

[Corey_Van_Patten]

I’m at a loss here as a newcomer to appsheet. I feel as though this should be incredibly simple/straightforward to accomplish, but have now spent countless hours with no progress. Looking for help pointing me in the right direction!

I’m looking to create a simple budget tracking app with Categories (“Vacation”, “Clothing”, etc) on the primary tab and when a category is selected, a pie chart for that category populates in the detail tab (showing two variables - % of budget spent and % remaining).

This should be able to populate from a very simply spreadsheet with two tabs. One tab that lists all entries line-by-line (submitted via a form/app) and a second tab that aggregates/sums the totals by category.

I’ve been trying to review items on Slices and Refs on the help site and youtube, but haven’t made much progress. I’ve tried creating a Ref Pie Chart, but cannot figure out how to link it to the Details section in the App.

Thanks!

[Kirk_Masden]

Hi @Corey_Van_Patten! Welcome to the community! Sorry you haven’t gotten a response yet.

I haven’t worked much with charts yet but I can certainly understand your frustration. AppSheet is a powerful platform and easier to learn and implement than traditional coding but I too have had the experience of spending hours and hours trying to figure out how to do something.

@Corey_Van_Patten

I feel as though this should be incredibly simple/straightforward to accomplish

Sometimes things that would be super easy to do, say, on a spreadsheet are harder to do in AppSheet. And, of course, the opposite is true as well. If you start with the notion that “this should be possible” you might have more difficulty because it may be the case that the approach you are imagining simply isn’t available on the platform.

Generally speaking, I would start by trying to copy sample apps. Here’s one with a pie chart:

https://www.appsheet.com/samples/Collect-new-lead-details-and-analyze-source-trends

Notice that the pie chart is not in a detail view.

Another good thing to do is to search this community. Such a search yielded the following for me:

Adding a chart on detail view

@_Excelrati To the table where Customer information is coming from, add a Virtual Column with a SELECT(…) expression to populate which data you want from any desired table which will create a LIST type virtual column. Then create a REF type Chart View associated with this Virtual Column. Edit Customer Detail view and arrange the column order including this virtual column. Your chart(s) will be shown as an inline view in Customer Detail View.

I think @LeventK’s explanation is good but, since you are new to AppSheet, it may seem difficult at first.

I wonder if anyone knows of a sample app that employs this strategy for pulling in a chart into a detail view.

[tsuji_koichi]

Happy new year (明けましておめでとうございます）

In terms of your query to present the chart under or inside the detail view, it is quite depending on the use case as well as contexts of your app, but it is surely feasible.

In case you would like to use the native Appsheet chart, generally it requires bit tricky set ups.

The most easiest way to create pie or progress chart PER row basis, meaning the data consumed in the chart is coming from a single row which construct "detail view”, I would call the external service, I ve introduced to the community is the most easiest way, less complicated.

https://quickchart.io/gallery/

[Kirk_Masden]

@Corey_Van_Patten, be sure to check out @tsuji_koichi’s tip about how to implement this:

Radial Gauge / "Meter" - Inline Dynamic Icon - How to create?

Dear community, On various occasions, we wish to have some sort of KPI so that the user can get the better experience and insight. Most of the “icon” is basically “static”, but I found a way to create KIP radial gauge type of Icon, based on the data in Appsheet column/data field. This is super easy. Borrowing code from ; - This is Javascript open-source library, and they have bunch of chart image type. Among other, I use Radial Gauge meter to place the same an icon for inline display the…

It’s very popular!

あけましておめでとう to you too, @tsuji_koichi!

[tsuji_koichi]

Those ones as well.

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 …

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. [5D03A33C-322B-456D-93C0-E7F3CFE0D510] 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…

Which shape?

At your choice.

[Corey_Van_Patten]

Hey everyone, thanks so much for the thoughtful responses. I’ve been able to spend some time reviewing the links/notes that you’ve shared above and have successfully implemented a Radial Gauge icon as per @tsuji_koichi instructions. It works perfect.

I’ll continue to review the info shared in this thread and iterate to see if I can further improve on my App (and appsheet skills), but appreciate all of the help to get me going!

Happy new year!
Corey

[Kirk_Masden]

Hi @Corey_Van_Patten! Glad you are having some success.

I think you are already able to use QuickChart effectively but I wonder if your approach is the same as mine. I made a sample app that I think it close to what are working on:

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 …

[Corey_Van_Patten]

Thanks, Kirk. This is very helpful - appreciate being able to review the demo you put together. I’ve spent some time trying to build my own stacked bar chart and while I can get the chart to populate on quickchart.io, I seem to be receiving an error when entering it as a formula in appsheet. Have you encountered this before? Any thoughts on how to troubleshoot? I’ve looked at your sample app as well as other threads on the forum and haven’t been able to identify where I’m going wrong just yet.

The below creates an image with “Chart error: Unexpected token ‘;’ - 9:34”

CONCATENATE(“https://quickchart.io/chart?c={ type: 'horizontalBar', data: { datasets: [ { label: 'Dataset 1', backgroundColor: 'rgb(255, 99, 132)', data: [52], }, { label: 'Dataset 2', backgroundColor: 'rgb(54, 162, 235)', data: [17], }, ], }, options: { scales: { xAxes: [ { stacked: true, }, ], yAxes: [ { stacked: true, }, ], }, plugins: { datalabels: { anchor: 'center', align: 'center', font: { weight: 'bold', }, }, }, }, } ")

Thanks again for the help!
Corey

[Kirk_Masden]

I’m afraid I don’t know the answer but I can say that I’ve gotten the same error. Using the “sandbox” feature I mention in my post helped me get to an error-free solution.

[Steve (Steve Coile)]

Try:

CONCATENATE(“https://quickchart.io/chart?c=", ENCODEURL("{ type: 'horizontalBar', data: { datasets: [ { label: 'Dataset 1', backgroundColor: 'rgb(255, 99, 132)', data: [52], }, { label: 'Dataset 2', backgroundColor: 'rgb(54, 162, 235)', data: [17], }, ], }, options: { scales: { xAxes: [ { stacked: true, }, ], yAxes: [ { stacked: true, }, ], }, plugins: { datalabels: { anchor: 'center', align: 'center', font: { weight: 'bold', }, }, }, }, } "))

[Kirk_Masden]

I tried it and, as expected, it works. I’m glad to learn about this because I wouldn’t have thought to use it:

ENCODEURL()

Encoding removes any special meaning the individual characters within some-value might have when used within a URL.