“Google Charts in PHP with MySQL Database using Google API”, Pie Chart, Column Chart, Bar Chart, Line Chart. Charts or graph are used for graphical representation of data and are useful when you want to show your data or information in quick overview format.
Today we will discuss about Google charts with PHP and MySQL database. Google chart are best option on web to show your information in graphical way. You can create charts very quickly by using Google chart. It is simple to use and free. It connect to data in real time using a variety of data connection tool. You can customize it according to need like increasing size of graph and change color of graph and make your application more interactive by adding interactive chart gallery.
Table of Contents
Create table in MySQL Database
CREATE TABLE IF NOT EXISTS `class` ( `id` int(11) NOT NULL, `class_name` varchar(20) NOT NULL, `students` int(11) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
Insert Data into Table
INSERT INTO `class` (`id`, `class_name`, `students`) VALUES (1, '7th class', 48), (2, '8th class', 49), (3, '9th glass', 32), (4, '10th class', 62);
Database Connection
<?php
$con = mysqli_connect('localhost','root','','cbir');
?>
Here ‘cbir’ is the database name which is i’m using
PHP code for retrieving data from database
<?php
$query = "SELECT * from class";
$exec = mysqli_query($con,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".$row['class_name']."',".$row['students']."],";
}
?>
All code together for Pie chart.
<?php
$con = mysqli_connect('localhost','root','warenow1234','cbir');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TechJunkGigs</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['class Name','Students'],
<?php
$query = "SELECT * from class";
$exec = mysqli_query($con,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".$row['class_name']."',".$row['students']."],";
}
?>
]);
var options = {
title: 'Number of Students according to their class',
pieHole: 0.5,
pieSliceTextStyle: {
color: 'black',
},
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById("columnchart12"));
chart.draw(data,options);
}
</script>
</head>
<body>
<div class="container-fluid">
<div id="columnchart12" style="width: 100%; height: 500px;"></div>
</div>
</body>
</html>
Here is the result we generated
For other chart we need only change the chart name on below code
var chart = new google.visualization.PieChart(document.getElementById("columnchart12"));
chart.draw(data,options);
new google.visualization.PieChart (……………………………………..)
Donut Chart
For donut chart we don’t change PieChart because donut chart is the form pie chart with hole in center
so you change in code like
var options = {
title: 'Number of Students according to their class',
pieHole: 0.4,
};
So that’s all for this “Google Charts with PHP and MySQL Database” friends. We learned how to create google chart with PHP and MySQL data. if you found it helpful then, please SHARE. Thank You