I have a collection (see below, it’s an edited screenshot, the collection is much longer) from which I would like to create a bar chart with the “Month” (circled in green) on the X axis, and the “Period” (circled in pink) on the Y axis.
I use the Chart JS plugin to achieve this. I watched the tutorial here: https://www.youtube.com/watch?v=yp9mTkAtq4Q but I don’t know how to proceed when the data is formatted as my data. Did someone already face the same challenge (or does someone know how to help) ?
Thank you!
Still, I can only get the first array in this collection (User goals.data[0]). How could I get everything in the User.Goals.data (i.e. 0,1, etc) and them plot them into the chart?
As mentioned in the video you referenced, if you want to use the Guided mode, you’ll need to bind to an array where the data is formatted in a way that the Guided mode can understand it.
If the required format is unclear, I would suggest creating an array variable in WeWeb with mock data and testing what information you would need in each object to achieve the desired result.
Here’s the data structure from the example in the video:
Once you’re clear on what data you need in the array to display what you want, you can think about transforming your real data to match that structure.
In order to do that, you have a couple of options:
manipulate the data in your backend so that it returns the data to WeWeb in the format you need, or
create a workflow on page load that loops through your original data, take the information you need, and updates an array variable with that information following the data structure that will work in Guided mode.
Does that make sense? Let me know if not. I know this is all a little bit abstract and can be daunting at first
In your case, I’m not 100% sure but it looks like your data might be properly formatted already but the configuration of your Y-axis doesn’t seem to be setup for a stacked bar chart (see my example above)
Many thanks for your answer. I struggled a bit with the logic but now it works. FYI I took a few hours to restructure the data in the backend (Xano) to obtain the dataset as you recommended.
Now, what if I want to do the same, with the advanced mode?
I watched your video where you show how to prepare it on the chart.js’ website so I did it with mock data but what if instead of data, I put a collection ? How would you proceed ?
Same as with the guided mode, I would format my data in a way that the advanced mode understands, either in my backend or in WeWeb.
Since I wouldn’t want to change my database structure every time I change my mind, I would use a db structure that covers 80% of my use cases and do data manipulation (through a backend function or frontend workflow) the rest of the 20%.
