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!
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.
@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.
User | Count |
---|---|
42 | |
30 | |
25 | |
23 | |
13 |