Adding Pie Chart to Details View

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!

0 10 1,539
  • UX
10 REPLIES 10

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.

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:

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.

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/

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

It’s very popular!

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

Those ones as well.

Which shape?

At your choice.

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

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:

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

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.

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', }, }, }, }, } "))

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

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

Top Labels in this Space