Solved: Help needed with Donut or Pie chart for 1 single r...

cboteros · 05-04-2021 04:49 AM

Hello everyone,

I have a table BALANCE which has the columns:

[month] - of type date which is the 1st day of each month
[budget] - of type decimal, which has a fixed amount which is the budget for that month
[spent] - virtual column which is the sum of all expenses that happened on that month
[remains] - virtual column which is the result of [budget] - [spent]

Also, I’ve created a slice CURRENT_MONTH_BALANCE which has only 1 row which is the one that corresponds to the current month. So, my slice would look like this:

| month | budget | spent | remains |

| 01/05/2021 | 2300.00 | 575.00 | 1725.00 |

My intention is to have a Donut or Pie chart that will display the “spent” vs the “remains” amounts.

So, in this example, the Donut or Pie chart will show a 1/4 of the pie in one color (spent) and 3/4 in another color (remains).

But… I’m not able to make this work in AppSheet, since I just get 1 color donut/pie that sums both “spent” and “remains” value (so, just one circle telling 2300 )

Ive tried both, the classic and the newer chart version, but I don’t seem to get it working…

What am I missing?

cboteros

Hello again,

I managed in the end what I wanted to do and I wanted to share the learning for that.

So, it seems that ENCODEURL() does not play well with certain special characters:

#
%
+

and maybe others…

Then, instead of writing those characters, you need to write the equivalent URL encoded version of it, so:

# = %23
% = %25
+ = %2B
etc…

Thanks to this, I can now use again the Hexadecimal colors, just that instead of writing it like this:

backgroundColor:
[
‘#006391’,
‘#ccc’
]

I will write them like this instead:

backgroundColor:
[
‘%23006391’,
‘%23ccc’
]

Here is a link to a full list of the URL encoded characters:

https://www.w3schools.com/tags/ref_urlencode.ASP

So, in case that you want to re-use what I have in the end, here it is:

 CONCATENATE(
  “https://quickchart.io/chart?c=", 
  ENCODEURL(
    "{
      type: 'doughnut',
      data:
      {
        datasets: 
        [
          {
            data: 
            [
              642, 
              2500
            ],
            backgroundColor: 
            [
              '%23006391',
              '%23ccc'
            ],
            borderWidth: 3
          }
        ],
        labels: 
        [
          'Remaining',
          'Spent'
        ]
      },
      options: 
      {
        rotation: Math.PI,
        circumference: Math.PI,
        cutoutPercentage: 75,
        plugins: 
        {
          datalabels: 
          { 
            display: true,
            color: 
            [
              '%23fff',
              '%23000'
            ] 
          },
          doughnutlabel: 
          {
            labels: 
            [
              {
                text: '\nBudget',
                color: '%23006391',
                font: 
                { 
                  size: 25 
                },
              },
              {
                text: '\n26%25',
                font: 
                { 
                  size: 40 
                },
              },
            ]
          }
        }		
      }
    }"
  )
)

View solution in original post

Suvrutt_Gurjar

I think your configuration of each value in different columns rather than in rows is suitable for row series chart. Pie and Donut chart configurations seem to work on data arranged in rows.

You may wish to explore a row series chart as shown below.

However there may be more guidance/ trick possible that someone in the community could share.

cboteros

Thank you @Suvrutt_Gurjar ,

I had indeed explored already this option to use bar charts and it does work.

But… I still wanted to see if there is a way to use the Donut / Pie chart instead. It just gives a different “feeling” (maybe I just like Pies and Donuts too much, haha!)

Suvrutt_Gurjar

Yes , sometimes specific chart types are more suitable. Someone else may have an approach or a workaround available.

By teh way, may I know if your this table multirow table? Also will the chart show the details for only one month say current month or you wish the chart should keep showing details for different months?

hru

perhaps using a google sheet chart and use it in appsheet as image?

or use quickchart.io?

Koichi_Tsuji

QuickChart is surely a solution for this.

Koichi_Tsuji

Another workaround without engaging third party service.

Create new slice just for chart view as default view.
Create new virtual column addressing and refereing to this new slice to get the list of the IDs for inline view.
Create chart whatever you want out of this slice.

Appsheet will deem this chart view as default view associated with this slice. your vircual column with return the single row associated with the parent record.
You will see the inline view as a chart type view, probably you can achieve what you want.

cboteros

Thank you @tsuji_koichi ,

I hope your solution will work, but frankly I don’t understand what is your suggestion, could you please elaborate?

I mean, I already had created a Slice with the data that I’m expecting to see, it just happens to be in one single row (with several columns) and it seems that the Donut and Pie charts use several rows instead…

Koichi_Tsuji

Ah okey, when you want to draw the donuts chart , then my suggestion is not gonna work, but quickchart will definitely work to draw donut chart out of single row values

cboteros

Hello again! So, I took the advice to try out QuickChart.io, and I must say it is a great project and offers very flexible and complete charts!

I found in the chart gallery the Gauge chart, which I think will work even better for my persona project than the original Doughnut chart which I had in mind.

But I’m having troubles to make it work in AppSheet, and there doesn’t seem to be a chart-maker option for this either (so, I can’t create the special link).

This is a Sandbox of the type of chart that I would want to use in my app:

QuickChart Sandbox - Gauge chart

