How to create powerful charts in Bubble.io – ratio.dev

Ever wondered why some bubble apps feel instantly professional while others look like they were thrown together in an afternoon? Other than the fact that maybe they work? Here's the thing. It all comes down to data visualization. And today I'm going to show you exactly how to create charts in bubble that don't just display data, but tell a story that view users coming back for more. I'm Dennis Lewis from Ratio.dev and after building more bubble applications than I would care to admit, I can tell you this. The difference between an app users tolerate in an app they can't live without often comes down to how well you present their data. Look, let's face it, most bubble developers treat charts kind of like an afterthought. They'll spend weeks perfecting their workflows and database structure, but when it comes time to show users the data, they slap it into a table and call it a day. But here's what I've discovered. After reviewing hundreds of bumble applications, a well crafted sharp can provide far more insight for your users than any table or repeating group or list of data ever could. And the problem is that most developers don't know which plugins to use, how to set them up, or worse, they choose plugins that completely bog down their page load speeds. Now, you might be thinking, dennis, there are tons of chart plugins out there. What makes your approach different? Well, here's the thing. I've tested them all. I've built apps that crashed under the weight of heavy chart plugins. And I've also built apps where charts load instantly and users can actually say wow when they see their data. At Ratio.dev we've helped founders scale from zero to thousands of users. And I can tell you that the apps with the best user engagement always have one thing in common. They make the complex data feel simple and beautiful. They make things easy to understand. They solve the problem in an easy way for the user to actually visualize. So here's what I'm going to show you today. First, I'm going to show you exactly which plugins you should use, and more importantly, which ones you should avoid like the plague. Then I'm going to walk you through building your first chart in record time. And finally, I'll show you the advanced techniques we use@ratio.dev to create charts that don't just look good, but actually improve your performance. But before we dive into the technical stuff, let me share something that's going to save you hours of headaches. The secret plugin strategy that nobody talks about here's something that'll blow your mind. For almost all of our client apps, I stick with the official Bubble chart plugin. And before you roll your eyes and think that's boring, hear me out. Remember earlier when I talked about apps that crash under heavy plugins? Most bubble developers don't realize that bubble loads the entire structure of every plugin on each and every page, regardless of whether that plugin is even being used on the page. And this means that you must be incredibly cautious about installing heavy, complex plugins into your application. And I once sat down with a customer, they let me into their app and he didn't have one chart plugin installed in his application. 505 I could adjust the colors on this thing better than and I said stop.

You're killing your application this way. Okay, keep it as simple as possible. And here's the beautiful thing about bubble built plugins. They don't behave that way. Bubble doesn't load all of their plugin structures on every page. Load? Why? Go ask bubble. I don't know. It's just you can go in and dig into the javascripts being loaded on your page and you can see it doesn't happen. The bubble plugins don't load on every page, but all the other plugins in the marketplace do. So you want to be really careful. Now be honest with you. The bubble built in chart element does have limitations. It can't handle complicated chart formats, it can't handle multiple data series in the same chart, and it doesn't give you enough ways of personalizing your charts. It's not awesome.

But it is fast and worked for 90% of the opposite out there for what you need to do. But sometimes you need a more powerful alternative. And in those cases I recommend the premium Charts plugin by Chart JS. Yes, it'll cost you $95 once or $14 a month if you're testing it. Yes, big and willow its entire structure on every page. So. So just use that one. But if charts are a big deal for your application, they're central for the user experience. Then probably using this premium chart plugin is going to be worth it. But like I said, 90% of the applications that want to just have 2, 3, 4 charts go with the basic bubble built chart element. But if this is something that your app really needs to shine with, then by all means go with the Chart JS plugin. Think about it this way. If you're building a fitness tracking app, then charts aren't just nice to have, they're going to be the whole point of the app. But if you're building a project management tool where the charts are on one reporting or analysis screen, you could probably get away with the basic chart element. So that's how you make that decision. Now let's jump into Bubble Builder and I'll show you exactly how this works using the. Here you can see the basic bubble built chart element, line, bar chart, all it's got, it's all we needed. And we have a table called engagement logs. Find that table here, engagement log. And in this table we record a row for almost everything the users do on the application. We just write that into this engagement log because our customer needed to be able to know what functions are they using, what processes are they going through, Are they finishing courses, are they finishing lessons? Are they posting to the social feed? So we created a log of all these things called an engagement log. We gave it a type where we created an option set. So share the option set here. So we have an external share, a new post, an active user, a student onboarded, lesson completed. They viewed a lesson, they viewed a module, of course, they viewed a scholarship opportunity, whatever the functionality is. And so we have this data just going into this table. And what they wanted to be able to do was to just see and visually represent how that data was evolving over time. And so go to the page we put this on. And here you can see we created a table down below where we just list out the last, you know, however many rows on the engagement log and they can scroll back through it and just look at the data. And then we put a simple chart at the top. And what we've done is you just install, just put the element on the page. That's super simple. Let's go over VR2.

