Django + Chart + Database Integration || Add Data Using Forms And Get Dynamic Chart Easily!

hello everyone welcome to my channel so in this part i'm going to show you how we can work with charge.js as you can see we have a nice bar chart here and it can be any chart pie chart discarded chart bar chart and droners all the things okay you can add your dynamic charts that the information is coming as you can see the category smartphone desktop laptop tv and ladies mans and books based on each category how many products do you have as you can see in the books we have 250 products mans we have 45 products ladies we have 60 products and the smartphone category we have only five products so based on the category how many products we have if we want to list it out and for that we need to use our charges in our jungle project and add our dynamic data from here like i want to use like favorites favorites in our favorites how many products we have suppose i have in our favorites category i have 90 products so as you can see it's added in favorite category we have 90 products so the information you add here and the dynamic information would be shown on your charges as you can see so this is completely dynamic information coming from the database and you can add information from here and the information will be added to the database and show info information in this dynamic charges so for that you need to work with charges application in the charges if you go there charges dot org you can see you have a lot of thing as you can see the gate is started we have a chart type we have a line chart as you can see and you can see the code configuration type line chart and the data would be your dynamic data that would be coming from database okay then we have a bar chart that i have used as you can see it's type bar chart and you have your data labels and options and scale all of those thing you can use dynamic it has a type it has a dynamic data it has levels it has options i will suggest you to see everything in this chart.js website to learn the documentation to learn more further better properly and if you go to the radar chart as you can see the information is showing in a rudder system and we have a bubble chart as you can see it's nice and we have a donors and pie chart this is also very very useful okay as you can see the red portion we have 300 yellow 100 the blue is 200 so all of the information if you go to the pie chart this is the pie chart that you are seeing it's really awesome you can see the visualization is also nice okay and each type should be pie chart like data set properties in the option you can change the background color okay you can change the background color make it bold make it light and you can set the border color border width and you can change this data is the dynamic data which is required for this is very important you can change over border color you can change when you hover over it it will change the color you can change the rotation you can change the hover offset you can do anything you like in the bar chart how many thing we have we can change the background color we have the data over background color over border color hover border width all of those thing you can change everything you like so for that i need to go to the django project youtube here i'll create a new application i also uploaded a video about news app that uh required the ap integration third-party api integration you just see that and i have a complete uh django project course on product management application also just i gonna go to git bash and i need to make a project which is django dash admin start project and its project should name it like chart django project okay so it's done now i need to open it chart django project i need to open it code and go to terminal new terminal and this is our main project where we have a settings.pi file and to add one more app because every project should have an app okay so i need to write python manage dot py and start app it's absolutely chart app okay and this is the chart app that we currently have and let me create something for you and we need to go to the apps dot py and this is the thing chart app config that we need just copy it and the name of our application is chart app so you need to add it to our settings dot ty file and its name is chart app dot apps dot chart config okay just add this line and based on your application how many apps you install just add it here this is very basic and you need to go to the your peer file of the project and delete all of those thing okay later we're gonna connect this urls with our charges urs.profile so for that let me quit it now it is always a good practice and keep it empty for now okay we don't need it now you need to create a template let me create a template which is in the chat app go to new folder and create templates in the templates i'm going to create a new folder it should be chart app okay and in another folder i need to create a partials so in the partials i should have a base dot html and the navbar okay we need a nav dot html okay so in the nav section i need to copy the some u some code and this will be coming from the bootstrap you can just use it go to getbootstrap.com and add the information so get started and here you will see like the starter template copy this okay and i'm gonna paste it in my base dot html okay and then they and save it in the nav portion i'm gonna copy this code that i already wrote and this is also from the uh bootstrap and where it is coming it is coming from the component and this navbar you need to just copy this nav thing okay this is important okay just add this thing and make it never dark and background dark and keep on the one link home and the network okay we don't need any complex thing and we need to include that now.html inside the base.html file where i have all the thing like bootstrap and let me delete all of those thing and it's let me delete this as well and its name should be chart app okay and this is our bootstrap and this is the css link this is the javascript link for the bootstrap what i need to do is add one more link that will connect our django with the charges to go to the charges in installation go to the charges cdn and you need to copy this html this charges minified version and you need to import it one step below and paste it here so this is the charges integration and this is the bootstrap integration in our base.html file so in the body section we need to include our navbar so we're gonna include we're gonna go to the partials and nav dot html okay partial so first we need to include the navbar in the base of html we should have an app network on the top and then i'm gonna create one more thing which is block content and it should be and block content okay here i'm gonna imp here i'm gonna create some important thing okay so in this part block content and block i will create one more index file which is chart app dot this one it should be index dot html and i'm gonna i'm gonna inherit everything that we have in the base in the base we have every setup that we need we have also a partials of an app navbar in a base so we just need to get to see all the content inside the block contact and block that will inherit all those information here here i'm going to inherit the base extends it will go to the partials and it will go base dot html okay we're going to extend everything from the baseline html so that you don't need to write everything from scratch here we don't need to have any setup in the index page in the index page i will only do the add and of data and i'm gonna show every information dynamic data information in the chart just and in a nice chart and i'm gonna do everything here so index space is the main page then to show information and add information from okay so here i'm gonna write block content and block you can just copy this thing this is the same thing you can copy this thing and in the h2 this is index page okay this is the index page and let me save it save it the nav just save it i'm going to save everything views dot people okay and here you're gonna go index it will take a request okay and suppose our data is the current data this is just a dummy thing now make it a context so context should be data is the data okay and i'm gonna return render function it will take a request and our template is inside chat app dot index dot html okay so inside the chart we go to index.html and then we pass the context okay so this is the thing then to pass inside that function and and to import that function in the reverse dot pf file so just copy all of this from the project level urls and paste it here and in the root directory i'm gonna import i don't need admin okay so from dot from dot import views okay import views and views dot index function and give it a dynamic name and its name should be index so you go to the root path of our application it will run that function index and this function okay pass data into indexed html page this information and pass the context okay so this is the main important thing so this is just a dummy function just to make run this application we need to do that okay so save all of those thing and go to the main urs.pfile and this is the project level to include our application so you can copy this and in the root directory we're gonna include our app which app the app that we have created chat app dot is url we're gonna include the chart app.urls in the project level urls and this is the url which is startup we are gonna connect it okay so let me just add one more thing which is index.html page i need to add a div sorry it should be deep and its class should be row okay and margin top of two and here i'm gonna create a div with a class of all md four and i need one more div which will take a space of call md eight so here i'm gonna show the charts and here i'm gonna show the add data at the add data and it should be inside the h3 tag s3 tag i'm gonna to add data okay and i'm gonna use the horizontal rule and here i will use a form later but not now and i'm gonna show the charges charges and let me open the charges this thing go to the installation file the charges.let us discharge and you need to copy this thing okay this html this is the this is the starting template for this chart just copy this whole thing script tag and paste it inside this part in the eight space we're gonna show the chart and the four space we're gonna add the data okay so these are the thing let me go there and take it there okay so as you can see in the chart we have the type of bar chart and it has this data and inside the data objects it has levels levels are these are the levels which is static we're going to get all the information dynamically from the database later but this is just to show you how it's working and the data sets we have levels it should be number of products okay and this is the static data okay in the data sets and these are the levels that we have and this is the background color you can change background color border color you have multiple options you can you can customize it so just save this place so here we'll add data in this side and in the right side you'll show the chart okay let me write python minus dot py run server let me see it's working or not okay here you need to create a div okay this is a bootstrap class which is container that will show add data here and your chart will show here okay this is your application name so it's good you add your data from this place and it should be h4 it looks better okay add data so in this part what you'll do add your information from here and for that we needed back end so that the information coming from the database and for that just get out of this shell and you need to create a model so go to the chart app and go to models and create your own models it should be class the it should be a product okay it should be product class and it should be models dot model modern stuff model and we're gonna create it's it have product should have a name or it should have a category okay and category should be models dot character field and max length is 100 and null is equals to false blank is equals to false because you must have to put some information the category name of your product and based on that category you will have get the number of products so number of number of products okay and number of products should be models dot integer field and it will specify how many products we have in that particular category okay because we're gonna put information like category of health science man's omens and based on that category how many product we have number of products okay and it should be integer field and then we need a function str function and it will take itself and it will return the in the app stream it will return cell dot category name and it will also return cell dot number of products okay in the database so add one more thing so it's working perfectly so this is the thing we want to the admin panel and import that thing as well so we need to add information from the admin panel as well that's going to register our model so we need to from dot models import the product model that we have just created okay and admin go to admin dot site dot register we're gonna register the product model if you have multiple of products or multiple models you can register multiple uh models okay here this is how you register your model in the admin panel and then in the modern appear this is just to create a model and now what you need to do you need to migrate it so python manage.py make migrations and make migration is the command that will make a migrations file for you okay so as you can see the great model product so if you go to the migrations as you can see your product model is created with an id of auto generated and you have a category of character field and number of products that we want which is integer field it is added okay so this is very important thing and your model name should be product inside a database and then we need to migrate that all those information in a database in real time so for that we need to go python manage.pi migrate this is the main thing that will create or all of our database schema tables based on your models okay so this is very important so it's created let's clearly clear it out i'm going to create a super user and let's write python manage.py create super user so that we can add data inside admin panel give it a name and it should have gmail give a simple password and yes okay it's created now go to the server python manager.poi run server and when you go to the server and if you go to the add to add my name that i have just used in the super user login and we have our products that is listed here and you can add products category like desktop number of products we have suppose 45 and we need to add a laptop and number of products would be 60. suppose we have only two products which is laptop we have 60 product and the desktop we have 45 products and these are the things coming from this model that we specified we're going to return the category and dash and the number of products in each category number of products okay as you can see we have only two products you can do everything you like so for that i have created the super user now what i need to do and show all the information in this field in this chart okay let me go to the chart this chart so this is the static content we're going to show the dynamic content here so this is our main thing now so go to the views.py file here in the views.people i'm gonna write we're gonna import the models from dot models import product model okay and then i'm gonna go to products should be product dot objects dot all you can query by filtering but i'm gonna see all the products okay this should be products and this should be products so these are all the products that we collect from the database that we have currently and we're gonna send all those information as a context dictionary to chart app index.html page the chart app integrated html page as a context okay so the next we're going to go to index and show our dynamic data so each type is bar in the level we're going to show our dynamic content so delete all of those thing and delete all of this corresponding data so write a template string and for product in products because we pass the products as a context okay so let me end it first and for okay so in this part i'm gonna show the information so it should first uh the category name it should be in a string okay it should be each product dot category we have thousands of we might have thousands of products and it might have thousands of category so you need to uh write it inside a for loop so each product that we collect from this list of products that we have should have a category name okay it has a category name and it's coming from this model we have a category and then we need number of products let me copy this thing as well okay later i'm going to copy this first we have a product dot category and just add a comma here it is very important this comma and it should be inside a quotation this dynamic information that we see because this is a string and then we need to show the same thing let me copy this thing paste it here and you don't need to add this thing here because this is an integer field and we need number of products so go there to show the number of products in this category so that's nice we have the number of products this is in the x level and this should be in a y level so based on that product category how many products that we have it will show the information and you should add a comma before that after that and okay just show this information now so as you can see the dynamic information is coming from the database in the desktop we have 45 product laptop we have 60 product if you go to the admin panel and here add one more product which is smartphone how many products we have 90 products save it and go there as you can see it's dynamic information is coming from the database it's working now i don't need to add data from the admin i want to add data from this place and it will show there okay so this will be more fun so for that we need to work with django forms since the chart app let me create forms dot py file from django import forms i'm doing it to from dot models import product model okay so these are the two things that we want you know to create form which is product form and it will inherit forms dot model form need to class meta and its model name should be the product model based on that we create a form okay fields i want all the fields okay underscore all and then i'm gonna go the widgets now we just should have the category this is the same name that we have in the model so category should have forms dot text input and the text input in the attributes you can say set the attributes and it should be class of form control okay so let me copy this thing and paste it here and it should be number of products go there it should be number of products okay okay and this should be integer field suppose let me add text input here the same thing but i prefer the integer because the number of products is integer field first let me check it is working or not okay so we need to uh import this product form inside a filtered pure file from dot forms import product form and we need to show this here if request dot method is equals to post then form is equals to product form and request dot post we get all the information like it's category number of products inside a product form and in this information is a post because we are posting some information to the database so it is request.post if it is a file then it to write request dot files if you want to post some files okay then it would be requested file but we're gonna import we're gonna add some data to this database using the product form then just normal text data that's why you need only post okay request dot post will add all the information if the request method is post then i'm gonna post some data inside this product form and it will be saved to the database okay and then to check if form dot is valid if the information that we are passing is valid then it will save all the information that we typed in the form to the database then to form dot save okay and here in the else part the else part what will do form is equals to normal product form okay this is the normal get request it will handle if it is a post that in it will save information to the database from you know to collect everything that you have typed here okay and it will save all the information then i need to pass this particular form of the form thing as a context and let me pass the form and this form okay so that it shows the form inside index.html page and here i'm gonna add the form and the form is method should be post and inside that i need to pass this as a context okay this is the form that you need then we need a csrf token cs rf token this is very important in django have an input type of submit that will submit the data and its value should be add data okay and let me give it a class of btn btn success this is a normal bootstrap class this type is submit and it will add the dynamic data so this nice let me see if it is working as against we have a category number of products let me add some margin margin top of three suppose margin of two add a margin here merging top of two this column and let me see how it's working and refresh it it has a category where the number of products you can add data so let me see it is working or not in the health category we have the number of products which is 78 added as you can see in the health category we have 78 products you can add one more thing suppose in the tv category we have suppose 50 products edit as you can see it's added the information in the dynamic so these are not the background color is not that dark we need to make it more perfect and in the this is the background color it is rgb format so make it 0.8 or 0.8 is perfect so make it the opacity 0.8 save it let's do that okay it's perfectly done as you can see we have all the information that we want we have a smartphone laptop desktop and health all of those things so one more information is very important if we go to the user.pur file after the form is saved to return render redirect to index okay let's save it the trippy man's category we have 80 products okay now the information palace are gone it's working perfectly otherwise you have multiple tvs like here let me add it from the deleted from the admin we don't need two tvs uh let me delete one more okay let this thing go yes okay it's deleted now it's working fine okay and it should be my we have a type which is bar chart let me add it into pie chart and just name the type to pie and now see amazing isn't it right as you can see if you hover over it it also have an effect and you can you can also change the border color okay you can change the border color you just play with it and you and you have a border widths border color you can set rgb color and you can add more colors if you want list of colors that you can add you can add one more here suppose in the rgb panel okay you can change the information like 40 and this should be 120 and this should be 50 okay you can add one more thing and border color you can add one more thing which is we can add this one okay and this is 0.8 okay you can add multiple as you want let me change the border width which is two save it and let's see let me make it smaller as you can see we have 50 tv and based on 100 we have 45 desktop element we have 78 health element and we have the 90 products of the smartphone category so we have a huge amount so by this looking at this chart you can see the smallest is this one in the desktop category we have only 45 product and in the tv we have only 50 products so these are the smallest one okay so these are the smartphone territory and this is the man's territory we have 80 products you can customize it based on your choice and you can change it to chart and save it and this is the line chart that we have so we have one more thing which is radar chart if you select it to rudder and if we select it to rudder and save it and go there as you can see we have a radar type thing like huge chunk of information are in the smartphone category and we have simple uh very little on the desktop and the last we have 45 and 50 and the mass category have a huge amount of product and the health the smartphone and the laptop we have huge amount of products so you might need all those thing but for now i'm just using the bar chart it looks perfect in this kind of scenario it looks better in this category how many products we have but just looking at the chart it looks so awesome it's just integration of the junk with the charges is a really awesome thing you can make an amazing dashboard and you can add the dynamic content here from your category number of products from the admin panel or your dashboard it looks really nice okay it makes your application look super cool so that's why i taught you how you can add a charges and add dynamic data to your charges application and make models based on it and make it database models and and all of your information from the forms and show in your all of those database information okay information in a products in a context and pass this context to the index page and show all those information here okay that's why we need to create a dynamic information this is the dynamic charges django project i'll give all the code in the description below so this is how you can work with charges with django application thanks for watching i'll be coming with the next video

Channel: Great Adib

Views: 2,916

Rating: 4.9365077 out of 5

Keywords: Django chart integration, add chart to django, how to show chart from database data, get chart data from database, django chart js tutorial, add chart to django project

Id: a1j8g01ics4

Length: 35min 1sec (2101 seconds)

Published: Wed Apr 07 2021