Integrate Chart.js in DataTables with PHP MySQL using Ajax

hello friends in this video tutorial we will learn how to integrate chart.js library with jquery data table plugins [Music] for display dynamic data table data in the form of graph on the web page so when we have to change jquery data table data then graph data must be changed so in this part we will display dynamic data of data tables on the chart by using chart.js library with php script and mysql database and for real-time dynamic data here we will use ajax server-side processing of data so if you want to learn how to use chart.js library with jquery data table then this tutorial will help you to learn how to make dynamic chart by data render from data table and display on the chart by using chart.js library with jquery data table using ajax in this part we will first show you mysql table structure details after this we will create simple html table which we will use for jquery data table and then after we will write jquery code for initialize data table and send ajax request for page data from server [Music] next we will write php script for page data from server and send back data to ajax request in json format so after this we will check output of loading data in the jquery data table in the browser next we will write javascript code for render data table data for create chart using chart.js library and after this we will check output in the browser and one more things we have also put source code link under this video description now let's start discussing this topic so this is our testing database and under this we have one test order table with a table column like [Music] order its order number order quantity price per unit order total order date order status and product name and under this table we have already inserted last three years data under this table so first we will page data from this table and display day y sales data in the jquery data table and after this we will display that order data in chart form on the web page by using chart.js library now first we want to load test order table data in the jquery data table so we have go to our working directory here we have to open index.php file and under this file we have already included bootstrap 5 library data tables library chart.js library file linked so this file we will use under this tutorial now we have moved to right html code path and here we have to create html table so here we have to write html table tag with class is equal to table table stripe table bordered and it attribute as equal to order table [Music] under this table we have to create one open and close table head tag [Music] and under the stack we have to create one table row tag and under the stack we have to create three table column tag with text like order number order value and order date [Music] after this we have create table body tag so this all tag is required for convert html table to data table now we have moved to write jquery code and here we have to create one function with name like page data so this function will convert simple html table to data table and load data in that data table with server side processing of data using ajax so under this function here we have to write data table variable is equal to dollar with table it order table with data table method so this method will initialize jquery data table plugin under this method first we have to write first option processing which has been set to true [Music] so this option will enable the display of a processing indicator when the table is being processed in second option we have write server side which has been set to true so this option will switch client side processing to server side processing in third option we have to write order option which has been set to blank array so this option will enable the table column ordering lastly we have to write ajax option and by using this option it will send ajax request to server and under this first we have to write first option url which is set to action.php so here it will send ajax request to this action.php file in ajax second option we have to write type which has been set to post method so here it will have to use post method for send data to the server with this ajax request we want to send some data to server so here we have to write data option and here we have to send action variable with page value as data sent to server [Music] so here our jquery code is ready for initialized data table with send ajax request to server so now we have moveaction.php file for write php script for page data from test order table so here first we want to make database connection so for this we have to write dollar connect variable is equal to new pdo class with three argument in first argument we have to write mysql host as equal to localhost and database name set to testing [Music] in second argument we have to write username set to root and in third argument we have to write password which is set to blank this code will make database connection now below this we have to write if statement and under condition we have to write a set function with dollar post action variable so if this condition true [Music] then it will execute its block of code and under this block again we have to write if statement and under condition we have to write dollar action variable value as equal to phage if this condition true then it will execute this if block of code and under this block we have to write dollar order column variable is equal to table column like order number order table and order date table column name in an array variable [Music] now for store select query here we have to write dollar main query variable is equal to select order number some function with order total as order total and order date table column from the test order table so in this variable we have store simple select query [Music] now for store where condition query here we have to define dollar search query variable and after this we have to write if statement and under condition we have to write the set function with dollar post search value variable if this condition true then it will execute if block of code [Music] and under this block we have to write dollar search query variable and here we have to append query like [Music] open and close bracket and between this we have to paste this query so this query will search data in table after this we have to write dollar group by query variable is equal to query like group by order table so in this variable we have to store group by query now for store order by query here we have to create dollar order query variable so below this variable we have to write if statement and under condition we have to write a set function with dollar post order variable so this condition will be true then it will execute this if block of code and under this block we have to write dollar order query variable is equal to this query but suppose here above condition false [Music] then it will execute else block of code and under this block we have to write dollar order query variable is equal to order by order date in descending order so here we have stored order by query under this order query variable now for store limit query details here we have to create dollar limit query variable is equal to blank value and below this we have to write if statement and under conditions we have to write dollar force length variable value is not equal to -1 if this condition true then it will execute if block of code and under this block we have to write dollar limit query variable is equal to limit statement with dollar start variable comma dollar post length variable so here we have store complete query for page data from order table under different variable so we can execute query as per are required so first we want to get total number of filtered rows data so here we have to write dollar statement variable is equal to dollar connect variable with prepare method and under this we have to write [Music] dollar main query variable dollar search query variable dollar group by query variable and dollar order query variable so here we have merged this query and this method will make query for execution next we want to execute above query so here we have to write dollar statement variable with execute method [Music] after execute query here we have to write dollar filtered rows variable is equal to dollar statement variable with row count method so this method will return total number of affected rows next we want to get total number of rows data so here again we have to write [Music] dollar statement variable is equal to dollar connect variable with prepare method and under this method we have to write dollar main query variable and dollar group by query variable [Music] so this method will prepare query for execution process now we want to execute above query so here we have to write dollar statement variable with execute method and below this we have to write dollar total rows variable is equal to dollar statement variable with row count method so this method will return number of effect rows which is total number of rows data so after getting total number of filtered rows and total number of rows data now we want to order page data so here we have to write dollar result variable is equal to dollar connect variable with query method [Music] and under this method we have to write dollar main query variable dollar search query variable dollar group by query variable dollar order query variable dollar limit query variable so here we have combine all query and this method will execute above query and return query execution result in an array format which is stored under this dollar result variable now here we have create one dollar data variable is equal to an array under this variable we will store order table data [Music] now for page data from this dollar result variable here we have to write for each load and under condition we have to write dollar result variable as dollar row variable under this loop we have to create one dollar sub array variable is equal to an array now first we want to store order number table column data so here we have to write dollar sub array variable is equal to dollar row order number table column name after this for stored order total column data so here we have to write dollar sub array variable is equal to dollar row order total table column name next for stored order date table column data so here we have to write dollar sub array variable is equal to dollar row order date table column name so here we have stored order table data under this dollar sub array variable now we want to stored under dollar data variable so here we have to write dollar data array variable is equal to dollar sub array variable so on every loop it will store data under this dollar data variable [Music] now here we have to write dollar output variable is equal to an array [Music] and under this array first key we have to write draw and in value we have to write dollar post draw variable [Music] in second key we have write records total and in value we have to write dollar total rows variable in third key we have to write records filtered and in value we have to write dollar rows variable and in last key we have to write data and in value we have to write dollar data variable so this way we have to store all required data for make data table in the dollar output variable now we want to send this data to ajax request in json format so we have to write echo statement with json and code function and in this function we have to write dollar output variable so this function will convert data into json string so here our code is ready for load data in the jquery data table plugin with server side processing by using ajax so now we have to check an output in the browser friends here we can see that when the page has been load in the browser then we can see that order table data has been loaded into jquery data table plugin and here we can perform live searching of mysql order table data and here also we can see that pagination link is automatic made without write any line of code and here we can also perform table column sorting of data so this is all feature of jquery data table plugin now we want to integrate chart.js library within this jquery data table and display jquery data table data in the form of barchart using chart.js library [Music] so for this we have go to index.php file and under this file we have go to html code part and here we have to create one division tag with classes equal to chart container and pie chart and under the stack we have to create one canvas stack with it is equal to bar chart so under the stack we will make bar chart by using chart.js library with data rendered from this data table method after this we have go to jquery code path and here we have go to page data function and under this function we have go to data table method and under this we have to write draw callback option with callback function with settings as argument so this function will be called every time when data tables performs a draw process and here this data table method has already received data from server so we will be use that data for make dynamic chart [Music] under this function for store sale data data here we have to create sale date variable is equal to an array [Music] and for store sale data here we have to create one sale variable is equal to an array below this here we have to write for loop and under condition we have to write count variable value as equal to zero count variable value is less than the value of settings.a or data.length and count variable value as increment by one here from settings.a or data variable it will fetch data which has been load under this data table under this loop we have to write sales data variable.push method and under this method we have to write settings.a or data with count index dot underscore data with two index so it will page sale date data and store under the sale data variable in an array format after this we have to write sale variable dot push method and under this method we have to write passplot method and under this we have to write settings.ao data would count index dot underscore data with one index so it will page sales value data and store under sale variable in an array format so on every loop it will store data under this both variable in an array format below this we have to create one chart data variable and this variable will be used for display data on the chart [Music] under this variable we have to write labels key and in the value we have to write sales data variable so it will display sale date data at below of each bar and after this below here we have to create one data sets variable [Music] and under this we have to first write label key and in the value we have to write sales text so this text will be displayed at the header of the chart for set background color of chart or graph so here we have to write background color key and in the value we have to write this color same way for set font color here we have to write color key and in the value we have to write white and for display data on the chart so here we have to write data key and in the value we have to write sale array variable now for create bar chart first we have to store destination of bar chart in the variable so here we have to write graph chart 3 variable is equal to dollar with canvas tagged bar chart [Music] next for draw bar chart here we have to write sale chart variable as equal to new chart class with two argument [Music] in the first argument we have to write graph chart 3 [Music] variable and in the second argument we have to write an array and in an array first key we have to write chart type which has been set to bar and in second key we have to write data and in the value we have to write chart data variable so this option will load and this variable data load on the dynamic bar chart so here our code is ready so when page has been load then it will display jquery data table on the chart so now we have to check output in the browser friends here first we have to refresh webpage and after refresh of the web page here we can see that barchart has been appeared above the data table and in the chart we can see data table data when we have go on to second page then in data table it has display second page data and at the same time here we can see that second page data table data has been rendered on the bar chart without refresh of the web page now we want to display more data on the single data table page so here we have to select 25 number so after selecting 25 number here in data table it has display 25 number data on single page and here in at the bar chart we can see that total 25 bars has been displayed which it has been rendered data table data and display on the bar chart so here one data table data has been changed then bar chart has been created with updated data when we have to sort data so after sorting of data here we can see that varchar data has been also arranged so in this part we have to learn how to integrate chart.js library under this jquery data table library in next part we will add date range filter with this jquery data table and chart.js library so by using date range picker we will add advanced date range filter under this data table and chart.js application [Music]

Channel: Webslesson

Views: 15,679

Keywords: chart.js, chartjs, datatable, datatable and chart.js, dynamic chart.js, flexible chart.js, dynamic chart.js with datatable, graph from datatable, bar chart with datatable, chart js with datatables, datatable chartjs, chart.js tutorial, datatable to chart, convert datatable chart, datatables chart.js, chart.js data table example, php, mysql, ajax, jquery, chart js in datatable, bar chart in datatable, integrate chart js, datatable with chart, datatables with chartjs, webslesson

Id: ma3GE8CRWAg

Length: 21min 39sec (1299 seconds)

Published: Mon Mar 28 2022