Chart, grab line, bar chart, drag it on, there it is. You choose the chart type. In this case, line, bar. It can do radar, pie or doughnut. They've added in some new ones here. Anyway, we left it as a line chart, the type of data. So what we're doing here is we're going to group the number of each of these elements per day and we're going to show them as it goes over the. So I have a type here, a dropdown which just chooses the type. I have a button here where they can open up and choose the date range. So from, you know, this date to that date. And here I'm showing the total number over that date range. And then I have my chart. Really simple. And so all I did here was I did A search for engagement logs. Okay. I used to the value here of the dropdown to filter by type the date. I put the range picker that I have in here. It's in time and it's start time. And I ordered these by date, not descending right from the oldest to the first. Okay. And I'm ignoring the empty constraints. So that's my search. Very simple, straightforward bubble search. Then I said group by okay, And I'm grouping this by days by every single day. So I'm not doing. I could do seven days to do it by weeks, I could do it by months, or I could do it by exacts. But anyway, I'm just doing it by dates. And I'm starting here. This is the start date, this is the end date. I'm not skipping any empty ones. So if there's a day that nothing happened, it'll go to zero. And then I add in a. You could have multiple groupings if you wanted, but in this case we're just doing that one group by day and we're counting the number of rows for each of those days. So the aggregation here is a count. Now if this were something that had a value attached to it, you could do so and you could calculate the total for each day. You could have your sales by days. Also really simple to do there. But in this case it's just a simple count. And then I'm going to close that. That is the data source value that we're going to show. So the value is the Y axis is this current point's count. So number there and the label expression is its date formatted as a 17th. That's what I chose that I can pick the color for the series and I can do the scale lines here. And okay. And I could do custom tooltip for the number formattings and stuff like that. I can show the grid. You could do a fair amount of stuff there. And that's it. Now, I did say that if it's longer than a month, then I want to. I changed the data source and I grouped it by months so that I could. Because if you pick a really like a whole year, you don't want to see it day by day. So I just did a condition there to take care of that account. And that's exactly what it shows. Really simple, nice little graph. And it solves problem and doesn't take up too much of your time to get it going. And boom, there's your chart pulling live data from your bubble database. Now here's something else though, that is how to make your charts actually something that users want to share. So here's something I discovered after building charts for different client applications. It's not just enough to show the data, make it show the data correctly. Like we've seen. You want to give them those aha moments that make users want to screenshot and share them with their friends. Don't just show your users their data, show them what it needs. So sometimes we will use AI to take that data and analyze it and come back with some cool responses and we'll put that next to the chart. You can take and combine a chart with hey, this is the best month you've ever had. Something like that. That will make your visually page, that'll make them want to take a screenshot and share it. I could say best month ever. So always start with the big picture and then let them drill down to the details. So don't try to do too much. Try to keep it simple, just the big picture. And then maybe give them a button to go to a secondary chart that gives them a little more detail if they want to dig into it. Performance optimization and here's where a lot of yellow players shoot themselves in the foot. They create these beautiful charts that take 1020 seconds to load. And remember when we talked about plugins, it's got people don't want to wait. Don't rack your brain trying to make the most complex things here. Make them simple. Try to come up with ways to really make it engaging and make it insightful for your users. Go from there and then listen to your users. Ask them what do they need? Is it enough? Do they want more? And give them exactly what's going to make their experience better. Not quite you imagined might be the best way to do it. So with that I would definitely recommend that you go to ratio.dev and sign up for our no Code Resource center if you haven't already. That's where we put all our plugins, we put all of our how to videos, our podcast episodes, great books to read. Just everything's in there. It's totally free, it's updated weekly. Definitely recommend that you do that. If you've enjoyed this video, stick around for the next one. Give us a like and subscribe. If you have questions or you need help building charts into your Google application, feel free to reach out to us@ratio.dev we'd be delighted to help you out. So thanks again for watching. See you in the next one.