Django Data Visualization Application with Chart.js

hello everyone this is kane bruni from camera tech today's tutorial we are going to build this interface using jungle and chat js so basically this is going to help us visualize data as far as building more or less a dashboard is concerned so what i have over here is some data that has already been inputted into the web application i can add more data over here because i can add the name of the country and the population over here so right at the back of this i can add to go now by mind we don't have to go listed in here and the population of togo is approximately 8 million people so when i click on add to go has been added over here we can do same for russia so i type in russia for the name of the country the population of russia is approximately 144 million people but when i click on add you see that we have russia listed over here so in order to get started you need to have jungle and python installed on your system now if i have other videos i'll link up in the description below on how to download and install python to install jungle you need to run in inside your terminal i'm using vs code over here you need to run pip install and you type in jungle and when i press on enter i already have django installed so it's definitely going to tell me i have met all the requirements so as you can see requirements already satisfied as far as the jungle installation is concerned so now i'm going to create a jungle project i'll type in jungle admin stat project and i'll give it a name so i'll say the data visual that's the name of the project i'm going to have and then also bear in mind i'm creating everything on my desktop so what i'm going to do here is i'm going to click on file and click on open folder and go into my desktop and here i have data visual pulled over here so i'll click on it and select folder and this will open up in vs code all right so in order to get started i'm going to open up the terminal we are going to create an app so in order to create an app you are going to say python manager.pi starts up and we give it a name and in this case we are going to call it dashboard so dashboard is going to be the name of the app now pay attention to the side wireless for beginners you're going to see that the app folder is going to be created so when i press enter we are going to see the dashboard fitted over here and one of the first things you would want to do is to come into the widgets folder which is the database i'll go to settings.pi and go and register the application or the app i'll come in here and inside installed apps or type in dashboard dot apps dot then capital dashboard config and config is also capital all right so this is going to register application into the project then also let's go to urls.pi and right here i'm going to import include and i'm going to say path and this is going to be a base path so we are going to leave it empty and i'll say include and what do i want to include i want to include the dashboard urls as far as the routing is concerned so i'll put in dashboard dots urls we don't have that created yet but then we are going to do that very soon then i'll put in a trillion comma over here so when i come into the dashboard application i'm just going to create a urls.pi so this is going to handle the internal routing over here for me then also i'd want to have my template folder because jungle as far as architecture is concerned deals with model views and templates so in order to get my template folder i'll click um outside normally this i prefer to do things i'll click outside the base or the root directory and i'll create a folder for these templates i have templates over here then i need to inform my jungle project that yes i have a folder i want to link up so normally this is what i do i come here and come and copy this so this is going to help me without the link so i'm going to paste it here and i'm going to change this to templates at least template is the name of the folder i have over here so by doing this then i have informed jungle that yes i have a template folder over here and that's where i'm going to put all my templates files there so the next thing i'm going to do is to obviously create some templates so to work my way around it this is how i normally prefer doing things in more or less an organized structure so i'll click on the template folder and create another folder i'm going to call partials i'm going to put all my partial files in there so inside partials i'm going to have base.html then i'm also going to have another i'm going to call nav.html alright then i'll click on the templates so that i get out of the partials so i'm going to click on the template folder and inside it i'm going to have another folder and i'm going to name this folder dashboard okay so dashboard is actually going to be like the app folder okay so i'm gonna have all the templates i want to render in this app in this particular dashboard folder and what i want to have here is index.html all right so with this done i can now start linking things up but before i do anything let's try and work things out so in order to get started i think i would need to go to getbootstrap.com because we use bootstrap now styling so i'll come in here i'll leave the link in the description below i'll click on all releases and at the time of this recording the newest version is version five however it is at a beta stage so um it is not too stable so you definitely have to more or less downgrade a little but then almost everything you need will be found in the version 4.6 so i'll come down here and grab the starter template so i'll copy this and when i come here into my base dot html i'll paste it here now this base does html is going to handle everything it is going to be the base or i entire projects and as far as a title go i'm going to put out some block over here so i'll call this block block title and i'll end it's over here so i'll do end look then inside here i am going to include my nav dot html so i'll say include and the nav.html that my structure is inside the partials folder so what i need to do is i need to bring in partials then forward slash i'll do now dot html so outside this i'm going to call the container class the bootstrap container class then inside the container that is where i'm going to have my block contents for the index page so i'm going to say block content then i'll end block over here so i'll save this and what i need to do to get my nav is to actually come here inside bootstrap go to i think components inside components i need to come to navbar so this is number and i have a template to buy so i'll copy this [Music] and i'll paste it here then i think in order to see things properly as you can see the background over here is light so i don't want it light i want it dark instead so i'm going to change this to dark and change the background to dark as well all right so this is sorted out then what i need to do is i need to extend this so inside index.acm i'm going to say extends and this will extend from partials or slash base.html so by doing this we've actually extended every bit of code over here and here as well into index.html then i'm also going to put out um a blog title and i'll see dashboard and now anything's up over here so i have end block then finally my block contents can come in here then i'll say and look alright so i'm done with my templates now what i want to do is to go into my views and start putting out some logic over here so i'm going to have um i'm going to use function based view so i'm going to say index and index is going to take in a request and this request is going to return render and are passing a request over here the first parameter and the name of the template the name of the template is going to be found in dashboard for slash index dot html now this dashboard is essentially the name of the subfolder within templates and we are grabbing index.html then what i want to do is i also want to pass in a context i'm going to work on later so i'll open the context dictionary app and i'm going to pass it over here so now that we have this we need to um provide some routing for it so what i'm going to do is i'm going to come into the apps or the dashboard url i'm going to say from jungle.urls onto import path then i'm also going to import the view over here so i'm going to say from the current folder i'm going to import views then what i can do is i can do url patterns and there's going to be a list so i can have path and my first part is going to be the root path and i'm going to call the view dot index then i'm also going to give it a name over here for the routing so as far as the name is concerned i'll give it dashboard index and i think this is just about it so i'm going to open things up over here and run the application so i'll type in python manage dot spy run server all right so i'm going to click on control and click on the link all right so we don't have any problems um everything is running perfectly but i move on to other important things now what i want to do is i want to come into the um the nav bar over here and do some changes so as you can see with the final um this is what you are working on and i'm running it on the default spots 8000 this is what is already worked on this is running on pots um 8001 as you can see over here so there are two different applications running as you can see i have led the rest of the items over here and i'm putting this in some kind of a container so that's as i show you what i want to achieve over here so what i'm going to do is i'm going to bring out the container class over here and i'll just clear this and wrap it up over here so when i save this and come back and come and refresh is what i want now the next thing i'm going to do is i'm going to clear everything over here and it just as simple so i'm just going to grab everything and i think yeah all right so i think i'm done clearing what i need to clear so when i save this and come back yeah i think i need to clear the link as well and i got rid of the uo tag so let me bring it here all right so i think this is just about it as far as clearing this content now the next thing i need to do is to work out on how to include a chat js now before i do that there are some few things happening over here and that's the partition i have over here now as you can see i have this area and what is left over here and i'm gonna the rule and inside this rule i'm going to have a call and md4 and inside call md4 i'm going to have order the border is gonna have a padding of three all around it's four corners then i'm gonna have an h4 tag and i'm going to say add data then i'm going to put out a horizontal rule over here then my form is going to come in here so i'm going to have a form and i'm going to clear this and say the method will be equal to post then i'll pass in a form as far as the design is concerned and finally i'm going to have a button over here so if i save this and i'm back here this is what i have but then this is so stuck to the top so i need to give it some kind of margin over here so i'll give it a margin top of three and let's say a padding top of three so when i refresh okay i have what i have then finally i'm going to give it a shadow too so i can put out the bootstrap shadow class over here and when i refresh yeah it is almost as i have it over here now the next thing i'm going to do is i'm going to pull out the graph over here and in order to do so you are going to go to the chats.js website so here we are and there are some documentations over here and it will do us a lot of good to read them but then we are quickly going to jump in and we're going to click on this button get started so the installation process is what we have over here there are a couple of ways we can install it but then we are going to use the chargers cdn so i'm going to click on this link and it's going to lead us over here so there are some few things over here but then what we need is the charges or the chat.main.js so this is a minified version and i'm going to click on this and copy the html so i have it copied now i'm going to go into my index.html sorry mybase.html actually and i'm going to put the cdn over here i'm going to put a comment and i'll say chats charges cdn all right then i'll paste it as we have it over here so there's a first step now the next step is to come back over here and we can have this um starter templates so what i'm going to do is i'm going to grab everything over here so i'm dragging along everything so i'll copy from the beginning of the canva html tag over here i copy that script and everything in there so i'll do a copy over here and i'll go into my index.html now within my index.html this is one side of my block what i'm going to do is i'm going to have another or an md8 to have the other side and it is in here that i'm going to paste [Music] my charts so what i have is actually going to reflect so when i come back and come and refresh now you have this chats over here now it kind of looks um too long so there are some few things we can do we can come in here and perhaps maybe change the height okay we can change the height to about 300 and when i save come back to come and refresh all right i think the height is as good as we may want it okay so now that we have this now bear in mind um we kind of have some data but then this is static data this is what has been provided over here so we have the labels um as being the colors and the data is what is being displayed over here and that's actually what has been shown over here now we want to add our own data and make this responsive and dynamic so in order to do so we definitely have to create our models so that's you can save something in our database and right over here i'm going to say class and i'll say country data and you are going to inherit from models dots model so the first attribute you're going to have is the name of the country so i'm going to say country and this is going to be models and a chat field or a character field and i'm going to specify a max length over here and for max length we are seeing 100 characters now what i want next is the population so for population is going to be models that's and i'll say integer field and we're going to leave it blank over here then what i want to have is a strange representation of everything we've done over here so i'm going to say def double underscore str double underscore and a passing solve so this is going to return and i'm going to use a formatted string over here so the first thing i'm going to put out is i'm going to say solve dot country and i'll put in a dash and also passing self.population all right so i have this strange representation now we can proceed to [Music] migrate our model so i'm going to open a new terminal and i'm going to say python manage dot spy make sorry make migrations so i'll hit on enter and it says create model country data yes that's essentially what you want so you can do python manage dot spy then i'm going to say migrates so now we have everything migrated over here now the next thing we need to do is to create a super user so i'm going to say python manage dot spy grids super user and when i click on enter the name i'm going to use is admin and the email address is going to be admin at gmail.com and the password i'm typing in a password but for obvious reasons you're not going to see i'll type it again and it says the password is too short there but then for this purpose we are going to accept this so we have a model in here what i need to do is to go to inside the dashboard up folder coming into admin and register model so that you can see it on administration panel so what i'm going to do is i'm going to say from the current models i want to import and the model i just created those country data so i'm going to say admin.site dots register and what do i want to register i want to register this entry data model so i'll save this and when i come back and i'll go to forward slash admin i cannot log in as an admin and so this is what i have over here now as you can see we have um this showing up over here country datas okay it doesn't look too pleasant for my liking and that's by default how jungle is going to present um it to us but then we can change it ourselves so what we can do is i can specify um a class meta and i'm going to say verbose underscore name underscore plural and here i can specify any name i want so i'll say country population data now when i save this and come back over here i have country population data over here now what i always want to do to be on a safer side is to come back and come and migrate so that the changes are taken care of as you can see this has been migrated and if i come to my grades it says everything is now okay right so when i refresh everything is cool now when i click on this i can start adding in data over here so the first country i'm going to say is ghana my home country and our population is about 30 million people i'll click on save then i'm also going to type in the united kingdom colonial masters and their population is around 66 million then the usa the population is around 328 million i guess then i would want to add in a very good nigerian neighbors and we have an approximation of 201 million all right so this is what we have so far when we come here this is the data we just inputted now this data is not showing up over here yet because you haven't done anything for you to show up what i'm going to do is i'm going to go into our views because that's where we put in our logic and i'm going to bring in our modularize so the models want to import the model we just created which is a country data all right so what i'm going to do is i'm going to have a variable called data over here and data is going to be equal to the country data model dot objects [Music] dot all and inside my context dictionary over here i'm passing data as the key and the value pair is going to be data so i can have access to this objects collected inside the country data model and now i have it here so i can make use of it in the index and the index is where we have our graph so definitely we can fish out some few things over here now what i'm going to do is i'm going to clear this okay so we are not going to have any data over here so when i clear this and when i refresh and see that everything is going down all right then i'm also going to clear the data as well because we are not just going to use static data but then we are going to collect data from our database so as you can see we have a clean slate over here now as far as the documentation of um charges is concerned we only perhaps maybe need two most important things and that's the labels and the data you want to pass and as far as application goes the labels are going to be the countries and the data is going to be the population so then how then do we get it and we just have to write in a for loop to grab the items over here so what i can do is i can put in this over here and i'll say for data in data for data in data [Music] then i'm going to end for i'll say end then what we need to pass in here is a strange okay it's supposed to be a strange but then it's going to be data so we are going to say data dots and you can have access to country when you do this and we come here and come and refresh well we are not going to see it's i mean it is vanishing so what we can do is we can click on inspect and come and check exactly what's is happening over here so this is where we have our scripts and as you can see we have the countries displaying over here so as you can see we have ghana united kingdom usa and nigeria but then they are not displaying the way they shoot okay and the way they shoot is this is supposed to be a list but we don't have any comments over here so a way to fix it is to just bring a comma over here so after our data we bring a comma so that the looping would take recognition of that comma over there so when i save that and come back here now when i refresh now we can see that we have the labels displaying over here okay we have the labels displaying over here so the next thing to do is to put in a logic for our data so for the data we're also going to put out a for loop over here so i'm going to say for data in data then i'm going to end i'm going to say n4 then because we want integer values we're actually going to make this data dots population then once again we also need to pass in the comma over here so when i come back and come and refresh i have this population over here now there are some few things we can do as far as the styling is concerned okay so as you can see there's some kind of opacity as far as um the bar charts are concerned and that's simply because um of some attributes we have over here so for instance you have background color and the border color and for background color this is where the opacity is taken care of so this is about 20 percent of the color so we can do one which is going to be 100 so it's going to be very thick and let's change everything to one over here and when i save this and come back to come and refresh you see that we have our colleagues displaying properly over here now one other thing i also need to mention is the fact that we have the type of the graph we are displaying over here there are couple more options that you can explore so we can have for instance the pi so this is going to display a pie chart so when i refresh this is exactly what we have as far as the pi is concerned now you can also have a line graph so when you type in line and come back here and come and refresh we have this line graph over here and it is a representation of this data that we have in the database so the documentation um pretty much has everything over here when you come down to the chats you can see that we have line we have barrier that we have do not empire we have a pull up area bubble and a bunch of other options over here but in this particular instance we are just going to use the bar graph so i'm going to change this back to bar so i'll save this and i'm actually coming refresh all right so now the next thing we are going to look at is um adding data from the front end as we have it in our final project okay so in order to put out this let me come to my views we are going to put out some logic over here but before then let's create a model form so inside my dashboard app i'm going to create in a python file i'm going to call this form.pi so forms.pi um i'm going to say from from django onto imports and i'm going to import forms then i also want to import the model so i'll say from the models onto imports entry data then what i'm going to say is i'm going to say class then i'll say country data form then what i can do over here is i'm going to inherit from forms dots model form then i need to specify a class meta an inside class meta i'm going to have the model attribute so i mean this actually answers the question which model do i want to create a form for and the model is going to be country data and the fields i want in there is i need all everything over there so i'm going to say um double underscore or double underscore in a strange format so this is going to be my model form then i need to come into my views and i'm going to say from the current forms onto imports i'm going to import country data form so what i'm going to do is i'm going to come in here and i'm going to say if request dots method it's equal to post and where am i getting this request method from now remember we are going to post data into our database so when i come in here as far as this is consent this is where i'm gonna have this form okay so if the request.method is equal to post then there are some few things i would want to look at then i'm going to say form it's equal to [Music] um country data form and i'm going to pass in the request.post i'm going to say if form dots is i'm going to say unless called valid then if it is valid then you are going to say form dot save okay so you're only going to save if it is valid then if not we are going to put out an else statement over here so the else statement is simply going to be um our country data form being empty like this okay so this is saying that the form is equal to the country data from the request.post the request or the the post request we are going to put in in the form okay it's going to accept it and if the form is valid so this validation checks for some of the things we specify in our model so for instance we said the max length should be 100 so if it is beyond 100 then this validation method over here is going to make sure that it is enforced okay now if everything is okay then it's going to save it else we just want to render the form as it is so what i can do next over here is to pass in the variable form platform in my um context dictionary over here so what i can do is i can come into my index.html then since form is some kind of data i can do form like this over here so when i refresh you definitely have this form over here now what i'm going to do is i'm going to add in a button over here so what i'm going to do is i'm going to put out the inputs of type submits and i'm going to say add for the text and i'm going to add some bootstrap classes survive so i'm going to say bt and btn success and i'm going to say btn dash block all right so when i save this and i'm back to comment refresh we have this over here but we also need to style things up over here now this is going to work we can add in um let's say germany and add in germany and the population of germany is around 83 million so when i click on save okay now we have a problem over here but then this is quite expected it says csrf verification field and this um an essential security feature jungle enforcer so just before the form we need to pass in scs rf token so we simply have to do csrf underscore token over here so when i save this and i'm back let me refresh this okay so let me type in germany i've germany over here and the population is around 83 million so when i click on add now you have germany added over here so clearly things are working out over here so the only thing left is for us to style this and we are going to use a third party application um called jungle crispy forms so crispy forms um is going to help us with this work so this is a um official website for crispy forms i'll leave the link in the description so i'll click on installation and the first thing you need to do if this is the first time you are dealing with this you need to run a pip install jungle crispy forms as you have it over here but then i already have it installed so i'm quickly going to jump into the next thing i need to do then i need to inform my projects that i'm going to use this so inside installed apps i need to copy this and paste it over there so i'm going to go into settings.pi then inside installed apps i need to come and paste this over here then the next step is to grab this ctrl c [Music] come in here and paste it anywhere inside settings dot pi so i'll paste it over here but then i'm going to change this to bootstrap because that's what i'm using i'm going to use or i'm using bootstrap for [Music] and the last two steps we need to do is to come here and grab in this so the load crispy form tank and this is going to go into our index.html so this is where i want to load the crispy form stack and as far as this is concerned you just have to apply a filter over here and we type in crispy on the form so when i save this and i'm back over here when i refresh we have this neatly styled over here so in order to finally test it we can see france and the population of france is around 67 million so when i add france over here and i have france added here okay now you can see that you are clearly having some problems over here whenever you add data into what we have over here and we try refreshing we see this uh pop up over here now when we click on continue it is going to add the data again and that's not what we want we certainly also don't want to have this friends being stacked over here and that's simply because we need to go back into our views and inside our views inside jungle.shortcuts this render has already been imported for us and we need to import redirect and after saving our form okay as we have it i want to return i want to redirect and this time i want to go into our home page so for the purpose of this demonstration for the home page you can just do this the first slash and that is all so when i come back here and come and refresh now we are good to go so now let's add in one other country so for the other country let's add in ivory coast our neighbors here in ghana so irikos and their population is around 25 million so when i click on add now we have a request being added over here and we don't seem to have any problem now when i click on refresh we don't have that pop-up over there so that was it yeah so basically this is a great start to visualize data or web applications and the application of some of these libraries are endless so basically it is just a brief introduction in subsequent videos i'm going to create big applications where we are going to integrate um some of these things over here now if you find this tutorial very interesting there are a couple of ways you can help me on my channel kindly subscribe to cambrotech and share this video with family and friends who find this content very useful at cambridge we see learn programming you can do it bye

Channel: KenBroTech

Views: 8,152

Keywords: KenBroTech, Web Development, Front End, Back End, Programming, chart.js, adding charts to interface, django and chart.js, data visualization, website data in charts, bar pie chart line graph graph in django, best way to learn django, django data population application, USA Canada France Germany Ghana Russia Togo Nigeria population in django application

Id: E077hVVh1ac

Length: 44min 0sec (2640 seconds)

Published: Wed Mar 10 2021