How to Build Charts In Bubble | Bubble.io Beginner Tutorial

hey what's up everyone hope you're doing well welcome back to another tutorial in this video we're going to look at how charts work inside of bubble and how to take data from our database group it together and present it to our users in visually interesting ways so this is a topic that was requested of me by a student of mine inside of a coaching session he was having trouble understanding how charts work inside of bubble so we'll take a look at that here if you do want to sign up for a coaching session with me by the way if you're having trouble with anything inside of your app um i'll leave a link for that inside of the description of this video so let's get into it and the first thing that i want to do is go to my plugins tab here i have two different plugins installed this first one is the chart element plugin that is built and maintained by bubble and this is what we're going to use to chart some very basic data so right now if i go to my database i have a few different data types set up right now from previous videos but what we're going to take a look at is this purchase data type right here the purchase data type has an amount field which is a number and a date field which is a date and if i go into my database and look at all of the different purchases here i've just created some dummy data that we can play around with and and visualize so let's go to the design tab and i'm going to take this line bar chart element where is it it's right here and drag it onto the screen just like this this is the element that comes with the bubble plug-in and the bubble plug-in is really great if you have kind of simple data to visualize it can be a little bit limiting in terms of well just what's available to you and how you want to present this data to your user but if you have a simple kind of a simple display that you're trying to show it can work quite well i'm going to leave my chart type as line for right now and for the type of data i want to display purchase data to my user now let's you know one question that you want to ask yourself obviously when charting out data is what do we actually want to show our user and how do we want to present this data and let's just say for the sake of this example that i want to show how many purchases so the number of purchases that occurred on my app for each day over the past week so if i look back over the past week i want to look at each day count how many purchases occurred on each day all right the type of data that i want to show here then is going to be we're going to go to purchase and the data source is where this can get kind of tricky so we're going to start our expression here by just doing a simple search for purchases in our database we're not going to add any constraints and this is where we have to start thinking about thinking about how we want to group data together and there's a really powerful method that bubble gives us here if i click on more and start typing in group by we can use this method right here to take the purchases that are going to be returned from our search here and to group them together into certain buckets that we can then make calculations on or do whatever we want to do with right now i'd encourage all of you if you do struggle with charts to go read the documentation for grouped by bubbles documentation on this is pretty pretty great and it's definitely worth a read but in our case right here we're looking at purchases and we want to add a new grouping now the field that we want to group by is going to be this date field here typically if you were looking at this example in real life you would probably want to group them together by created date the reason i created this date field was just for this example and this is supposed to simulate the date that the purchase was created obviously i created them like really fast though so i wanted to create a date field just to simulate that but we're going to group things together by date each of these purchases and for the type of grouping we have a few different options here because this is a date field bubble's saying okay do you want a group by an exact date which you rarely want to do do you want to group them together by day or by month in my case if i think if i'm thinking about this example i want to group these purchases together by day each day will have a certain number of purchases that fall into that group now the interval i'm just going to type 1 here because i just want to go one day at a time and for the starting date i said that i wanted to go over the last week so what we'll do is we'll say the current date and time and i want to go back in time seven days so i'll click on more and say plus days and we'll just type a negative number in here so plus negative seven days i'm also going to check this box that says do not skip empty groups because if there were zero purchases on a day on any day in the past seven days i still want to see this here alright so we'll check this box and now bubble's going to ask for an ending date in my case i want to go right up until the current date and time so i'll click here just say current date and time this will be the logic this will be the setup for our group by method so again just to recap what we're doing here we're searching for purchases in the database and we're grouping them together by day so bubble will look at all purchases last last monday and group them together all purchases last tuesday and group them together and that will be each of those groups will be well last monday for example we'll go on the x axis here all of the days will be on the x-axis and how many purchases occurred in each one of those on each one of those days that will be reflected on the y-axis that will actually be the value here okay now moving on we have this other piece that we want to look at here which is aggregation aggregation you can think of it as okay now that we have these groups of data what do we want to look at with each group right an aggregation is how what calculations do we want to make on this group of data that we have so i'm going to click add a new aggregation and the aggregation that i want here one of the most common ones which we're going to use in this example is account and that's simply count how many items fall into that bucket right so if there were 10 purchases on a single day the count would be 10. right so that's what we'll leave right here and now i can close that off and you can see that the type of data automatically changes from purchases to a grouping now so we have groups of data the value expression is what we want each group's value to be like what is the y-axis value going to be and in this case what are we interested in we're interested in this count right here the count of each group that's going to be represented on our chart so for value expression we'll say current points and look at that we have this count right here that i can access and the label expression is going to be what's on the x-axis here so what am i interested in what how do i want to display this to my user well i want to display obviously on the x-axis what day it what the relevant day is for each bucket right each group so we can say current points date and let's just format that date let's just format it as as this actually right here so month day and then year and we'll click on preview and see how that looks let's center this too okay type in the password here whoops and here we go okay so there we go we can see this nice looking chart here right last uh february 28th is whatever when this went seven days ago was so we had one purchase on that date two and so on right a nice simple visualization here so so far so good for this example and again the bubble plugin works really great for simple data plotting like this but if you want to do something a little bit more complex let's say for example that in addition to this week's purchases i wanted to plot another line here that represented last week's purchases to show what the difference between the two weeks is whenever i want to do something like that i'm probably going to need a solution that's going to allow me to do something a little bit more complex like that and there are a few well there are quite a few different chart plugins that that you can use that will allow you to do more complex plotting of data one that we're going to take a look at today is called apex charts js so i've already downloaded this now this is a paid plugin but with all paid plugins you can sample it and subscribe to it and you'll only be charged a prorated amount right so you can also too if you take a look at apex charts js and go to the plugin page here you can also go and take a look at the demo version which is right over here to see what kind of stuff you can do there's lots of cool stuff that you can do with this plugin there's another great one i think it's called chart js that i've used in the past that allows you to do some some complex stuff too but yeah pretty neat stuff right out of right out of the box with this plug-in so what we're going to do i already have this plug-in installed and like i said we're going to chart we're going to use this we're going to use an area chart with multiple lines and in addition to showing this week's purchases we'll chart that against last week's purchases so we'll go back into the editor here go over to the design tab and let's delete this chart right here and what was that called area chart multiple lines here we go let's just drag this onto the page now what's cool about this is we can how this works is we have multiple series of data that we can plot here so for series one name for example let's use we're gonna have two series here one's gonna be this week's purchases the next one's gonna be last week's purchases so we'll say purchases this week as the name for series one and purchases last week it's a name for series two now despite the fact that we're using a different plugin here and the things are set up differently what we just learned about in terms of grouping data together that concept that idea is really what's fundamental when it comes to charts because that's ultimately what you're doing you're taking different pieces of data different bits of data and figuring out how to group them together in and then present them in visually interesting ways right so here using multiple lines for series one we're actually going to do the exact same thing we're going to group things together by date right so we're going to go over the last seven days each day is going to be a single group of data and we're going to count how many items are in each group actually in this case we'll do something different because we already looked at the count aggregation so we'll make this a little bit more interesting but for series one data all i'm going to do if we look at the documentation here it says y-axis data should evaluate to a list of numbers here so we'll look at we'll complete this in a second but first we're going to start out the same just like we did last time we're going to say do a search for purchases from our database i'm not too concerned about constraints here if you needed to add some constraints you can add them here obviously but we're going to search for purchases and then let's take the results of this search and group them together so we'll say group by and the grouping that we want to the field that we want to group by is going to be the date here so look at all of these purchases date and group them together by day we'll set this up just like we did last time the interval will be one day starting date will be seven days ago so current date and time plus negative seven days and we won't skip empty groups ending date will just say his current date and time now for an aggregation instead of doing count which is what we did last time let's do the sum so again what are we doing we're looking at each grouping and watch what happens when i click on sum it's going to say which field do you want to calculate this sum on so in each grouping i want to look at the amount field which again if we go to the database is just a field that i created on this purchase data type go through each purchase in each group and sum up the amount so that we have that's that's the aggregation that we're going to calculate right so let's go back into this expression group by date aggregation 1 is going to be the sum and the field to calculate on is going to be the amount so far so good and then what we want to do here because this plug-in what they want is a list of numbers right so what i'm going to do is we'll say we'll click on more and we'll say each item's sum of amount now each item in this case what is that referring to it's referring to each grouping here so each grouping's sum of basically the sum of each grouping is the list of numbers that we're going to give to this plugin and because if i hover over this you can see it evaluates to a list of numbers which is exactly what this plugin documentation is telling you it wants so we get this nice blue expression here series 2 data we want to make sure that well it says make sure you have the same data points for the y-axis as for the x-axis we'll get to the x-axis in a moment here but this is basically going to be the exact same expression so i'm going to go up here we'll say copy expression paste expression the only thing that's going to be different in this case because this is purchases last week is going to be what it's going to be the starting date here in this grouping so instead of going back seven days we'll go back 14 days and the ending date will be current date and time plus negative seven days so we're just going back a week further into the past we'll still use the exact same aggregation and that looks good for series 2 so we'll plot these two against each other now i'm also going to go down and one thing that's cool about this plugin is it allows you to customize how this data looks so for series for chart one color we'll leave this as blue for chart two because this is going to be last week's so if i'm thinking about this from a user experience user design perspective maybe i want last week's data to be a little bit more grayed out less prominent than this week's data which might be more important in this case so i'll change the chart to color to be a little bit lighter gray and then the last thing that we need to do here is series category so if we click on show documentation we see x-axis data in this case they want a list of texts not a list of numbers you can use the formatted as let's start from the top again in our case really what we're going to do is we're going to copy this expression up here actually let's copy the first one because we're only going back what do we want we want the last seven days that's going to be the x axis right the text for those last seven days so we'll copy this expression i'm going to paste it in the series category here and let's see we're saying search for purchases grouping them by date and what we're going to do instead of saying the sum of date we'll say each items or sorry instead of saying each item's sum of the amount which we'll evaluate to a list of numbers that we were using earlier in our case we're going to say each item's date and we will say each item's date each item formatted as there we go if we format a date like this then that will evaluate to a list of text list of texts plural there we go and because we formatted each date this evaluates to a list of texts which is what this plugin wants so we get a nice blue expression here so let's click on preview and see how that looks and there we go pretty cool we can obviously we might want to change this this green color right here but you can see that we are presenting this data in a pretty interesting way to the user this could be you can imagine situations where it might be useful to see this week's purchases in terms of the amount right each value here is the sum of the amount of this particular grouping and we can chart that against each other okay so anyways i hope you found that useful if you take away one thing from this video just remember that concept of grouping data together because that's really what is fundamental when it comes to talking about charting data and also if you i mean there's apex chart js which is what we've been looking at here in this example there's also chart js i believe there's also a number of different libraries out there if you ever really wanted to if you if neither of these plugins or any of the plugins in the bubble ecosystem did what you wanted to they are pretty complex and you can do quite a bit of stuff with them but there are also different libraries that you can use to build your own plugins too if you wanted a more custom solution so just keep that in mind as well anyways i hope you found that useful thank you so much for watching don't forget to like the video if you did find it useful subscribe to the channel sign up for a coaching session if you need help with your app and i will see you again later bye

Channel: Jacob Gershkovich

Views: 14,590

Keywords: apps without code, bubble.io, bubble.io tutorial, build an app without coding, learn bubble.io, no code app development, bubble chart, bubble.io for beginners, bubble tutorial youtube, nocode, webapps, app development, tutorial, web apps developemnt

Id: azIjYb9Y_tw

Length: 19min 48sec (1188 seconds)

Published: Tue Mar 08 2022