Stacked bar chart data prep

Wappler General Need Help
1

I want to create a stacked bar chart and it seems data needs to be formatted in the following way as per chart.js documentation. I just hope that is what Wappler’s flavour of the app also needs. Example:

Screenshot 2023-04-04 at 20.57.00
Screenshot 2023-04-04 at 20.57.001572×986 13.9 KB

data: [12, 59, 5, 56, 58,12, 59, 87, 45],

where “data” is my x-axis age and the values are the stacked values on the y-axis

Best I can do is query all the ages and then repeat through them, but my data structure ends up looking like this and that might be the reason my graph is just a repeat of the ages on the x-axis.

Screenshot 2023-04-04 at 21.02.18
Screenshot 2023-04-04 at 21.02.18706×1186 59.9 KB

Anyone has some pointers in changing my query to get:

“age”:47 [“amount”: 300000,“amount”: 500000,]

2

Could you point the link to the relevant documentation of this graph?

This is a malformed object, can’t help - please fix the example above or provide a link to the relevant documentation

Hints:

  1. Inside the Repeat, use a Set Value age with expression query.flatten('age')
  2. After the whole Repeat, use a Set Value repeatFlattened with expression repeat.flatten('query')

Edit: I think I made a mistake on hint 2, caution advised

1 Like
3

Thanks for the hints - that should help quite a bit. Have not used flatten before.

My attempt at how the object must look was a bit of a mix between what Pure chart.js needs and what Wappler creates, so ignore that then.

this is a bit better than the documentation as it is a live example of what you can do in chart.js:

4

Glad I helped somehow, hope you’re able to sort it out :slight_smile:

P.S.: I’m not familiar with charts, my answer is based solely by looking at the data structure

Edit: I think I made a mistake on hint 2, caution advised

1 Like