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

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

Help needed with Donut or Pie chart for 1 single row data

| month | budget | spent | remains |

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