How to Create Dynamic Chart in PHP using Chart.js

hello friends in this video tutorial we will learn how to create dynamic data graph in php by using chart.js library with ajax previously we have already published tutorial on create graph or chart in php by using google chart library morris chart library now here we have used chart.js library for create dynamic chart or graph by using dynamic data with php and ajax chart.js is a simple and flexible javascript charting library for display data in chart or graph format on website so for this here how to use chart.js library with php for create dynamic chart we will make one simple poll application and display poll result on chart or graph on web page using chart.js library now let's start discussing this topic so this is our testing database and here we can see survey table with two table column like survey id and language under this table when user has submit their vote then data will be stored under this table and from that data we will create dynamic chart using chart.js library so this is our working folder and here we can see two file like index.php and data.php in index.php we will write front end code and in data.php we will write php script now first we have open index dot php file so in this file we have already included jakari library chart.js library and bootstrap library link first under this page we want to create one poll layout so user can submit their review and based on that review we will make dynamic chart on web page so here we have write poll question like which is popular programming languages in year 2021 and below this we want to display three option for this here we have write input type is equal to radio with name equal to programming language id is equal to programming language 1 and in radio button text we have write php so it will display php option same for second option we have write input type is equal to radio with name equal to programming language id is equal to programming language 2 and in radio button text we have write node.js so it will display node.js option and for third option we have write input type is equal to radio with name equal to programming language id is equal to programming language 3 and in radio button text we have write python so it will display python option after create three option now we want to create one button for send survey data to php script so here we have write input type is equal to button name is equal to submit data and id is equal to submit data so when user has click on this button then their data will be sent to server now we have go to write curry code so here we have write dollar with button id submit data with click event so when user has click on button then this block of code will execute under this first we have write language variable is equal to dollar with input name is equal to programming language with double colon checked with value method so this code will fetch value of selected radio button value and store under this language variable below this we have start write ajax request and under this we have write first option url which set to data.php so it will send request to data to php file in second option we have write method and here we have write post so it will use post method for send data to server in third option we have write data and under this option we can define which data we want send to server so here we have define action variable with value insert and language variable value has been sent as data to server in fourth option we have write before send callback function this function will be called before ajax request has been sent so under this function we have write dollar with submit button id submit data with attribute method and under this we have write disabled attribute so it will disable submit button once user has click on button and in last ajax option we have write success callback function so this function will be called if ajax request has been completed successfully and it will receive data from server under this first we want to enable submit button so here we have right dollar with submit button id submit data with attribute method and under this method we have set disabled attribute property to false so it will enable submit button next we want to reset option selection so for this here we have write dollar with first radio option id programming language1 with prop method and under this we have right checked attribute so it will select first option after this we want to remove selection from second option so here we have write dollar with second option id programming language 2 with prop method and under this we have change value of checked attribute to false and same way we want to remove selection from third option so here we have right dollar with third option id programming language three with prop method and under this we have change value of checked attribute to false so this way we can reset option selection lastly we want to display succs's alert message so here we have right alert and under this we have write message like your feedback has been sent so this message will pop up on web page now we have go to data.php file and here we have write dollar connect variable is equal to new do class with three option like mysql host is equal to localhost database name set to testing username set to root and password set to blank value so this code will make database connection below this we have write if statement and under condition we have right is set function and under this we have write dollar post action variable so if this variable value is set then it will execute if block of code under this block we have write if statement and under condition we have write dollar post action variable value is equal to insert so if this variable value is set then it will execute if block of code under this block we have write dollar data variable is equal to array and in array key we have write double colon language and in value we have write dollar post language variable below this array variable we have write dollar query variable is equal to insert into survey table with table column like language and values like double colon language so this query will insert data into survey table now we have write dollar statement variable is equal to dollar connect variable with prepare statement and under this we have write dollar query variable so it will make query for execution next we want to execute query so here we have write dollar statement variable with execute method and under this we have write dollar data variable so it will execute above insert query and it will insert data into database table lastly we want to send response to ajax request so here we have write echo statement with done message so here our store poll data in database code is ready now we have check output in browser friends here we can see that when page has been load in browser then on web page we can see that one question on web page with three options like php node.js and python below this question we can see that one submit button so when we have click on submit button then selected option value will be stored in database here we can see that by default php has been selected so we have click on php so after click on php here we can see that one message has been pop-up in browser with message like your feedback has been sent now in database table here we can see that php has been stored in survey table now we want to load this data in graph or chart by using chart.js library so we have go to index.php file here we will load data in pie chart donut chart and in bar chart so for load data in pie chart here we have create one canvas field with id is equal to pie chart so under this we will load data in pie chart same way for load data in donut chart here we have create one canvas field with id is equal to donut chart and same way for load data in bar chart here we have create canvas field with id is equal to bar chart so now here our html code is ready now we have go to curry code part and here we have create one make chart function this function will send ajax request for fetch data and then after it will load data in dynamic chart so under this function we have start write ajax request with first option url set to data.php so it will send request to data.php file in second option we have write method and here we have use post method so it will use post method for send data to server in third option we have write data and under this option we have write action key with value fetch so it will send this data to php script in fourth option we have write data type and here we have defined json data type so it will receive data in json format and in last option we have write success callback function this function will be called if ajax request completed successfully and it will receive data in json format under this function we will write code after completing write code in data.php file so we have go to data.php file so here we have write if statement and under condition we have write dollar post action variable value is equal to fetch if this condition true then it will execute if block of code under this block we have write dollar query variable is equal to select language count survey id as total from survey table group by language this select query fetch survey data from database below this query we have write dollar result variable is equal to dollar connect variable with query method and under this we have write dollar query this method will execute above query and return back query execution result in array format now we have write dollar data variable is equal to array under this variable we will store survey table data so for this here we have right for each loop and under condition we have write dollar result variable as dollar row variable under this loop we have write dollar data variable is equal to array in array first key we have right language and in value we have write dollar row language variable in second key we have write total and in value we have write dollar row total variable and in array last key we have right color and in value we have write hashtag with php random function so it will randomly create color value so here we have store data in dollar data variable now we want to send this data to ajax request in json format so here we have write echo statement with json encode method and under this we have write dollar data variable so here our php script is ready now we have go to index.php file and here under success function we have create language variable total variable and color variable under this variable we will store data which it will received from server so for this here we have right for loop and under condition we have write count variable value is equal to zero count variable value is less than equal to value of data dot length and count variable value increment by one under this loop we have write language dot push method and under this we have write data with count index dot language variable so it will store data in language variable same way for store data in total variable here we have write total variable dot push method and under this we have write data with count index dot total variable and for store data in color variable in array format here we have write color dot push method and under this we have write data with count index dot color variable so on every loop it will store data under this three variable below this we have create one chart data variable this variable we will use for display data on chart under this variable we have write labels key and in value we have write language variable and below this we have create data sets variable under this we have first write label key and in value we have write vote text this text will be display in tooltip for set background color of chart or graph here we have right background color key and in value we have right color array variable for set font color here we have right color key and in value we have write white and for display data here we have write data key and in value we have write total array variable for define other property of chart here we have write create one options variable under this variable we have write responsive key which value we have set to true so chart will responsive next we want to start chart value from zero so here we have right scales key and under this we have right y axis so by this we can set the value of y axis and under this we have create one text key and under this we have write minimum properties set to zero so bar chart y axis values start with zero now for create pie chart first we have store destination of pie chart in variable so here we have write graph target one variable is equal to dollar with canvas id pie chart next for draw pie chart here we have write graph one variable is equal to new chart class with two argument in first argument we have write graph target one variable and in second argument we have write array and in first key we have write chart type which has been set to pi and in second key we have write data and in value we have write chart data variable so it will load this variable data in pie chart now for create donut chart first we have to store destination of donut chart in variable so here we have write graph target 2 variable is equal to dollar with canvas id donut chart next for draw donut chart here we have write graph two variable is equal to new chart class with two argument in first argument we have write graph target two variable and in second argument we have right array and in array first key we have write chart type which has been set to donut and in second key we have write data and in value we have write chart data variable so it will load this variable data on donut chart now for create bar chart first we have to store destination of bar chart in variable so here we have write graph target 3 variable is equal to dollar with canvas id bar chart next for drawbar chart here we have write graph 3 variable is equal to new chart class with two arguments in first argument we have write graph target 3 variable and in second argument we have write array and in array first key we have write chart type which has been set to bar and in second key we have write data and in value we have write chart data variable so it will load this variable data in pie chart in bar chart we have to start chart with zero number so for this here we have write options key and in value we have write options so here our function is ready now here we have called this function so when page has been load then it will call this function and display chart on web page same way we want to refresh chart data when someone has submits away so here also we have called this function so here our code is ready now we have check output in browser friends first we have refresh web page and after refresh of page here below submit button we can see three chart has been displayed now in above question we have select python and then after we have click on submit button after click on submit button here we can see that chart data has been changed in all chart without refresh of web page now again we have go to question and select second option and click on submit button so after click on submit button here we can see chart data has been refreshed because here we have use ajax so friends this way we can create dynamic pie chart donut chart and bar chart in php by using chart.js library with ajax and we can create dynamic or live chart in php using chart.js library with ajax lastly if you have any query or inputs regarding this tutorial you can ask your query in comment box if you have liked this video please share with your friends or even you can also share on social media also and lastly don't forget to subscribe our channel for future video tutorials

Channel: Webslesson

Views: 14,997

Keywords: chartjs php, chartjs ajax, chart.js, chart.js bar chart example, chart.js tutorial, chart.js php example, chart js php mysql tutorial, chart js php ajax, pie chart js php, chart js mysql php json, php mysql ajax chart.js, php chart.js, php ajax chart.js, php and chart.js, create chart using chart.js, create chart with chart js, create pie chart using chart.js, create bar chart using chart.js, create dynamic chart with chart.js, create dynamic bar chart in php, web development

Id: QQgMWLxYCuA

Length: 24min 54sec (1494 seconds)

Published: Fri Jun 04 2021