Welcome to another video looking at the topic of beautiful data visualisation in Bubble.io. Basically what I mean is how to create really good looking charts in Bubble. And to begin with, in an earlier Bubble.io tutorial, I've demonstrated how to create this area chart or line chart with my data down here. I've called these purchases and then it visualises purchases grouped by each month. But what if I wanted to visualise on a pie chart how different products represent the sum total.
Adding a Pie Chart to Bubble.io
So in my app data I've added in product data type, jeans, t shirt, trainers. I've also given to purchase a product field. So I'm going to add in a drop down to my repeating group here. And this is going to be my way of quickly assigning a product to my purchases. So, products have got a field called label.
I'm going to say this is auto binding modifying product because it's the first time I've set up auto binding, I just need to add in a privacy rule and I'm just going to say for the purpose of demonstration in this app, everything can be allow auto binding on everything. So now if I refresh, I can assign different clothing items to each of my orders. Now let's get into showing a pie chart. And so I'm showcasing here a plugin called ApexCharts by Thimo really class act of a plugin developer. Some real quality plugins out there.
And this is the chart plugin that I keep coming back to. And so I'm going to be creating a pie chart just like this one. If I scroll up to the top, I can go page editor. And this is his pie chart that he's got as part of his demo. So let's get the pie chart element.
I can access this because I'm already subscribed to his plugin. I've added it in through the plugin store.
How to use Group by...
So let's add in pie chart. And so the series data is going to be do a search for purchases and I'm going to group by the product and I'm going to add a new aggregation and that's going to be account. I'm going to demo two different ways of doing it. First of all, I just want to know the number of orders of a particular product, how that looks in the whole using a pie chart. So I'm going to use count and then the data is going to be each item's count.
And then I'm going to copy and paste this into here. And instead of count I need to provide a label. And so that's each products label and let's preview that.
Okay, so T shirts make up three orders, three out of six. So that's half. So there we have yep, t shirts showing up half and then trainers two and jeans one.
What if I wanted to see a pie chart based on the amount, which is this number here for each order or rather grouped by the product. So I'm going to change my group by and I can just add in another aggregation.
And this time it's going to be sum and it's going to be amount. And I'm going to change this to group by product and this time, sum of amount.
So trainers looks like it should be the largest one. There we go. Trainers. So that's the sum of all the trainer values. And the same for jeans and T shirts.
Let's do a few things just to make this chart look a little bit more attractive. So I can add in some prefixes. Let's get the right ones in here. Data label prefix. So I think if I put a dollar sign in there let's check that.
Yeah, I'm now getting a dollar sign on the tooltip. When I hover over, I think I can also adjust decimal places, decimal amount. So I can change this to zero. Okay, there we go. So that's it. That's how to create a pie chart in Bubble.
