Django + Charts.js Tutorial - Learn how to use model data to create beautiful charts.

hello everyone and welcome to my first django tutorial my name is luis moreno and i'm a full stack developer for the last six months i've learned about python django javascript css html and basically all the stuff you need to know to build websites and not just websites but also web applications for the last month and a half i have been developing a sales application with different features such as tracking sales inventory some crm features as well but for this tutorial i want to teach you guys how to use django plus charts js to build a sales dashboard a good looking sales dashboard which you can use for your personal projects however you want i just want you to take the knowledge i gave you today and use it for your own projects now i want to set some expectations before we start what you need to know before you start this tutorial well you need to have basic knowledge of django and this means you should be able to start a project you should be able to start an application and you should feel comfortable navigating through the different folders of a django project and as you know if you're familiar with django uh you you know at a certain point you're gonna have a lot of folders you're gonna have a lot of templates etc right so you should have that basic knowledge i'll refresh some of it but i'm not going to go in depth in that part you should have basic knowledge of bootstrap which is the framework we'll use to create the interface we're going to use bootstrap because it's going to be easier for all of us instead of using regular css we're going to use the bootstrap framework you should have basic knowledge of javascript and jquery and you can use the ide of your preference in my case i'm going to use atom but you can use whatever you want for the objectives of the tutorial well i'm going to refresh some basic django concepts i'll refresh some basic bootstrap components especially how to use divs for columns and rows as well as some card elements that we're going to use to put our charts inside of those cards we're going to learn how to use ajax to perform queries to our database and the data we get from those ajax calls is what we're going to use to create our charts okay we're going to use we're going to create different charts to measure different kpis so by the end of the tutorial we will create two vertical bars one to count how many sales by rep and one for sum of sales by rep then we're going to create a horizontal bar chart to count how many sales per product you have during the month we're going to create two line charts for yearly sales one for count and one for some and finally we're going to create a line chart for new customers gained every month and it's going to be very similar to the sales charts in bullet number three which is going to be a yearly progression uh to understand trends and that kind of stuff so with that being said if you're ready i'm ready so let's get started all right so as i said i'm not going to go through all the basics of django but i do want to show you the documentation for django where it explains how to start a project and the command you need to use to do so which is basically django admin start project and the name of your project for my case i already did all of this so i won't go through that however i'll do i'll i will show you how to start an application which is the one we're going to use to create the dashboard a few things to mention i'm using django 3.1 and python 3.8 for this tutorial as you can see i already have several things created in my project as i said i've been working on this for the past month and a half so i already have a client application which holds all my templates for this interface and also my models and some other stuff i have the product application which holds all product information and i have the sales application that holds all sales related information right now for this one we're going to create a new app which is going to hold all the report information and we're not going to create new models for this one we're just going to use the existing ones and parse through the data so we can graph the information right so the command we use to create a new application as you know is dot pi start app and the name of the application in my case i'm going to call it reportes which is spanish for reports hit the enter button and django will do its magic and create a new folder with you with most of the things you're going to need to work on it however we do need to add a few additional things here first of all we're going to create a new folder called templates which is going to hold another folder called the same way as your application by convention this is the way you work in django right so you're going to have your application templates and inside of the templates a new folder with the same name with the same name as the application and this is the one that's going to hold the html templates right i'm going to create a template right away so we can just get started with this and we're going to call it sales dashboard dot dot html all right good we're also going to need a new python file so we're going to go to new file and this was this is going to be created at the same level as uh report as the report application so we're going to call this one dot pi urls.pi is the file we're gonna use to connect all the urls of the reports application to our django project right we already have views we're not gonna need the rest of it we're going to leave it there but we're not going to need it now another step we need to take is we need to go to a root project folder which is called by the same name of the the one at the top of the parent folder and we need to go to our settings.pi and remember we need to go ahead and find our applications i think i skipped it here it is and we're going to add our new application here which is called reportes and safe right good all right so i think we have all the folders we need to start typing some code okay so i have my setup ready i usually like to open all the files i'm going to need beforehand so you know i feel a little bit more organized you know that when the django project starts becoming more complex you're going to have a lot of files so organization is important so i have the views that pi for the reports folder i have the urls.pi for the reports folder as well or the report application i have the main urls.pi of the parent folder of the project and you'll see why we need that i have the sales dashboard.html and i also have other html files which basically link or will link to the sales dashboard okay so i like to start working on my views now for this project or for this tutorial i'm going to use function based views you can do the exact same thing with the class-based views i think it's just a personal preference they're both as powerful as the other uh this is just the personal preference thing okay so we're gonna call this uh sales dashboard and since it's a function based views it takes in the request um it's going to return render and i usually like to pass the template as a variable right so the template is this this is so the the code is more readable right so report this slash sales dashboard.html right okay so right now it's just going to render a request and the template i hate this thing that and the template okay cool so we can save our views for now you know we're not gonna do anything anything fancy yet now for urls we're gonna do from django dot urls import path and from dot meaning the current directory we're going to import our views okay so we're going to get this we're going to give this app a name called and we're going to create our path for the dashboard so that's going to be sorry the name for this or for the the url for this one is going to be sales dash dashboard this is going to come from views i hate this that this new thing after an update when you when you hit enter it's just gonna add a new word to whatever you already typed so that's just it doesn't make sense i don't like that but anyways sales dashboard there you go we're going to remove the parenthesis and last but not least we're going to give it a name which is sales underscore dashboard for the name i usually like to use underscore you know whatever it doesn't matter oh i'm missing something here i'm missing a forward slash my bad there you go all right so we have our urls done but we need to connect these urls to the main uh project urls right so i'm going to put this one here which i just to give some continuity to the ones i already added so for this one is again it's a path and for this one we're going to use the include function and we're going to include reportes urls and don't forget to put a comma here or else django will complain okay now for the html we're going to extend from the base html and we're just going to put a block here body and we're just going to put a p tag for test and last but not least we're going to add the urls that will connect this to you know wherever we have this so where it is and here it is so first of all this is in the nav bar we're going to say url this one's called reportes and this one is going to be sales dashboard okay and we're going to use this same url for the me for the sorry that was the index like the start page and this is the base one which is which is going to have a nav bar here which is this one right here all right cool so in theory we're done let's go ahead and test so i'm going to open my terminal and we're going to run python and h.pi run server and let's hope we don't get any error messages ah okay so i think i have an issue here [Music] oh my bad i forgot something duh you have to say url patterns oh my god i forgot this totally and this is supposed to go inside all right it should be good now perfect all right so let's test it out okay so this is the start page of my project so right now if i click on reports i should be able to see the test p tag that we added and yep it's right there very small font because i'm using a p tag but whatever okay so this means that all the connections are good and now we can start working on how we want this to look like um and then we're gonna start working on the charts okay for this part of the tutorial we're gonna work on the sales dashboard dot html document basically we're gonna build the interface so if you remember we're gonna build uh we're gonna create six charts right so we're gonna create two columns uh well two rows of three columns actually or no actually we're gonna do it different we're gonna create three rows of two columns each right and in each column we're gonna have cards okay so we're gonna go through the process of creating that so first of all since i'm using bootstrap you have to remember that in order to use bootstrap you if you're using the cdn version right you need to add this link to your document which you get from the bootstrap documentation for this tutorial i'm using bootstrap 4.5 okay cool so first of all we want a row and in this row we're gonna have uh three columns as i said so we're going to create the first one uh we're gonna say remember that the columns i'm sorry we're gonna have two columns so remember that on the html doc you have 12 columns right so if you want to make it a two column row then each column has to be of six uh columns each right so we're gonna say call md for medium six but at the same time we're going to make it call 12 and that's going to happen when this turns into a mobile version now i'm gonna create another div where i'm gonna put a card and the card body okay so we're gonna copy this uh here we're gonna copy this once again and now we're gonna copy this three more times and i think that's it right let's go ahead and test it out on the view okay so we're back on the uh on the on the web application so let's refresh and there you go so we have two columns or three rows and two columns on each side right the charts might be quite big right now so let's do the following okay i'm going to show you one more trick we're going to wrap everything on another column which is going to be call and the tense was not going to take all the space i'm sorry and on the mobile version is going to be called 12 but we're going to add mx auto and what this is going to do is going it's basically like in css when you do margin auto that's the equivalent oh that that's the equivalent but for bootstrap okay so let's copy all of this put it inside of this and let's test it out okay let's refresh and there you go right it's not using the all the screen which i prefer that way and we're going to do one more thing we want to the charts or the cards in this case to have some space in between so we're going to add an inline style okay okay and we're going to say that here style we're going to do margin top and we're going to do this 30 pixels for each of these and let's copy all this and let's just add it to every card probably you could do that this with css right just going to make it this way for now i don't want to go ahead and i'm not a big fan of css to be honest all right so i think good so let's test it out it's refresh perfect right good uh one last thing that we're missing here is we need to create we need to add canvas canvas canvas whatever uh to each card and those canvas is where we're gonna render our reports later right we're gonna do it now um so we can just have that ready and then when we start writing our javascript and all that stuff it should just automatically render the charts so let's type in canvas id this is going to be sales count rep height and width is okay we're gonna copy we're gonna paste we're just gonna change this amount rep okay this is going to be sales per product this is going to be sales year count this is going to be sales year sum and last but not least new customers okay you'll see that uh oh well yeah i did create the canvas because it did specify a width and height but after we're done with this then we should be able to see our charts right here okay cool so i guess we're going to add a title here too and because it looks kind of empty so let's go ahead and do that okay so i guess we're ready to start working on the back end stuff okay so i'll meet you there all right guys so it's time to start coding the back end stuff so we'll go line by line coding uh the whole thing and explaining what's happening all right or what are the things that we're trying to achieve here okay so before we start coding any logic or anything i need to import some data so first of all i'm going to import my sales model which is called from ventas that models import ordin so order means order in spa in english it's spanish for order that's what i'm trying to say uh and basically because the system works as a status as an order based system so the order could have different statuses and uh we'll get to those in a minute so for now let's just leave it like that then i'm going to import daytime because i will need to create a daytime object then we're going to use a very useful module at least in my case i find it very useful from collections import counter okay we're going to create a counter object as well and from django dot http import json response and this json response is what's going to help us uh basically send this data over to the ajax request okay so i think that's all we need to import for now now i'm going to create a daytime object which i'm going to call today and this is equal to daytime date today and basically this if you're familiar with python which you should be this is just going to return today's date right and now i'm also going to bring some data from my model um and this i was talking about the order statuses right so the order can have four different statuses it can be new so is the first couple here can be processed can be paid that can be cancelled for this situation we only care about the paid ones okay because the paid order is actually a sale you already got the money the customer already paid so that's going to count as a sale anything else is not going to count okay it's not going to count as a it's not going to count um all right cool so i think we have all the things we need now we're going to extract the data we need from our model okay now i'm not going to be using the all the uh the all function for getting the model data because you know at a certain point the data might become too large and it's just not going to be very very efficient so instead we're going to apply some filters and we're going to use another function which is built in the for django models which i'm going to show you in a minute so we're going to call this sales model okay and this is going to be equal to order objects that filter okay so what are the filters we're going to use first of all i'm going to use the status filter estalo is status in spanish and i'm going to use the list of tuples i have above okay so i'm going to say that the status should be equal to estados and i'm going to use some indexing here so it's going to be equal to 2 0 well sorry 0. so again you should be familiar with what i'm doing here this shouldn't be weird for you so okay next i'm going to filter by create a date so for the dashboard at least for this chart i'm just going to look at monthly sales okay so to accomplish that i'm going to use i'm going to call the created date field which is called fetch agreeable in spanish and i'm going to use the double underscore uh i don't know how you call it but the double underscore that basically uh allows you to say month right so in this case it's just going to look at the month for created date and now this is going to be equal to today which is the daytime object dot month right and basically now my model is filtered by status equal to paid and create a date equal to the current month okay again you should be familiar with this and if not well i hope you learn a little bit more about filtering now we're going to use a function called values all right let me let me just stop there so what happens if i use the current query set right the current query set in sales models well that's precisely what's going to happen the type of data structure i'm returning from this is a query set object and that's not going to be useful for the charts right for charts we need more primitive types of data like strings or numbers so to do that you use the values list uh function which is basically going to extract a list of the values you specify inside of the function right so for this one i'm going to say creado por so creato por is the um the field that holds the user who created the sale okay however if i just leave it this way if i just put it this way since this is a foreign key in the model this would return the id right for the user so it's going to return an integer we don't want that right so we're going to use some uh double underscore again so this time since this is a foreign key field uh we're going to call it username so now this will return a string of the username who who created the sale right and next we're also going to field filter another field called almas so since this is based off a restaurant so just so it makes sense to you guys is kind of focused for restaurants uh this is total plus tip which is basically the total amount paid by the customer uh and that's the field that we're gonna use for the sum of sales right because is the total paid um okay so what is this going to return well if i print the sales model right now it's going to return a list of tuples and the tuple each tuple will have two items so the first item is going to be the username of whoever created the sale and the second item of the tuple is going to be the total amount paid right so um with that being said we need to clean up our data first so now since i have two values i have in each tuple i have sales person and i have an amount right now i need to extract for now in order to get the count of sales i want to extract just the usernames from my sales model okay and for that we're going to combine two things we're going to combine the counter class and we're going to use list comprehensions which is you know as you know as a python thing right so we're going to call this variable sales count rep and this is equal to a counter object and inside the counter object we're going to say the following rep 0 or rep in sales model okay and just with this line this is the awesome thing with python and the counter class just with this line i already extracted all the uh usernames from the sales model right and that's why you see rep 0 because i'm indexing the first item in the tuples which is the username and uh so that just returns a list with all the users right who have created or who have paid sales for the month now i will wrap that in a counter class and this returns a dictionary where the key is the username and the value is how many times the user appears in the list which that is basically equal to how many paid sales i have as the sales rep for the month and that is precisely what you need to build your first chart remember the first chart is count of sales for the month and that now we have that variable right there the sales count rep which is a counter object a dictionary is precisely what we need for the first chart okay now we're gonna go ahead and code the second the logic for the second one which is sum of sales right so this one we're gonna call sales amount wrap okay now this is going to be equal to an empty dictionary and here's what i'll do next i'll do a for loop for rep in sales count rep okay so for every rep here okay so for the keys in this dictionary sales amount rep the key is going to be the same rep so it's going it's going to share the same keys as the sales count thread okay but the value of each rep for this case is going to be equal to zero okay so i'm initializing a new dictionary with the same sales reps as keys but the values are now zero for each and every rep okay so i have initialized my my dictionary and now i'm gonna do two additional for loops so for every sale in the sales model uh sales model yeah okay actually i'm just gonna change this to sales model here uh i don't wanna i don't want it to be plural there you go i think yeah okay so for every sale in the sales model and for every rep in sales amount rep which is the deck the dictionary we just created right ah here's another one if sale zero so if the username in the tuple is equal to the rep okay to the key in our dictionary yeah so now we're going to do the following sales amount rep plus equal the sale amount okay so let's go over this again for every cell in the model so for every tuple here and for every key in this dictionary that we just created if the username at index 0 for the tuple is equal to the key that we're comparing against then uh oh sorry here we're missing something or there you go should be good now so the value of every rep so the zeros we initialized are going to be plus equal to the amount of every sale created or paired up with that user okay and basically guys at this point we already have the uh two data structures or the two data basically we have the two data structures that we need to pass through our charts okay as simple as that cool okay so we're gonna start coding uh the things we need to actually send that information over a json response so the front end can get that information and render the charts right before we do that i do want to show you guys that all these charts have their documentation in charge that'll charge it in charge.js.org right um you can just google search um i just did it this way charge.js bar chart you go to that documentation guys if you want to customize the chart even more i strongly suggest you come to the to the documentation and read that's how i learned how to use different things um as you can see you create a stacked bar chart you can do a horizontal bar chart etc right so it explains uh how the data structure works okay so this is very very useful and as i said um i strongly suggest you guys come here and read it right especially this side of um the data set we're going to be working with this right now all right so let's move let's go back to the to the editor so since i said that we're going gonna send over uh we're gonna send this information over ajax right the first thing we need to write in i want you to see something most of the time when you do ajax calls um in other tutorials you're going to see them sending or um recommending to build a new view to get this data from for our situation we're going to use the same view we're not going to create a new view to do the ajax stuff we're gonna do it in the same view i find it easier that way and you can have everything in a single view it's gonna be a complex view right it's gonna have a lot of code but everything's gonna be in one place okay so if request dot is ajax so if we have an ajax request what do we want to do all right we're gonna create a variable for the first for the data of the first chart okay and what i mean by that is the following so when you work with uh with charge.js one of the items that you will have to put in the object here is the data right and this is the the the variable we're going to build right now okay we're going to build the data needed basically to build the chart all right so we're going to work on that right now all right so i'm going to call this sales count chart data a pretty long variable but i just want you guys to be clear on what this is okay so one thing we need here first is the labels of our data okay and this is going to be the value for this is going to be we're going to use the list built in function and it's going to be sales count rep dot keys okay so the keys of the dictionary of the first one we created that's going to be the labels of our chart data next we need to build the data set all right then if you want more information on the data sets you can go back to the charge.js documentation have a look after while you you can do that while you can just pause the tutorial and go back right so you can understand what this is a little bit better right so the data sets will have the label for the kpi okay and the label for this kpi is going to be i'm going gonna name it sales by rep count okay next we need the actual data that's gonna be measured in the chart and that's going to be the list i'm not again we're going to do a list again of sales count rep values all right and this is why we needed those dictionaries right because that way uh we can just call the keys and then we can call the values and basically that's exactly what you need to uh build this all right um cool and we're gonna do let's say there we're going to leave it like that right now okay actually now let's go ahead and create a background color all right this is one of the data set properties you can find in the documentation however i want to show you a nifty trick i can put a collar here using the rgba sort of function that you have in css where you pass in the rgb colors and the alpha right and but the problem is that you need a color for each uh bar that you're going to have in this case i have sales for two sales reps so if i just put one color there the problem will be that only one bar is going to have the color and that's not what we want okay we want all the bars to have color now for this case i will give the same color for all the bars in the same chart however i'll give different colors uh to the two charts so one's going to be blue and the other one's going to be purple bars okay but i'm going to show you the trick to basically get this going all right so right here i'm going to create a variable call called color and this variable is going to be a string that's going to say arch rgb a all right so it's just like the stuff you use in in in css you give it a color i already have this color you can just use the same one or use whatever you want and alpha of 0.7 okay cool now i'm going to create an empty list bar color is equal to an empty list okay now i'm going to do a for loop for sale in range land sales count rep okay so i'm using the same dictionary as before right i'm going to do bar caller dot append color okay now i can pass bar color as the value for the background color and you'll see what this does once we uh build the logic for the front end okay cool now we're going to make this a little bit easier for the second chart second chart is also a bar chart and we're just going to change a few things in the logic so it's just easier for us to copy this okay i'm just going to copy this right here and we're just going to change a few things so we're going to say sales amount chart data sales amount wrap dot keys and cells amount rep dot values okay that's it oh i'm sorry i see i see values here should be values right um and another thing i'm going to change is i'm going to give this a different color right so i'm going to create a new variable of color 2. this i'm just going to copy this right here and just change the values okay the values for this one are 121 67 117 i'm going to leave the same 0.7 at the end i'm going to create a new list bar color 2 and 2 lips and i'm going to use the same for loop bar color because both for loops are both uh dictionaries are of the same length so it doesn't matter part color 2 dot append color and this is going to be equal to color too right here all right that's it we have created the data value of our charts it's that simple okay but now to finish this off i'm going to create a data dictionary which is basically what i'm going to send over uh ajax or a json response actually and the first one i'm going to give the same name as the variables here sales count rep value is sales count oh sorry it's sorry it's this one right here so let's count red chart data okay and comma second is sales amount chart data and the value for this one it sells enough charged right now we're going to say return json json responds and our data is equal to the data we just created comma save equal false and that's it guys we have created or we this is all the stuff we need or the data we're going to send over through the ajax call so we can render the charts in the next lecture we're going to go ahead or the next chapter we're going to go ahead and code the front end and finally we're going to see the charts rendered before we code the front-end stuff the javascript stuff i want to show you one thing you're going to need to add to your project to your base html document actually so you can use charts.js and that's basically this script right here which is a cdn and once you have this in your base uh dot html you should be able to use all the functions and all the the stuff related to charge data okay all right guys so we're ready to start working on the front and stuff so um i'm gonna build or i'm gonna type in the code in the html doc you can do this in your static javascript file of your django project as well for now just you know to make it easier i'll do it here but you can do whatever you want right if you're used to working on uh your javascript file the static one that's okay or if you prefer to do it in the same html document that's okay too right it's still going to work all right we're going to start with some jquery we're going to say document ready function right and we want this that when you load this page we're going to run this function called charts but the charts function is not defined yet so let's go ahead and define it so we're going to say function and it's going to be charts parenthesis brackets and let's just do a semicolon here all right um so we're going to say the following uh we're going to do the ajax call all right open parenthesis open brackets and we're gonna do the semicolon right now so we don't forget this part and enter okay so the first thing we want is the url where we're gonna get the data from in this case since i'm getting the uh or i'm going to attempt to get the data from the same view i'm going to say window dot location dot path name and that's basically the current url all right um if you're doing this on the static file you will you will need to type the the path okay um okay and then success if the um if the um sorry if the call is successful then we want to run a function okay and this function is going to take the response and by the way the response is you know whatever data you got from the uh the url and in this case that's going to be the data ticked we passed through the date through the json response okay and we open brackets again and if it's successful we're going to say sales count chart this is going to take in response open parenthesis and what we're going to see here what we're going to pass you remember that we built that data date right and what we want to get from the data date response is the sales count chart data okay if you see i'm passing this as an argument of a function called sales count chart by the way the this function doesn't exist yet so we still need to create it all right um comma and the second one is cells some chart which takes something similar to the first one it's going to take a similar argument but it's going to take the other one which is sales sum chart data okay and we're going to do this here and i'm not sure what to put a comma there but there you go so what does this mean it means that when you load the page it's gonna run the charts function and the charts function is going to run an ajax call which is going to look for the data for the response in this in the current url the current view if it's successful it's going to run the function it's going to take that response as a as an argument and is going to run two functions the sales count chart which takes the response uh sales count chart data as an argument and the sales sum chart which is going to take the response sell sum chart data that we created in the back end in the last chapter right um okay cool so we're good so far except that we well these functions don't exist yet right so we're going to have to write these down so we're going to say function sales count chart is over here this is a function so parenthesis it's going to take the data as a parameter and the data it's right here and we open brackets semicolon don't forget that actually don't need it for this one but whatever let's just take it off right the stuff i'm going to write right now is for charge.js okay uh so you can find this in their documentation right basically this is how to build a bar chart with charge cs so i'm going to say var ctx again this is all coming from the documentation in charge js we're going to say document dot get element by id this is javascript right we're gonna call and what what we're gonna get here is our first canvas right here sales count rep which is we're going to place our first chart okay okay good we create that var that variable now we say var bar chart 1 is equal to new chart and the new chart will take in the ctx variable and some other stuff so we're going to open brackets here we're going to do a semicolon and we're going to start typing the things we need to build our chart so the type of chart we're going to build for this one is bar this is going to create a vertical bar chart data the date the value for this is going to be the data all right so that's going to be the argument we passed um here okay so that's the logic we built in the back end we're going to add some options here okay we're going to say that uh we're going to open brackets and we're going to see scales and we're going to open some new brackets here too we're going to say y axis and we're gonna open some more brackets and we're gonna say takes and new brackets there's a lot of brackets you know javascript is like that so don't judge me don't judge me judge javascript begin at zero true okay so this is just gonna basically make sure that the data for the y-axis starts at zero which i think it makes it look better we're gonna add a comma here or we're gonna add a new option and we're going to add a title to our chart the open brackets we're going to say display true the text of our title is going to be sales count month okay and we're gonna set a font size of 20 pixels for the title okay that's it guys here we have built our first bar chart okay building the second one should be very easy because just like we did before in the back end logic you can just copy this paste it again and we're just going to replace a few things so this is some chart this is going to take cells amount rep as the element id for ctx right it's always a bar data is going to be the same since we're passing it here and this is going to say cells sum okay cool now that's it all right now the last thing i'm going to do and this is optional guys i'm going to do this because i want my charts to be updated automatically after a certain amount of time so i want this h ajax request to be performed every let's say every 30 seconds for now okay so i'm gonna go back to my first function the charts function okay and i'm gonna add one more thing to the ajax call once the ajax call is completed we're going to run a new function this one doesn't take in any parameters we open brackets and we say set time out okay and we're going to set a timeout on the charts function and it's going to do this every 30 000 milliseconds which is basically 30 seconds and there you go basically we have constructed the code necessary to render our charts in our project so now that we're done typing in the front-end stuff let's go ahead and run the server let's hope we don't get any errors here there you go and let's have a look okay so i'm in my project now let's go to reports and voila as you can see the reports have been rendered you'll you'll notice that i changed the size at least the height of the charts a little bit um but you know this is a personal preference thing uh i'll probably do the same thing for the rest of them but you can see that luigi cfh has 113 and then you see 2942 with 85 and etc you can format this to show um currency i'm not going to go through that right now but another thing i want to show you is if we give this a few seconds you'll see that since we created the settimeout function over the charts this data should automatically refresh after 30 seconds okay and the way we're gonna notice that is there you go since the charts have an animation every time they're created or rendered that's how you know the data is being refreshed every 30 seconds okay so i'm not going to code the rest of the charts in this video if you guys want to see the full thing uh please leave a like subscribe if you think this was useful for you i'll try to start posting new videos uh every week i hope uh with different tutorials of things i'm learning myself that i think might be useful for you if you're in that learning path of django coding whatever right uh so please leave a like leave a comment subscribe to my channel if you want to see more videos like this and if you want to see part two please leave it in the comments and i'll go ahead and basically show you the entire thing i know i said at the beginning we're going to build six charts um but at the same time i want to see if if people want to see this type of content right so um i hope you do and if you do i'll build the entire thing and i'll show you how to code all the charts and we can all learn together okay so have a good one i hope you enjoyed it and bye-bye

Channel: Luis Moreno

Views: 6,313

Rating: 5 out of 5

Keywords: #python #django #fullstackdevelopers #javascript

Id: yXBnAuRipE0

Length: 60min 31sec (3631 seconds)

Published: Tue Dec 29 2020