Using Custom Formula with Quickchart.io causes problems

Hi all,

Apologies in advance for the long post and thanks so much for all the help.

I am trying to make a stacked bar chart, and I think I need to do it using quickchart.io as I havent been able to get the detail level I need using the built in charts (or progress bars) in Adalo.

I create a bar chart in quickchart.io, it looks like this:

image

and the associated code is this:

{
  type: 'bar',
  data: {
    labels: ['7 Days ago', '6 Days ago', '5 Days ago', '4 Days ago', '3 Days ago', 'Yesterday', 'Today'],
    datasets: [
      {
        label: 'Green',
        backgroundColor: 'rgb(0,128,0)',
        stack: 'Stack 1',
        data: [29, 29, 29, 29, 29, 29, 29],
        fill: true,
      },
      {
        label: 'Yellow',
        backgroundColor: 'rgb(255, 233, 0)',
        stack: 'Stack 1',
        data: [39, 39, 39, 39, 39, 39, 39],
        fill: true,
      },
      {
        label: 'Orange',
        backgroundColor: 'rgb(255,140,0)',
        stack: 'Stack 1',
        data: [43, 43, 43, 43, 43, 43, 43],
        fill: true,
      },
      {
        label: 'Red',
        backgroundColor: 'rgb(255,0,0)',
        stack: 'Stack 1',
        data: [53, 53, 53, 53, 53, 53, 53],
        fill: true,
      },
    ],
  },
  options: {
    title: {
      display: true,
      text: 'Weekly Team Stress Continuum Levels',
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    responsive: true,
    scales: {
      xAxes: [
        {
          stacked: true,
        },
      ],
      yAxes: [
        {
          stacked: true,
          ticks: {
            beginAtZero: true,
            callback: function(value) {
              return value + '%';
            },
          },
          scaleLabel: {
            display: true,
            labelString: 'Percentage',
          },
        },
      ],
    },
  },
} 

When I bring the link into the image URL in Adalo, it works with the dummy data.

https://quickchart.io/chart?c={ %20%20type%3A%20'bar'%2C %20%20data%3A%20{ %20%20%20%20labels%3A%20['7%20Days%20ago'%2C%20'6%20Days%20ago'%2C%20'5%20Days%20ago'%2C%20'4%20Days%20ago'%2C%20'3%20Days%20ago'%2C%20'Yesterday'%2C%20'Today']%2C %20%20%20%20datasets%3A%20[ %20%20%20%20%20%20{ %20%20%20%20%20%20%20%20label%3A%20'Green'%2C %20%20%20%20%20%20%20%20backgroundColor%3A%20'rgb(0%2C128%2C0)'%2C %20%20%20%20%20%20%20%20stack%3A%20'Stack%201'%2C %20%20%20%20%20%20%20%20data%3A%20[29%2C%2029%2C%2029%2C%2029%2C%2029%2C%2029%2C%2029]%2C %20%20%20%20%20%20%20%20fill%3A%20true%2C %20%20%20%20%20%20}%2C %20%20%20%20%20%20{ %20%20%20%20%20%20%20%20label%3A%20'Yellow'%2C %20%20%20%20%20%20%20%20backgroundColor%3A%20'rgb(255%2C%20233%2C%200)'%2C %20%20%20%20%20%20%20%20stack%3A%20'Stack%201'%2C %20%20%20%20%20%20%20%20data%3A%20[39%2C%2039%2C%2039%2C%2039%2C%2039%2C%2039%2C%2039]%2C %20%20%20%20%20%20%20%20fill%3A%20true%2C %20%20%20%20%20%20}%2C %20%20%20%20%20%20{ %20%20%20%20%20%20%20%20label%3A%20'Orange'%2C %20%20%20%20%20%20%20%20backgroundColor%3A%20'rgb(255%2C140%2C0)'%2C %20%20%20%20%20%20%20%20stack%3A%20'Stack%201'%2C %20%20%20%20%20%20%20%20data%3A%20[43%2C%2043%2C%2043%2C%2043%2C%2043%2C%2043%2C%2043]%2C %20%20%20%20%20%20%20%20fill%3A%20true%2C %20%20%20%20%20%20}%2C %20%20%20%20%20%20{ %20%20%20%20%20%20%20%20label%3A%20'Red'%2C %20%20%20%20%20%20%20%20backgroundColor%3A%20'rgb(255%2C0%2C0)'%2C %20%20%20%20%20%20%20%20stack%3A%20'Stack%201'%2C %20%20%20%20%20%20%20%20data%3A%20[53%2C%2053%2C%2053%2C%2053%2C%2053%2C%2053%2C%2053]%2C %20%20%20%20%20%20%20%20fill%3A%20true%2C %20%20%20%20%20%20}%2C %20%20%20%20]%2C %20%20}%2C %20%20options%3A%20{ %20%20%20%20title%3A%20{ %20%20%20%20%20%20display%3A%20true%2C %20%20%20%20%20%20text%3A%20'Weekly%20Team%20Stress%20Continuum%20Levels'%2C %20%20%20%20}%2C %20%20%20%20tooltips%3A%20{ %20%20%20%20%20%20mode%3A%20'index'%2C %20%20%20%20%20%20intersect%3A%20false%2C %20%20%20%20}%2C %20%20%20%20responsive%3A%20true%2C %20%20%20%20scales%3A%20{ %20%20%20%20%20%20xAxes%3A%20[ %20%20%20%20%20%20%20%20{ %20%20%20%20%20%20%20%20%20%20stacked%3A%20true%2C %20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20]%2C %20%20%20%20%20%20yAxes%3A%20[ %20%20%20%20%20%20%20%20{ %20%20%20%20%20%20%20%20%20%20stacked%3A%20true%2C %20%20%20%20%20%20%20%20%20%20ticks%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20beginAtZero%3A%20true%2C %20%20%20%20%20%20%20%20%20%20%20%20callback%3A%20function(value)%20{ %20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20value%20%2B%20'%25'%3B %20%20%20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20%20%20scaleLabel%3A%20{ %20%20%20%20%20%20%20%20%20%20%20%20display%3A%20true%2C %20%20%20%20%20%20%20%20%20%20%20%20labelString%3A%20'Percentage'%2C %20%20%20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20]%2C %20%20%20%20}%2C %20%20}%2C }

It also works when I put in magic text with no filter: (here replaced the first data point, 29)

When I put in the magic text with a formula, though, the preview only shows a blank screen.

Edit to add:

I just did a quick verification that the custom formula does, in fact work, and it does:

image

Edit again to add:

After a lot of troubleshooting, it seems that for some reason the date condition causes an error. If I have the date condition in, and there is a record that exists on that date, it crashes.
If I have the date condition in, but there is no record on that date, the chart displays.
In either case, the same formula in a text box works.

Any thoughts?

I really appreciate the help.

Further investigation:

If I only filter on date, it works. This is if the value of the count is 0 or greater than zero.

But then if I add another “and” condition, and the value of the count is greater than zero, the chart crashes and I get only a white screen.

I am really baffled.

Thanks for the help!

Even further investigation!

If I manually type the field in in the filter criteria for the match criteria, the chart works.

I.e. if the field is User’s Organization (this is a different collection with a relationship)
and for “equal to”
I manually type in ABC

it works.

Bit if the field is User’s Organization
and for equal to
I use logged in User’s → Organization → Organization Name

The chart fails and I get a white screen.

Is there some kind of text formatting issue that is happening with quickcharts?

Thanks again, hope to find the solution to this!

I have never used quickchart extensively, but I do recognise your formula not working, but works in a text box… I’ve come across the same in a few other scenarios.

Just make the text input hidden, stick your fomula in it and reference that in your quickchart.io string instead.

1 Like

I really appreciate your reply @Rozza . Can you explain further, though, what you mean by:

reference that in your quickchart.io string instead.

How can I reference a text box text in the quickchart url text?

Inputs should be available under magic text, ‘Other Components’. So the calc is done in the input box then you point your magic text at that input and it gets dragged in that way.

1 Like

Ahh, I see now, the input is not a text box, it is created as an input. Thank you! I will keep working with this and update here if it works!

That worked! Immense thanks! I will keep applying this work-around to my app and it should solve a lot of problems. I really appreciate your help.

You’re welcome. I think you are pushing the envelope slightly so hope you don’t come up against too many problems. Best of luck :+1:

again, thanks for your help @Rozza
I have come across an issue now - the input field doesn’t update when the record gets changed, so it keeps the original number of the calc.
Any thoughts on how to make it update when the record is changed?

Hmmm, you’re updating the record and then displaying the chart on the same screen? That is beyond the envelope IMO.
You could try bouncing to a confirmation modal and then coming back.
You could also try Change Input Value after the record update, just re-write the formula again to it.

I’m actually updating the record on a different screen, but when I come back (via back button) to the chart screen the inputs don’t change.

update: when I changed to submit button on the second screen versus back button, that fixed it!

They might update in a native build, I can’t say for sure. You can put a Change Input Value action on back button, re-write your formula to the same input there. You could also store this value in a ‘Temp’ value field under Logged In User. Could be slightly slower but would cost the same in Actions and would definitely help in this issue you have.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.