Friday, 4 June 2021

Dynamic Pie, Doughnut & Bar Chart in PHP using Chart.js


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.


Dynamic Pie, Doughnut & Bar Chart in PHP using Chart.js






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.







193 comments:

  1. rajko.bulatovic20@gmail.com
    I want to get complete source with .sql file.
    Thank you.

    ReplyDelete
  2. I want to get complete source with .sql file.
    Thank you.

    rajko.bulatovic20@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  3. Hey can you send me source code at crazhyx@gmail.com ? Thank:)

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  4. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  5. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  6. Replies
    1. This 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.

      Delete
  7. thanks for your tutorial.
    I need the source code.
    as.moini@gmail.com

    ReplyDelete
  8. mon mail : mbadingarufin@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  9. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  10. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  11. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
    2. Good work. Thank you

      Delete
  12. Replies
    1. Please share your email address, we will send source code file at your email address.

      Delete
  13. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  14. Replies
    1. This 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.

      Delete
  15. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  16. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  17. narimane90.sara@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  18. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  19. fahmi.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

    ReplyDelete
  20. Replies
    1. Please share your email address, we will send source code file at your email address.

      Delete
  21. Replies
    1. Please share your email address, we will send source code file at your email address.

      Delete
  22. luisrubioangel.2017@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  23. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  24. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  25. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  26. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  27. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  28. I want to get complete source code
    Thank you.
    mmisfer@gmail.com

    ReplyDelete
  29. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  30. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  31. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  32. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  33. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  34. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  35. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  36. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  37. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  38. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  39. Thanks...������

    ReplyDelete
  40. How to change dynamic scale grap...

    ReplyDelete
  41. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  42. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  43. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  44. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  45. clarkchestercasuyon.nittsu@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  46. teivel1994@hotmail.com

    Can I get the complete source code? Thanks

    ReplyDelete
  47. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  48. urmilamahajan1995@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  49. bajuhitam400@gmail.com

    thank you

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  50. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  51. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  52. Complete Source code please..
    Thank you.

    ReplyDelete
    Replies
    1. Please share your email, we will send you source code file at your email address.

      Delete
  53. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  54. noelsonfenohasina07@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  55. milos.stojanovic.k@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
    2. Received. Thanks a lot.

      Delete
  56. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  57. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  58. please send me the source code

    faizhaikal3@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  59. for this project you did 1 form and 3 chart. what if i want to do 3 form and each form output has 1 chart.

    ReplyDelete
  60. malicefal00@gmail.com
    thanks a lot

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
    2. Thank you very much. I've received it. It helps me a lot..

      Delete
  61. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  62. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  63. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  64. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  65. I want to get complete source with .sql file.
    Thank you.

    Xbcctxress@gmail.com

    ReplyDelete
    Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  66. Can I get the complete source code? Thanks

    ReplyDelete
  67. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  68. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  69. Replies
    1. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  70. desairahulinrd000@gmail.com
    Thank You

    ReplyDelete
  71. bonomedea1@gmail.com
    source codes pleaz... weblesson

    ReplyDelete
  72. my email has been confirmed.
    source code not recieved.

    ReplyDelete
  73. I need the source code please

    ReplyDelete
  74. please, send me sources codes

    ReplyDelete
  75. Sir, may i have the sql file?

    ReplyDelete
  76. Thank you. I have taken your code to make a little exercise:

    use vanilla javascript with fetch() API instead of JQuery

    the lines of code are unchanged!!!

    here you the code
    https://jsfiddle.net/ckrmtyne/

    ReplyDelete
  77. Awesome work and thank you very much.

    ReplyDelete
  78. Thanks for your service boss. I request that if possible you add a range of date picker and see how it works. thanks.

    ReplyDelete
  79. Thanks for your service boss. I request that if possible you add a range of date picker and see how it works. thanks.

    ReplyDelete
  80. Can you add the axis labeling and total of the value ?

    ReplyDelete
  81. Hi, how to show datalabels or values and total on the slices ?

    ReplyDelete