Designing Beautiful Charts in Bubble.io

Transforming Web Development with Bubble.io

Bubble.io has transformed the way we develop web applications, making it more accessible than ever before. Standing charts and data visualizations, just like these, are essential for communicating insights and engaging users. In this tutorial, we'll showcase the Apex charts plugin by Thimo and demonstrate how to captivate your audience with great looking charts.

Introducing the Apex Charts Plugin

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.

Setting Up the App

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. Whoa, that's not where we are. Let's go to that. Oh, I don't know whether that's not working right. There we go, change that to column. Right, let's not get too sidetracked. Refresh that.

Understanding the Data

Okay, so you can see here that I have some date data and some amounts data, which I'm using as a currency. So let's add in the plugin. Search for Apex charts and subscribe.

Exploring the Apex Charts Plugin

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.

Building the Chart

As often is the case, if you're trying to copy what a plugin developer's 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.

Setting Up the Chart Data

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 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.

Formatting the Date

So I do the same search. Now it's important that the search is basically identical but 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.

Previewing the Initial Chart

Let's just go ahead and look and see what that's done already. Okay, so you can see here that June 6th we have 48, that's being shown and then July 3rd 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 6th to July 3rd, then July 4th and have these share the same distance across the X axis.

Improving Data Grouping

So let's use group by in order to express our data in a better way. 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.

Setting Up Date Intervals

Now 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 do a search for purchase, order by date, descending note, 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.

Adding End Date and Aggregation

So I need to provide an end date. My end date is going to be this expression, last item's date. And then, oh, no, no, no, no, no. In my group by, add a new, good mark, new aggregation. And so the aggregation is going to be a sum of amount so that each month, all of the dates are in 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.

Formatting the Date Display

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 M's, 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.

Previewing the Improved Chart

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, so that will be 220, brilliant. And then August will be a sum of those which would be a hundred and thirty, sorry, a hundred and seventy-nine, that's where I was going.

Enhancing Chart Styling

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, 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.

Handling Empty Months

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.

Fixing Empty Values

Okay, so we see no value down here. Now I'm just going to check because sometimes there is a handy option. 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 going to try it in the YMin 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 zero. No, that's not doing it there. I'm going to have one last look. (laughs) No, don't think it's provided. Oh, here we go. That's it. Replace null undefined values with zero. There we go. The time is now complete, joining up the months even if they are down to zero.

Conclusion

So there you have it. This is a chart plugin that I love. I thoroughly rate the developer. He's incredibly responsive on the Bubble 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.