Bubble.io has transformed the way we develop web applications, making it more accessible than ever before. Stunning charts and data visualisations just like these are essential for communicating insights and engaging users.
How to add charts to a Bubble app
In this tutorial, we'll showcase the Apex Charts plugin by Thimo and demonstrate how to captivate audience with great looking charts. So we are showcasing this plugin. This is a charts plugin that I've been using for several years now.
I thoroughly rate Thimo as a plugin developer. Every plugin he's got out there, great documentation, real quality developer. So let's dive into the app that I'm building. I'm beginning to gather data on Sales. I'm just going to put two more examples in so that I've got some data to demonstrate a chart with.
Okay, going to change this to not fixed number of rows. Change that to zero. That's not where we're at. Let's go with that. Oh, I remember that's not what there we go. Change that to column. Change that to row.
Right. Let's not get too sidetracked refresh that. Okay, so you can see here that I have some date data and some amount data, which I'm using as a currency. So let's add in the plugin search for Apex Charts and subscribe.
Okay, now I have access to all of these fantastic chart elements that the developer Thimo, has kindly provided for us. I'm going to swap over to demo one, and we'll begin with this Sales chart here. So as often is the case, if you're trying to copy what a plugin developer has gone and done, you can usually find a link that they've put on their demo page to their page editor. And so we're able to go in and let's find here we go. Close that.
We're going to build this chart, and I'm going to show you how to populate it with data from your database. So he's using an area chart.
So I'm going to add in a nice big area chart. And then my data series again, just referring back here. So he has sales. Okay, we'll do that. So we'll also call this Sales.
And then the data series is going to be do a search for purchases. That's all my data type that's being displayed down here. And then I'm going to sort it by my date field and then descending no. And the actual data is amount.
And then my category, I'm going to use my date. So I do the same search. Now, it's important that the search is basically identical, that the return data is going to be in the same order in order for it to correctly match up the points. And this time I'm going to show the date for each item and format my date like this. And let's just go ahead and look and see what that's done already.
Okay, so you can see here that June 6, we have 48 that's being shown. And then July 3 is the next entry. Now, this is working. But we can do so much better with date data because it's not necessarily logical to jump from June 6 to July 3, then to July 4, and have these share the same distance across the x axis SEO. Let's use group by in order to express our data in a better way.
Group by month date data
So I'm going to say group by date and then by month. And this is going to combine well, group by and combine my data that occurs in the same month. And I'm going to go interval of one month. And then I need to have a start date. And my start date is going to be do a search for purchase order by date descending no.
Therefore I'm going to get my first item because that can be my earliest record. And say date. I'm then going to say don't skip empty groups. That means that let's say August. If there are no entries for August, I don't want it just to jump from July through to September.
So I need to provide an end date. And my end date is going to be this expression, last items date.
And then no.
In my group bar, I add a new aggregation. And so the aggregation is going to be a sum of amount so that each month, all of the dates within that month are grouped into that month. And then I add up the total of the amount, and that will be the value displayed on the y axis of the chart. And so then my data is going to be sum of amount. And if I copy and paste my formulas, this instead will be date.
And I'm going to format the date custom because I just want to show the month and the year. So if I do three ms, that gets me the month. It's being previewed just down there. And I'll put a comma and two y's, and that gets me the year. Let's preview it.
Okay, so there you can see we've got June. Yep, still 48. And then July. Well, July is going to be a sum of these SEO that would be 220. Brilliant.
And then August will be a sum of those, which would be 179. That's where I was going. Okay, so there you go. That's working. And you can do so much more with styling these charts.
Honestly, each time I come to creating a chart, I go back onto the page here and I think which is going to express my data in the clearest manner. And then I hop over into the editor preview, and I effectively copy the settings because he's designed some really beautiful layouts here. Last thing to point out will be that you can apply data as you go along. So let's add something in September, in fact, to really demonstrate that no month is missed. We'll go November, and let's say 300 in November.
So what's it going to do from August through to September? October, they should be empty. And then we should see a high value in November.
Okay, so we SEO no value down here. Now, I'm just going to cheque because sometimes there is a handy option. And you can see there are loads of settings here to say if the value is zero. We got that.
Maybe I'm missing it.
I'm gonna try it in the Y min value.
I might be completely off. I know that in some of the other charts, you can say if the value is empty, replace it with a zero.
No, that's not doing it there. I'm going to have one last look.
No, don't think it's provided. Oh, here we go. That's it. Replace null undefined values with zero.
There we go. The line is now complete. Joining up the months even if they are down to zero. So there you have it. This is a chart plugin that I love.
I thoroughly rate the developer. He's incredibly responsive on the Bobble forums. He's got other great plugins available. This is fantastic value. And honestly, where I go to every single time I need to chart data.