Django + Chart.js // Learn to intergrate Chart.js with Django

often times you need to display data in a graphic level that is you need to put it into a chart so to do this we are going to be using something called chart J s this is a JavaScript library that allows you to do exactly that it takes in some data and it displays it in a more interactive way than just the raw data itself now there's a lot of different ways you can go about using chart j s so we're going to let you experiment with the documentation for the most part when it comes to displaying your data but to get us to display data especially inside of our Django projects we need to see how that actually is set up so we're going to be using Django and charge a s to get this one started [Music] so what I'm going to assume is you've already done some Django stuff that is you've gone on our YouTube channel and you've gone through at least the try Django series you don't have to go through all of these series but at least you go through one of them and have a pretty good understanding of Django before you jump into this if you don't well you might get really lost this is also available on our website that is cream for entrance comm such projects or simply join CFE comm slash projects that will also bring you right into this website where we have all of our triangles up there as well as this video and then finally what we're going to be doing is we're going to be using bootstrap now I've already set up a bootstrap and a bunch of other things on this project in particular because this set of process we don't really need to go through especially if you've gone through try Django series the specific stuff to chart j/s we will absolutely go through but if you want to get where we are right now go to our github which is where our code will be for all of this and it's github.com slash coding punch burners flash django chart touch AAS and you'll see this base project set up if you click on that that will actually take you to the code that we're starting with which is what we're going to do in just a moment so now what I want to do is actually setup Django to work with charge a s that is I'm gonna do Django first to have the data from Django so then we can work in charge a s to use that data so to do this let's go ahead and take a look at the base Django project itself there's not a whole lot going on here I do recommend that you explore it a little bit but we do have something called based on a s which shows us that we have jQuery in there as well as bootstrap Dom in jQuery is not required for charge a s so you actually can use it in JavaScript sort of projects but in this case we do have jQuery because bootstrap requires on it and then CSS also bootstrap related stuff as far as the base file itself hopefully you are already very familiar with this so we're not going to really go through that a whole lot we already have a view set up a home view that is going to render out our chart or our charts HTML file which if we look at that content itself is just hello world at this point so that's really where we're going to be working in now in order for this to work we have to create a view that's going to give us our data now this view can be done whether it's in Django itself or it can also be done in side of using something like the Django rest framework so let's go ahead and first off create our first view that's actually going to give us some data and I'm going to use a function based view you can obviously reformat it to a class-based view just like this but I'm going to go ahead and just say get data and we're going to take in the request and I'll just do args and keyword ours we probably don't need those even but then we're going to return some sort of data and normally you return what's called an HTTP response that's what this does but what we want to do is to return a JSON response and to do to actually return a JSON response there's old ways of doing it and then the modern way of doing it which is from django to http import JSON response now again this is not the only way you can do it but it's a shortcut to actually returning JSON data JSON data is the JavaScript object notation that's what it stands for that's what JSON stands for and that's what we can actually use inside of JavaScript so our jQuery can actually call a URL that returns back some JavaScript and then we can use that JavaScript so let's just go ahead and say data equals to some dictionary here so I'm going to give the dictionary of let's say for instance sales and I'll just say a hundred and then we'll just say customers equals to 10 okay so some basic very very basic data and inside of that response I'm just going to return that so notice it's returning just a dictionary it's not much different than what's going on here except JSON response is is a response object itself so it actually is an HTTP response but with the data type of JSON so let's go ahead and take a look at this I'm gonna write this URL into my URLs itself so let's go ahead and import it and then I'm going to just grab this here and I'll just say API data now the reason I'm saying API is because more than likely this will be an API endpoint and then I'll use my function base for you here I'll just do API data so when I say more than likely it'll be an API endpoint meaning you'll likely use the Django rest framework for this which is something we'll show you in just a moment but you'll likely use that versus Django built hard-coded Django itself you'll so your endpoint will look like an API data so let's go ahead and go to this endpoint and I'm going to run the local server and I'll go to that endpoint let's make sure our servers running Python managed up to I run server refresh and here some data ok so since I've got this data this is actually in JSON format so that means that on my home page I can run through some of this data or pretty much any page that I that I want that I can grab that data so the end point was if your members of our in point equals to and it's API data so the reason I'm hard coding this is because if I ever wanted to pull out the jQuery or JavaScript stuff I could versus doing the Django stuff which would be URL and then the URL name so you could do it either way but I'm going to be leaving it in hard-coded so again that I don't have to have the JavaScript itself right inside of the HTML that's sort of a practice that you want to get used to doing instead of hard-coding or having the URLs come out themselves if you do want to have the URLs I would recommend putting them on something like URL - endpoint and then putting it into a actual div tag that the jQuery or the JavaScript we would actually run off of so that's just something to think about when it comes to designing this stuff but now that we've got an endpoint let's go ahead and use jQuery to get the the actual data so we're using Ajax here and we'll do method equals to get in our case we aren't doing a post method we're just getting data here and then the URL is going to be equal to that endpoint and then we'll say success I don't need to pass in any data at all I'm going to run in a function here and we'll say data and I'll just do console log data and then if we have any errors I'll go ahead and log those as well and we'll just call this error data and I'll console log error okay so now we've got this Ajax call this should actually work if i refresh on its home page and look into the console so we're going to inspect in the console I see that it says object and notice that I have this object stuff here so this means that I can actually work with this data so if I did console log customers and customers would be 10 so to cut data way to be actually sorry data customers and let's go ahead and times it by a hundred or let's say time to buy some weird number there 234 refresh in here it gives me that math okay so this is because of our view here right this is actually returning that response inside of JSON data now if I had it inside of this context here so if I said customers and ten right if I did something like that where it's actually being rendered from Gengo versus using an endpoint I've come in charts and instead of using the Ajax call I would say bar data equals to the context I have to put it into a string okay so now that I put it into a string I can console.log let Skelton's which is call those customers on a django and we'll console.log customers django will save that refresh in here notice it says 10 but that's actually a string so to turn that into an integer integer we'll do parse int which is built-in to jQuery and we do parse int and that gives us an actual number that now we can do parse int times 234 or whatever we want to call it and refresh and now that actually works so this is doing a very similar thing but the nice part of having an endpoint or an API is that you're starting to think of your data differently right it's detaching where you're getting the data from where the data is being rendered so this is a method that you want to go about doing it okay so the now that we've got how to do the data using built in Django let's do it using the Django rest framework really simply and I'm going to just search Django rest framework and I click on that we're going to go to API guide and views and we're going to just be using this generic API view so I'll do some of these imports here and then I'm going to go ahead and use the class-based view that it's already in there notice I did not take all of the imports the authentication classes I'm going to just keep as an empty list permission classes also as an empty list and I'll go ahead and get rid of some of these comments and I'll get rid of this one and I'll call this chart data and notice it is a class-based view so I'm gonna go ahead and copy this I'm gonna bring it into my URLs and now I'm going to go ahead and make another endpoint and call it chart slash data and we use chart data as a view and I'm not really going to worry about the URL name here so I've got a new view for this chart data in my settings I might need to actually add in rest framework make sure that's working and then let's go ahead and look at that end point which was API chart data and oops we need to actually run that method let's try that again and we got users not find oops so that's because of our views so let's use that same data that we had inside of here and I'll just call it data and I'll tab this in response goes to data refresh in here and here's the rest framework this actually has that same data so these two methods are the same the biggest difference here is what you might notice is the authentication classes and permission classes that is where you'd want to use rest the rest framework all the time because this has a lot of built-in features to it that make actually getting the data based off of some authentication or permission now we're not going to go into the rest framework here we definitely cover it in the blog API project so if you want to know more about the rest framework that's where you would go about doing it we do have a lot more in it than your stat so check out our website for that for more but basically here these three things are more or less giving us the same customer data right but all three of them have a different way to go about going doing it so which one's the best and which way are you going to want to go for this right here you're going to want to use the rest framework API view all the time when it comes to actually rendering this out now of course you can get into a lot more complicated stuff and the main thing to think about here is you can also have a better way of showing this data in particular that is you can use query sets and render the data that way so let's say for instance I went from Django Kampf dot you sorry not Django contrib off import get user model and we'll say user equals to get user model I'm just going to show a basic query set here and instead of on this chart data I will say users and its get user to objects that all got count this will actually give me a integer this right here gives me an integer so now we would be able to see that so jumping back into there I see that I have one user so this is this obviously this data is based off of actual database information instead of hard-coded information here so now we actually have a way to get that chart data so going back in here I'm going to just change my endpoint to chart data which is the same as what we put here right so that URL is the same I'm going to go ahead and get rid of the past data from Django itself for the Django View and we'll go back into that home view refresh in there and now we've got you know the users we've got all that JSON data actually coming through okay cool so now that we've got this data it's time to actually work with chart dot J s so let's go ahead and jump in to the documentation for charge charges org is where you're going to find it we're gonna click on getting started and this is going to take it here that's not what I wanted actually so let's go back into the documentation and we will click there's a few different options on how we can go about actually integrating this into our project what I'm going to be doing is using the CDN version now CDN versions mean content delivery network which is what we're already doing with some of our other stuff so if I click on this I'm just going to go ahead and do chart dot Minjae s if you want the onion you can actually take a look at that so you can actually read the code that's in there versus the minified version you cannot read the code or at least it's a lot harder to read the code it's not made for humans it's actually made for computers so it loads a little sir so I went ahead and copied that and I went script source and I'm just going to add this into my script right so into all my java scripts I have all this stuff so a CDN version just loads faster as we see bootstrap we've already done that as well as jQuery so when you use a CDN and you go to any site that is loading that same file then when you go to your site and you're loading that file it loads just a little bit faster which is nice it makes things go better so now what we're going to do is actually run through the usage of this actual chart so if we scroll down on the docks down to just creating a chart we can see some of the examples that they have built in and since we already have our data we can actually work off of our data set that we have but I'm going to go ahead and copy their code first so let's go and copy this and let's bring it into charts HTML and inside of our main content here I'm going to just paste it in and I'm just going to paste in all of that stuff with the exception of the script I'm going to go ahead and cut that out for a moment and I'm going to paste this inside of our block jQuery get rid of this script tag as well as the top one and then we'll tab this back okay so it is in side of a jquery call it doesn't need to be but it is so we're going to go ahead and save that and let's go ahead and look at our home page now if i refresh in here there we go we've got a page an actual chart that is rendered out for us so if I change the size of the browser I can actually see the chart and the data that's related to it so what I all I need to do now is actually change the data set so the data is right here right so that's actually an array or a list in terms of Python a call list in JavaScript it's called an array that has items in it right so we want to change those items to something in here so it's something inside of this Ajax call that is where we actually want to update our data so let's go ahead and say var default data equals to just an empty array so I'm going to take that in puree and I'm going to place it down here and data will save that I'll refresh in here notice all the data goes away okay so this I also have labels so I'm going to go ahead and copy this and say var labels equals to those labels okay so these two items are the ones that we actually want to get from our view so I'm going to go ahead and copy these and go back into my view and I'll just say labels equals to that list the same thing so labels labels and then we're going to say the data or whatever the data is are related to those labels so let's go and put labels here I'm going to keep this also as an empty list and then we'll do labels equals to data labels and then let's say default to data equals to data a dot default data and I'll just call it default so data of course is the response so this is really the swamp data here so that's just something to keep in mind so I'll go ahead and now also put in default as an argument to our view so default being well we want to be an array as well or a list as well so we'll say default items equals two and what I'm going to do is actually say users first and then I'll put that same query set count so cut this out and Duke us count equals to that or user count rather and then I'll just use some arbitrary numbers for this other stuff and of course I'm the labels are matching up like the number of labels are the same as the number of data items or default items default items going to get rid of that data we save it go back into our charts and now we've got our default data and this is where our chart is so we're going to go ahead and save that let's go ahead and refresh in here we actually don't have anything coming through so it's not showing us the data so it's not actually giving us what the chart should actually be so I need to render this charge and load it based off of the new data so let's go ahead and do that we're going to move all of this data up so I'm going to go ahead and cut well let's actually think about the things that we can cut so the background colors and the border colors I don't necessarily need those like you can change them if you'd like but I'm not going to have them instead what I'm going to do is I'm just going to take the data sets and the context and I put it inside of this success call so we'll tab this over and we're going to close off the data set close out the data and then close off the context so that's going to be our new chart and this other stuff I'm going to go ahead and just comment those out so here's my very basic data labels data labeled number of votes whatever that means we don't need to worry about that refresh in here and now we've got a little bit of an error so let's go ahead and take a look at what the error is looks like actually calling this is not correct so this closes off that data this closes off the context that's being passed and I need a parenthesis here there we go save that refresh and there is our new data okay so notice how this data is actually coming through so this one it says thousands of votes right users there's literally one so it shows us one vote and all that so let's actually change that data inside of our views let's change it to not just smaller numbers in general so we save that refresh and now our data is a little bit more manageable as far as how it looks the colors went away because we got rid of them inside of that call but that is it that's essentially how you will go about getting the data and then setting the data you can set it in this success call or what you could do is actually make a function so we'll just say function set chart and inside of here I'm just going to cut that stuff back out and that function of set chart would be called on the success call because we're setting that default data there and then it's being used down there so now we refresh in here it's filled the same stuff so then and here you can actually go back and bring back all of this stuff so let's go ahead and do that I'm just going to actually I'll just copy that whole thing and cut it out actually and paste it inside of this function and uncomment it out save that and we refresh in here and there now our colors are back and it's looking a little bit better so as far as changing how this chart works you can come in and just like kind of click on the different ones so we've got type line so let's change this to a line and we've got type here let's just call it line go refresh in here and now it's a line chart all right let's go ahead and look at the next one of course there's a lot more customization to this but we've already done bar let's say polar area chart something like this I'm going to go ahead and just change the type to polar area and there's the type right here polar area save that and let's look at that example there we go all right so you can actually play around with these charts quite a bit so the other part of this is if you wanted multiple charts right so to do this you would basically pick the document or where you want to put it right so by default we have this canvas of my chart right here if I paste that and we'll just say my chart number two I could go about doing that by saying my context here chart number two and then I context or CTX for chart right there I'm going to go ahead and copy this and have one of them being chart two and this is going to be a bar we save that refresh and if I scroll below it I see that the same data is being to played two times so let's go ahead and make this just a little bit better on as far as seeing so do div class equals column small six and there we go close that off save it refresh in here and now we've got our charts back to back next to each other that's showing how this is working and it's also responsive so it's actually changing with bootstrap which is which is really cool so that's really useful as far as showing this data and playing around with it in a way that you know might work for your project so if you have any questions on what we did here let us know what I do encourage you with charts a chart jeaious itself is to just play around with it I mean all of these different options it will it shows you the different options that you can really just kind of adjust and that's how you'll kind of pick it up there's definitely a lot to cover here so if you want to know more about chart j/s please let us know enjoin CFE comm slash suggest please add it in a vote there if you really want to know more about charges but I think they have so many examples on here that it's fairly straightforward on getting all of these different things going and the two sort of things that I would focus on are the labels and then the data so the table that would be a correlated to any given label so something that could be a little bit more advanced would be like month month by month and then also like how the sales were for those months or the viewership or whatever so that's another thing to kind of think about when it comes to actually creating this data in particular I know it's a little bit of a longer one but we actually covered a ton of information so hopefully you guys like this if you did please consider subscribing on youtube that's join CFE comm slash youtube and also join us on just join CFE comm and that covers a lot more stuff that we like to teach you so you can get into action right away and launch those project thanks again for watching and I hope to see you in next one

Channel: CodingEntrepreneurs

Views: 196,983

Rating: 4.9150105 out of 5

Keywords: djangourlshortcfe2017, django url shortener, django 1.10 tutorial, django tutorial, install django on mac, install django with pip, install django with virtualenv, virtualenv, python django, Django Web Framework (Software), Mac OS (Operating System), Python (Software), web application development, learn django, installing django on mac, pip, python package, django, kickstarter funded, beginners tutorial, trydjango2016, django 1.10, django charts, chart.js

Id: B4Vmm3yZPgc

Length: 26min 44sec (1604 seconds)

Published: Thu Mar 02 2017