And I’m adding it in my AppSheet as a Virtual Column like this:

CONCATENATE(
  “https://quickchart.io/chart?c=", 
  ENCODEURL(
    "{
      type: 'doughnut',
      data:
      {
        datasets: 
        [
          {
            data: 
            [
              642, 
              2500
            ],
            backgroundColor: 
            [
              '#006391',
              '#ccc'
            ],
            borderWidth: 3
          }
        ],
        labels: 
        [
          'Remaining',
          'Spent'
        ]
      },
      options: 
      {
        rotation: Math.PI,
        circumference: Math.PI,
        cutoutPercentage: 75,
        plugins: 
        {
          datalabels: 
          { 
            display: true,
            color: 
            [
              '#fff',
              '#000'
            ] 
          },
          doughnutlabel: 
          {
            labels: 
            [
              {
                text: '\nBudget',
                color: '#006391',
                font: 
                { 
                  size: 25 
                },
              },
              {
                text: '\n26%',
                font: 
                { 
                  size: 40 
                },
              },
            ]
          }
        }		
      }
    }"
  )
)

As you can see, so far I’m not adding the AppSheet values, to override the values of the QuickChart, I just wanted to see how the chart would look in my app.

But… all that I’m getting is a grey “warning” icon () and when I mouse over it it just says “500” (so, I’m assuming it is a 500 server error)

Would anyone know what would be the issue?

cboteros

FYI, thanks to a suggestion from @ianw I think I managed to see that the problem is on AppSheet side.

He suggested me to change the column type to “Text” to see the output and investigate more, so this is the output:

https://quickchart.io/chart?c=%7B%0A%20%20%20%20%20%20type%3A%20%27doughnut%27%2C%0A%20%20%20%20%20%20data%3A%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20datasets%3A%20%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20642%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%202500%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%23006391%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%23ccc%27%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20borderWidth%3A%203%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20labels%3A%20%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%27Remaining%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27Spent%27%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20options%3A%20%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20rotation%3A%20Math.PI%2C%0A%20%20%20%20%20%20%20%20circumference%3A%20Math.PI%2C%0A%20%20%20%20%20%20%20%20cutoutPercentage%3A%2075%2C%0A%20%20%20%20%20%20%20%20plugins%3A%20%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20datalabels%3A%20%0A%20%20%20%20%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%23fff%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%27%23000%27%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%20%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20doughnutlabel%3A%20%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20labels%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20%27%5CnBudget%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%27%23006391%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2025%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20%27%5Cn26%25%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2040%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%09%09%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D

Which gives us the right URL for the image, since I just copy-pasted this in the browser and I got the image of the chart that I want…

Then I changed the column type back to “image” to later run my app from the browser and then I used my browser’s (Google Chrome) “Developers tools” from where I could see the 500 error in the console:

Then, I noticed in the tool the URL that caused the error and it is this one:

https://www.appsheet.com/remote/https%3A%2F%2Fquickchart.io%2Fchart%3Fc%3D%7B%0A%20%20%20%20%20%20type%3A%20'doughnut'%2C%0A%20%20%20%20%20%20data%3A%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20datasets%3A%20%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20642%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%202500%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%23006391'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%23ccc'%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20borderWidth%3A%203%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20labels%3A%20%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20'Remaining'%2C%0A%20%20%20%20%20%20%20%20%20%20'Spent'%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20options%3A%20%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20rotation%3A%20Math.PI%2C%0A%20%20%20%20%20%20%20%20circumference%3A%20Math.PI%2C%0A%20%20%20%20%20%20%20%20cutoutPercentage%3A%2075%2C%0A%20%20%20%20%20%20%20%20plugins%3A%20%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20datalabels%3A%20%0A%20%20%20%20%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%23fff'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%23000'%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%20%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20doughnutlabel%3A%20%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20labels%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20'%5CnBudget'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20'%23006391'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2025%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20'%5Cn26%25'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font%3A%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2040%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%09%09%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D?width=600

And when you paste that URL directly in the browser you can see a simple error message:

Oh no! Something went wrong fetching your file :(TypeError: Invalid URL string.

I assume that probably there might be a length limitation for the URL on Appsheet side…

I tried removing the “white spaces” (%20) from the URL to make it shorter, but I still got the error…

Before removing the “white spaces” (%20) the QuickChart link is 3062 characters long.

After removing the “white spaces” (%20), the QuickChart link is 782 characters long.

After also removing the “linefeeds” (%0A), the QuickChart link is 587 characters long.

I hope this information is helpful to anyone at Appsheet

cboteros

Hello Everyone,

Just wanted to give an update on this issue. I found what is causing the problem.

After few tests, I found out that the problem is not in the length of the link, but the problem is on few special characters that I was using, # and % in my particular case.

This problem happened even when using the ENCODEURL() function.

Also, I tried to “escape” those characters, as in:

\#
\%

But that didn’t seem to work either with AppSheet.

Anyway, the “#” I was using it to indicate the color of the elements in the chart in a hexadecimal format (e,g: #006391 for a specific tone of blue).

I solved this one by using instead the rgb() function

Now… I still would want to use the “%” since I want to express the percentage of the remaining amount… would anyone have any suggestion on what should I do to still be able to display the “%” ?

cboteros