If you need to envision statistical data, then Graphs are one of good approach of displaying data in short picture. With the help of graphs or chart, we can easily understand the data. If you have search on internet then there different chart libraries like Google Chart, Highcharts, morris.js, chart.js and many more.
In some previous tutorial, we have already published tutorial on how to use Google Chart library and morris.js library. Now in this tutorial, we will create dynamic pie chart, doughnut and bar chart in PHP with Dynamic data using Chart.js library and Ajax. We will create live chart that means when data change chart will automatically change without refresh of web page.
Here you can find the solution fo creating chart using chart.js in a very and easy way. In this tutorial, we will create chart or graph by using retrieve data from database and load on chart. Here we will make one simple Poll application, and poll data will display via pie chart or doughnut chart or bar chart and this poll data will be fetch from Mysql database. Below you can find the screen short in which how data pie chart, doughnut chart and bar chart has been made by using chart.js library.
HTML 5 Canvas Chart
First we need to download chartjs library from Github or directly put online cdn link at the header of web page. After this in this HTML landing page, first we have to create one Poll question with three option and one submit button by using HTML Code.
After this for create Chart.js chart, here we have to create three canvas field. After create canvas field we need to send Ajax request to PHP script for fetch Poll data from database. So this ajax request will received data in JSON format and that data will parsed and supplied as the parameter into the Char.js function for create different type of graph like pie chart, doughnut chart and bar chart. Below you can find source code of index.php file.
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>How to Create Dynamic Chart in PHP using Chart.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
</head>
<body>
<div class="container">
<h2 class="text-center mt-4 mb-3">How to Create Dynamic Chart in PHP using Chart.js</a></h2>
<div class="card">
<div class="card-header">Sample Survey</div>
<div class="card-body">
<div class="form-group">
<h2 class="mb-4">Which is Popular Programming Language in 2021?</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="programming_language" class="programming_language" id="programming_language_1" value="PHP" checked>
<label class="form-check-label mb-2" for="programming_language_1">PHP</label>
</div>
<div class="form-check">
<input type="radio" name="programming_language" id="programming_language_2" class="form-check-input" value="Node.js">
<label class="form-check-label mb-2" for="programming_language_2">Node.js</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="programming_language" class="programming_language" id="programming_language_3" value="Python">
<label class="form-check-label mb-3" for="programming_language_3">Python</label>
</div>
</div>
<div class="form-group">
<button type="button" name="submit_data" class="btn btn-primary" id="submit_data">Submit</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="card mt-4">
<div class="card-header">Pie Chart</div>
<div class="card-body">
<div class="chart-container pie-chart">
<canvas id="pie_chart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mt-4">
<div class="card-header">Doughnut Chart</div>
<div class="card-body">
<div class="chart-container pie-chart">
<canvas id="doughnut_chart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mt-4 mb-4">
<div class="card-header">Bar Chart</div>
<div class="card-body">
<div class="chart-container pie-chart">
<canvas id="bar_chart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#submit_data').click(function(){
var language = $('input[name=programming_language]:checked').val();
$.ajax({
url:"data.php",
method:"POST",
data:{action:'insert', language:language},
beforeSend:function()
{
$('#submit_data').attr('disabled', 'disabled');
},
success:function(data)
{
$('#submit_data').attr('disabled', false);
$('#programming_language_1').prop('checked', 'checked');
$('#programming_language_2').prop('checked', false);
$('#programming_language_3').prop('checked', false);
alert("Your Feedback has been send...");
makechart();
}
})
});
makechart();
function makechart()
{
$.ajax({
url:"data.php",
method:"POST",
data:{action:'fetch'},
dataType:"JSON",
success:function(data)
{
var language = [];
var total = [];
var color = [];
for(var count = 0; count < data.length; count++)
{
language.push(data[count].language);
total.push(data[count].total);
color.push(data[count].color);
}
var chart_data = {
labels:language,
datasets:[
{
label:'Vote',
backgroundColor:color,
color:'#fff',
data:total
}
]
};
var options = {
responsive:true,
scales:{
yAxes:[{
ticks:{
min:0
}
}]
}
};
var group_chart1 = $('#pie_chart');
var graph1 = new Chart(group_chart1, {
type:"pie",
data:chart_data
});
var group_chart2 = $('#doughnut_chart');
var graph2 = new Chart(group_chart2, {
type:"doughnut",
data:chart_data
});
var group_chart3 = $('#bar_chart');
var graph3 = new Chart(group_chart3, {
type:'bar',
data:chart_data,
options:options
});
}
})
}
});
</script>
PHP Script for Fetch Poll Data from Mysql Database
In this tutorial, we have php file with name data.php. This file will execute via AJAX request for fetch Poll data from database and after fetching data it will return data to AJAX request in JSON format. Below you can find the source of data.php file.
data.php
<?php
//data.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
if(isset($_POST["action"]))
{
if($_POST["action"] == 'insert')
{
$data = array(
':language' => $_POST["language"]
);
$query = "
INSERT INTO survey_table
(language) VALUES (:language)
";
$statement = $connect->prepare($query);
$statement->execute($data);
echo 'done';
}
if($_POST["action"] == 'fetch')
{
$query = "
SELECT language, COUNT(survey_id) AS Total
FROM survey_table
GROUP BY language
";
$result = $connect->query($query);
$data = array();
foreach($result as $row)
{
$data[] = array(
'language' => $row["language"],
'total' => $row["Total"],
'color' => '#' . rand(100000, 999999) . ''
);
}
echo json_encode($data);
}
}
?>
If you want to get complete source with .sql file, so please write your email address in comment box. We will send you complete source code file at your define email address.
rajko.bulatovic20@gmail.com
ReplyDeleteI want to get complete source with .sql file.
Thank you.
I want to get complete source with .sql file.
ReplyDeleteThank you.
rajko.bulatovic20@gmail.com
Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteI can't get it by email
Deletehishmost@gmail.com
ReplyDeleteHey can you send me source code at crazhyx@gmail.com ? Thank:)
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletenice charts
ReplyDeletewilbertd1563@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletebipulroycse@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteVery Nice Tutorials
ReplyDeletemcezr1a@gmail.com
ReplyDeleteThis is wrong email address, please share your proper email address. Because when we have send source code file on this email, then we have received address not found error has been received.
DeleteNice
ReplyDeletethanks for your tutorial.
ReplyDeleteI need the source code.
as.moini@gmail.com
mon mail : mbadingarufin@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletenizarmanger@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletenizarmohamed@email.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteThay ok
ReplyDeletejb8@pm.me
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteGood work. Thank you
DeleteCódigo Fonte?
ReplyDeletePlease share your email address, we will send source code file at your email address.
Deletecomerciozapp@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletewdjshabaz@gmail.com
ReplyDeleteThis is wrong email address, please share your proper email address. Because when we have send source code file on this email, then we have received address not found error has been received.
Deletegood work
ReplyDeletehamzadinho2@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletesamuelfoco@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteThanks!!!
Deletenarimane90.sara@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletesyassiilyas@gmail.com
ReplyDeletesyriusblack74@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteemirsiriner1@gmail.com
ReplyDeletefahmi.nsk@gmail.com. Hi, I've been following your tutorial for a long time. You really helped me learn PHP from scratch until now I can make several projects in my work. greetings from Indonesia
ReplyDeletesend
ReplyDeletePlease share your email address, we will send source code file at your email address.
Deleteneed soft copy, please.
ReplyDeletePlease share your email address, we will send source code file at your email address.
Deletequanluong4646@gmail.com
ReplyDeletequanluong4646@gmail.com
ReplyDeleteluisrubioangel.2017@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletechuksan01@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleterokoangami17@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletegeorge_fcp99@yahoo.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletemymohammad24@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletegeeth86723@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteI want to get complete source code
ReplyDeleteThank you.
mmisfer@gmail.com
israchaabani4@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletevadlamanisiva@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletegeeth86723@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletemuinuddinmarouf@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletegeorgeweiss600@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletepatenst132@gmail.com
ReplyDeletesa.leonhardd@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteelyarabdusami@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletemrejderya@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletejsanchez@idimad360.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteula.mauro.culeca@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteThanks...������
ReplyDeleteHow to change dynamic scale grap...
ReplyDeletethis lesson is good for me!
ReplyDeletegood lesson
ReplyDeletebrahmadeba64@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletebaguscyber04@gmail.com
ReplyDeletebaguscyber04@gmail.com
ReplyDeletefaitonghk@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteok
ReplyDeleterichedayamga15@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleterajkmag@gmail.com
ReplyDeleterokoangami17@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteclarkchestercasuyon.nittsu@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteteivel1994@hotmail.com
ReplyDeleteCan I get the complete source code? Thanks
teivel1994@hotmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteurmilamahajan1995@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletebajuhitam400@gmail.com
ReplyDeletethank you
Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletemigueuniminuto@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletejtjoel11@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletemelusi.nene.career@gmail.com
ReplyDeleteComplete Source code please..
ReplyDeleteThank you.
Please share your email, we will send you source code file at your email address.
Deletedevloper.id@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletenoelsonfenohasina07@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletemilos.stojanovic.k@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteReceived. Thanks a lot.
Deleteichul0420@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletemehdy.prog@gmail.com
ReplyDeleteabdazyz70@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteplease send me the source code
ReplyDeletefaizhaikal3@gmail.com
Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletefor this project you did 1 form and 3 chart. what if i want to do 3 form and each form output has 1 chart.
ReplyDeletemalicefal00@gmail.com
ReplyDeletethanks a lot
Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteThank you very much. I've received it. It helps me a lot..
Deletepalaniramu199@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletelealdaniel00@gmail.com
ReplyDeletefahed.shehab@paltel.ps
ReplyDeletefahed.shehab@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteleivajose14@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleterobot.rmutsv@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteI want to get complete source with .sql file.
ReplyDeleteThank you.
Xbcctxress@gmail.com
Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.
DeleteCan I get the complete source code? Thanks
ReplyDeletebackupemail85@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleterams@igreensystesm.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deletetomsah@gmail.com
ReplyDeletePlease check your email, we have send source code file on this email address. If you have received or not, please confirm here.
Deleteozzy-david@hotmail.com
ReplyDeletejavierderio850@gmail.com
ReplyDeletedesairahulinrd000@gmail.com
ReplyDeleteThank You
ssorker.bd@gmail.com
ReplyDeletebonomedea1@gmail.com
ReplyDeletebonomedea1@gmail.com
ReplyDeletesource codes pleaz... weblesson
my email has been confirmed.
ReplyDeletesource code not recieved.
azzamchomeyy@gmail.com
ReplyDeletenice job
ReplyDeleteaoefta63@gmail.com
ReplyDeletebackupemail85@gmail.com
ReplyDeletelidget987@gmail.com
ReplyDeleteandaman5654@gmail.com
ReplyDeletenishchaypandya461012@gmail.com
ReplyDeleterokoangami17@gmail.com
ReplyDeleteI need the source code please
ReplyDeletejohnstanley669@gmail.com
ReplyDeleteThank you
ReplyDeleterokoangami16@gmail.com
ReplyDeletedanduhman@gmail.com
ReplyDeletesk787618@gmail.com
ReplyDeletexulprint@gmail.com
ReplyDeleteAwesome Code Loveit
ReplyDeletesupper
ReplyDeleteplease, send me sources codes
ReplyDeleteHi source code needed
ReplyDeletehii
ReplyDeleteExcelente
ReplyDeleteNice
ReplyDeleteThinks bro
ReplyDeleteSir, may i have the sql file?
ReplyDeletegood
ReplyDeleteThank you. I have taken your code to make a little exercise:
ReplyDeleteuse vanilla javascript with fetch() API instead of JQuery
the lines of code are unchanged!!!
here you the code
https://jsfiddle.net/ckrmtyne/
Awesome work and thank you very much.
ReplyDeleteThanks for your service boss. I request that if possible you add a range of date picker and see how it works. thanks.
ReplyDeleteThanks for your service boss. I request that if possible you add a range of date picker and see how it works. thanks.
ReplyDeleteCan you add the axis labeling and total of the value ?
ReplyDeleteHi, how to show datalabels or values and total on the slices ?
ReplyDelete