How to create a Pie Chart in Bubble.io

Creating Beautiful Data Visualization in Bubble.io

Welcome to another video looking at the topic of beautiful data visualization in Bubble.io. Basically what I mean is how to create really good-looking charts in Bubble. And to begin with, in an earlier 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 visualizes purchases grouped by each month.

Adding Products to the Database

But what have I wanted to visualize on a pie chart? How different products represent the sum total? So in my app data I've added in products, data type, jeans, t-shirt, trainers. I've also given to purchase a product field. So I'm going to add in a dropdown to my repeating group here. And this is going to be my way of quickly assigning a product to my purchases.

Setting Up Auto-binding

So products have got 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.

Introducing Apex Charts Plugin

Now let's get into showing a pie chart. And so I'm showcasing here a plugin called Apex Charts by Thimmo. 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.

Adding a Pie Chart to the Page

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. So let's add in a pie chart.

Configuring the Pie Chart Data

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 count. And so in fact 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.

Setting Up the Chart Labels

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 product's label. And let's preview that.

Visualizing Order Counts

Okay so t-shirts make up three orders. Three out of six. So that's half. So there we have t-shirts showing up half. And then trainers two and jeans one.

Changing to Sum of Order Amounts

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.

Enhancing Chart Appearance

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.

Adding Currency Symbols and Formatting

So I think if I put a dollar sign in there. Let's check that. Yeah I'm now getting a dollars sign on the tooltip when I hover over. I think I can also adjust decimal places. Does that need decimal? decimal.mat. So I can change this to zero.

Final Result

Okay there we go. So that's it. That's how to create a pie chart in Bubble.