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.







100 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