Dynamic Pie Chart in Laravel Using Ajax & jQuery

hey what's up everybody so welcome back to another tutorial so in this video i'm going to explain about the dynamic pie chart so you see here is an example that i have my acer sue style hp lenovo so these are all my sales on base of the company so you see here if i want to check the issues uh so it's three so means the total number of sales in this case is three and the percentage is 21.4 so each individual company should have its own sales so you see here the percentage the name and everything is done with the help of ajax and jquery we are able to fetch the data dynamically from the database and patch using ajax so no page refreshing is required so everything is all from the scratch so i hope you guys will love it so let's jump in and get started here all right guys so first thing you need to do is to go to the developers.google.com chart and you see here the multiple options so you can be watch each of them and we are going to work with the pie chart so just click on here and open the view source for it so you see here down towards that and there is an example my daily activities and on the right you see word eat commute watch tv sleep with the individual color that indicates that this is the 45.8 percentage with the total number and the title on the top which is work right so you see here that's how useful this google uh core chart pie chart there are great examples out there so you can watch that and a very basic simple code so with the help of that we are you see here inside the array do data tables which is coming static and all the data is inside that and we are going to create that dynamically and insert that data in database and with the help of that we're going to fetch the data and display it right so that's the whole documentation and almost all the things that we needed so make sure your exam server should be on and you install that and i already have that and my github repository for this you see here i have my query if you want to directly grab this code you can simply go and clone that or you can simply insert the query and go back to back with me right so you see here um that should be inside your slash master slash qe.txt i want to give that in the description so you can simply add that right okay so the first thing that you need to do is to install the laravel make sure you have your basic things installed so i have my composer installed so i'm going to go and see my version so it's installed properly and next thing that i'm gonna see my php version which is eight so just want to see that everything has been properly installed all right so the next thing that i need to hear is the composer create dash project larval slash laravel and give the name of the chart which in my case should be the project name which is pi underscore chart and press enter so this is going to take a while and i will be right back but once it's installed all right guys so now it's been installed properly and next thing i'm going to do is to cd into pi underscore chart the name of my project and i'm going to open up with my vs code so simply type code space dot and you use vs code then it's going to only open up right you can use any editor if you want right so the next thing that i'm going to do is just to zoom in so you guys could see properly all right so oops that all right that looks better right so the first thing that you need to do is to go to your dot env file and make sure you have your database name correctly assigned here so in my case it should be pi underscore chart and just simply grab this one and it should be the same name inside your localhost phpmyadmin so just click on the new button and right inside here pi underscore chart and you can also create table um custom or you can just simply run the migration which is a better approach so we are going to follow up that right so let's go back here and the next step that i'm going to do is to create a model which is basically the table all right so let's click on the terminal and new terminal and right over here just cleared out everything here and i'm gonna just open up already one more shell so close that and let's write here php artisan make model and let's give it the name of the model should be data analytics all right so dash m for migration so this is gonna also run the migration make sure it should be visible right so just make sure you write dash m right and press enter so you see the model created successfully so if you go inside your database and migrations and right over here by default there is a user's password and the personal access token but this is the one that we just created up and you see here we have an id and the timestamp which is by default created with the migration right and we are we're gonna add up two more fields here so two or three fields here so let's gonna add up up here so let's try it here table string right inside that i'm gonna define my name so just simply copy that up and paste it two more time here and this should be of type month make sure it should be string and in my case the the last one which should be the year i'm going to convert that into integer and simply define up here the year all right so once you're done with the migration here all you need to do is to simply run the migration just clear that up and php artisan migrate and that's going to run the migration for us so if i go back to the database inside pi underscore chart and click on the data underscore analytics and you see here we have the name month and year with also predefined fields inside the migration which is the created ad updated at and in the id which is basically created at an updated ad it's created by this time stamp right all right so just close out everything here and i'm going to define a very basic uh first we have to see how our pie chart looks like so let's go inside our resources views so that's where everything you see on the browser is basically loaded from the views so i'm going to rename that and let's give it the name of chart and dot blade dot php all right so actually it should be char dot blake i have my two dots in so just remove that one here and i'm gonna remove everything from here right i just want to make things very simple all right so let's go back to the example that we have and just grab this complete code i'm going to copy it from here so it's copied up and just simply paste up air and save it so next thing that i'm going to do here is to define the routes so i need to go to my routes folder which should be in your root directory and go to your web.php file and just remove this from here so what i'm going to do here is to define my very first route so route get request it should be the get request because we are loading the view and we are loading the view from the controller so it should be the get request and let's also create the controller so i'm going to also create a controller just like we created the the the uh model here right so php artisan make controller and the name of the controller in my case should be chart controller right and simply press enter and if i go back inside my app http controllers and here you see here we have a chartcontroller.php file right so let's go back here inside that and define your controller path so which in my case should be the best approach is that you have to define your use just like that rather i should give the complete part and write again and again i need to pass the app slash http controller which is the path for the controllers so it's a better approach to apply that right so let's write here app slash http slash controllers slash and the name of the controller in my case which is chart controller and that's it all we need all right so let's go down here oops so let's go down here and define here the chart controller and pass here the class and the name of the method is in my case should be index and that's all we need right so let's go inside your controller which should be inside your eyes it's showing you the part and define here the function so public function and the name of the method which in my case is index so return view and just give it the name of the file which we have which is the chart as you could see here inside my views we have chart.blade.php and that should be the name of the method make sure it should be seen right everything looks fine now just simply clear that up and run the server which is phpr isn't served and if i go back to the browser and run my server and you see now we have our pie chart loaded up here now you see here each data now this is all the example and all the data is tactically defined inside your chart.play.php let me just close that up and show you so we have our very basic we have a package name so you see here google.charge.load whatever you define inside the package if it should be a bar chart you have to define the package if it's a line chart so everything is defined inside these packages now this will load the call back and draw chart is basically the function where the data is in the form of array to data table and that's how its data is presentable so we have to do here a trick we have to convert that array to data table in the format in the same format as as defined but we have to use something which is known as columns so you see here it's a very basic example so just suppose that this is this should be the key and this should be the value for the task and we have to convert and these are the two columns so the first column is for the label and just assume that the next column is for the value which you see down here the work is the label and the and and the given workers are 11 so that should be the the value so we have to create two columns and that's how we can add the data right so i'm going to show you in a little while so this is the options you see here the title my daily activities that's what is display right up on the left of it so that make sure you and this should be the the title for this and as explained that each color indicates the this should be the basically the the label for that or you whatever you could say that the defined data the tasks which are assigned for the worker eat whatever he applied and next to that we have to grab this id which is a pie chart everything that is loaded up here so this is the dom property and that that will get the pie chart id which is defined inside i'm going to show you that should be inside the body which is defined right down here so this is pie chart this loaded up inside the dom and that's going to draw two things here first we have to pass the data that we have which is coming from the array to data table and next the options there right and down here you see we have the width and the height which in my case i don't need that in that way just just keep that and save it and refresh this how it looks so this looks like something like this right all right so we have to do a few changes here right i'm going to write a very basic style.css file so make sure that if you are um you you're happy with that stuff so that will really good okay so let's go down inside my body and uh even though inside the scripts right up to the scripts i'm gonna define here style tags or inside my style tag i have a very basic css here so let's first define the container so we have our padding should be zero margin should be zero next we have our h1 heading that should be [Music] out of the container class next we have the h1 let's give it a color y and i want the background should be dark gray and the padding give it the [Music] padding 8 pixel and left bottom 4 pixel next thing that i need is the text align center all right so next here we also need to define something which is known as the uh chart and the score uh wrap which i need to wrap the the the data the the the chart position so what i'm going to do here is so right after the container so i'm going to remove or cut this out for a while and define here the container inside container i'm going to define here dynamic shot or you could say here dynamic pie chart ajax or core chart whatever you could name it so ajax and jq right so whatever you could write here next we have our right after the div i'm gonna define here the id with the wrap underscore chart underscore wrap and inside here i'm going to define my pi hr right so if i go back and see everything looks so it looks something like that so let's add some positions for the chart so right after the h1 i'm going to define here the the class for the chart underscore wrap so let's give it the position of relative and add some padding from the bottom which should be 100 let's define height of 0 and overflow hidden and last thing that we need for the pie chart so it should be a position of absolute and let's give it the top zero left zero and the width of 50 percent and i'm going to give it the height of 40 version if you want right so let's see how it looks so if i go back to my chrome browser and refresh that so it looks something like that right so it's going to be more visible all right so we are done with the very basic um with the very basic ui changes that all we need now let's go back inside the database and i'm going to add the data as you see the migration loaded successfully as we run phprs and migrate so i'm gonna go and fetch this and i'm gonna give this link in the description or either you can go to my repo and directly uh grab this query and insert that so let's make sure you're inside this table by underscore chart let's go inside the query and uh or oops it should be inside your sql and just simply add up here and click the go button and it's the data should be inserted inside my data underscore analytics table right so now you see all the data is successfully inserted all right so that's it guys so that's the very basic first part so i will be right back once after we started all right guys so welcome back here so let's go inside our resources views chart.blake.php and let's work on the data which is which should be dynamic coming from the database so the what i'm going to do is to just remove this data and keep that simple and one more thing i need to do is if i just want to put that put those all script down after the ending body tag make things very cleaner and easily to easier to understand so i'm going to remove the script from the head tag and keep that separate and right after the body i'm going to define my scripts right okay so we also have to define here library which is jquery for hx functionality all you need to do is to just search for code.jqe.com and grab this uncompressed version and put that right after the loader.js file loaded.jscript sorry all right so once it's done let's go inside the controller and write a query so what i'm going to do next so i actually i want those all the businesses means that if i go back to my migration the query that i inserted you see here the name and the month and the year so i need to count those names which comes how many times that means that total number of sales how many sales for the hp how many sales for the lenovo so let's write a very basic query and then convert that into the larval and what i'm going to do is actually i need to select the and count all the uh the total sales so let's give it the total underscore sales and i should have to define here analysis for as and i also need to grab the name and that should all coming from the data analytics and i need to group by on base of name and this query will help me and find out that the total number how many times those acer only have a one sale asa issues has sale of three times dell two so this here will help us to count the total number of say on base of name and later on once we're going to apply here the filter as you could see here inside the data the years we can filter out the data on base of ear which we which i'm going to do in the next part of this video so let's write here a function so the function should be public function and it should be spell right so let's give it the name of the method which would be fetch data right inside here dollar data equal to we have to define here model and the db query for the raw so let's define a data analytics and i also need to define here use db make sure it should be inside your app slash model slash right okay that's fine so let's define here data analytics and slack as you could see in my sql query just to make things simpler for you guys to see what i'm gonna do so let's count all and give it the name of as total underscore sales and the name and group by on base of name and get the data all right then we have to loop the data and convert that into the array and we have two things we have total number of sales and we have names so let's define here name and give it the raw of name and next we have total number of sales should be dollar row total underscore sales all right so right after the loop we have to just simply um [Music] actually i missed something here uh we have looped the data yeah i need to also convert that into the into the output so let's define in the form of array so it should be like that all right so that looks fine now we have to convert that into the we have to convert the array into json so all i need is json underscore encode method and simply pass the output here all right so that's it for the controller part next thing that i need here is to go inside my routes and define here the route for my fetch data so it should be a get request make sure it should be fetch underscore data and the name of the method which in my case is fetch data and simply define up here so we are done with the route path as well now let's go back to the chart.blade.php and that's where the everything is coming from as you could see we have our array to data table and i explained we have two columns we have to first the column for the labels uh for the type of string and next is for the number so i'm going to do here is right after the closing of radar 2 data table we have to define data dot add column and right inside here i'm gonna define two things so let's pass this parenthesis because we have two type we have to define two parameters so the first should be the type so the type is the first type is for string and second for the label so let's give it the label of name semicolon close that up and i'm going to copy this same thing here and the second type is for the number where we have the numbers values and that that should be for the sales all right so that's it all we need all right so let's write here a function so i'm going to write a very separate script here and right inside the script i'm going to define a function load underscore data and inside that function inside this ajax call let's pass here the url which should be fetch underscore data next we have a method of get request and next last thing that we hear is the data so let's pass here the token here which should be csrf underserved token which is for the protection and that's all we need and we have to convert that data in the form of json so data type should be of type json and the last thing is we have a success function and let's pass here the data and i need to call the method here so the method that is being called here is the draw chart method and what i'm going to do here is this method should be called right inside my ajax and the data that we need to pass is all inside the draw chart now we have a draw chart here so next we have to uh this data is passed to the function of draw chat and we have to give it the pass the parameter here as well so let's give it the name of draw chart and right inside that i'm going to create here variable with the name of json data and the data which is passed in so which would be a draw chart um yeah all right so let's loop the data right after the column so it should be dollar dot each and pass here the json data and the loop for this so i and the json data so we have two things here first we have the name and the and the total number of sales so let's give it the variable of name of name so it should be json data dot name and for the total number of sales let's give it the name of total underscore sales equal to json data dot total number of sales all right and we have to add this inside the row so data dot and give it the name of add rows and right inside here i'm going to define my array in the form of first we have the name and next we have the total number of sales so the last thing is that we have to call the method so right inside the set on load callback we have to call the method we have of load underscore data so grab this one and uh regardless of this draw chart the data which is coming from this method using ajax so i need to define here load underscore data and that's all we need right so let's go back and see everything works well so i'm going to refresh this yeah the data is not loaded let's go to the console refresh this out and we are getting nothing you're gonna see yeah we have um call the method load underscore data and the data which is coming in so let me console the log here right after the the data which is looping from here so json data so if i go back and refresh this yeah it's showing us the data land number three but the collection is not gonna show so if i go back to the controller and the qe works in get all the data and get the result as an array oops actually it should be arrayed like this so the brackets are missing for the array so now if i go back and refresh this and you see here it's gonna work right so you see here for the acer we have total number of sale which should be one if i just hover on it you see here right so we are almost done here right so you guys could see how easier and how nicer it is to work with the pie chart with the help of ajx and jquery in the next coming part of this video we are going to filter the result on base of ear so thanks guys for watching this make sure you like and subscribe and i want to see you for the next time

Channel: AB Nation Programmers

Views: 1,520

Keywords: laravel, laravel tutorials, laravel crash course, dynamic pie charts, google charts in php, php, Pie Chart in Laravel Using Ajax & jQuery, pie chart in laravel 8, dynamic pie chart in laravel, google charts in laravel, pie chart, bar chart, build charts in Laravel without page refreshing

Id: tiW_c_m75LY

Length: 27min 40sec (1660 seconds)

Published: Tue Mar 22 2022