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.







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

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

      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. 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
  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. 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. I want to get complete source code
    Thank you.
    mmisfer@gmail.com

    ReplyDelete
  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. 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. Thanks...������

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

    ReplyDelete
  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. 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. 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
  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. 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
  50. teivel1994@hotmail.com

    Can I get the complete source code? Thanks

    ReplyDelete
  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. 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
  53. 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
  54. 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. 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. 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
  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. 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
  59. 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
  60. 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. 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. 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
  64. 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
  65. 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
  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. 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. 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
  71. 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
  72. Can I get the complete source code? Thanks

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

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

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

    ReplyDelete
  79. I need the source code please

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

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

    ReplyDelete
  83. 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
  84. Awesome work and thank you very much.

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

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

    ReplyDelete