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.







204 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. 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. 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
  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. Please check your email, we have send source code file on this email address. If you have received or not, please confirm here.

      Delete
  7. 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
  8. thanks for your tutorial.
    I need the source code.
    as.moini@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. 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
  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
  12. 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
  13. Replies
    1. Please share your email address, we will send source code file at your email address.

      Delete
  14. 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
  15. 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
  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. 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. 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
  19. 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
  20. 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
  21. 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
  22. 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
    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 share your email address, we will send source code file at your email address.

      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 share your email address, we will send source code file at your email address.

      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. 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
  28. 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
  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. I want to get complete source code
    Thank you.
    mmisfer@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
  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. 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
  40. 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
  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. Thanks...������

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

    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. 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. 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. 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
  53. 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
  54. teivel1994@hotmail.com

    Can I get the complete source code? Thanks

    ReplyDelete
  55. 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
  56. 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
  57. 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
  58. 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. 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
  60. melusi.nene.career@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
  61. 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
  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. 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
  64. 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
  65. 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. 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
  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. 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
  69. 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
  70. 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
  71. 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
  72. 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
  73. 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
  74. 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
  75. 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
  76. 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
  77. Can I get the complete source code? Thanks

    ReplyDelete
  78. 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
  79. 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
  80. 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
  81. desairahulinrd000@gmail.com
    Thank You

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

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

    ReplyDelete
  84. I need the source code please

    ReplyDelete
  85. 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
  86. please, send me sources codes

    ReplyDelete