“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,
};
BarChart
ColumnChart
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
Nice and helpful tutorial for creating the charts. Can we create graphs using the same approach?
Yes you can 🙂
it will help you to create dynamic graph using MySQL data
Very well done. The most concise, functional demo I found on this. Many thanks.
Hi Charles,
Glad to know that you like the post. thanks for stopping and commenting here.
Thank you very much for the information and like someone else said, it is the clearest of information I have seen on GoogleChart and PHPMySQL.
Hi Mohi,
Very glad to know that you like the Post and it helps you. Thanks for Stopping and commenting here.
what about the line chart?
Hi, Naveen
Put – var chart = new google.visualization.LineChart(document.getElementById(‘curve_chart’));
in your code For Line Chart. Thanks.
Reference Link if you need more help
https://developers.google.com/chart/interactive/docs/gallery/linechart
thanks bro, by the way for donut chart its working but not for line chart
linechart
google.load(“visualization”, “1”, {packages:[“curvechart”]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.DataTable([
[‘scaling’,’scalddata’],
]);
var options = {
title: ‘report’,
hAxis: {
title: ‘scaling’
},
vAxis: {
title: ‘scaleddata’
},
series: {
1: {
curveType: ‘function’},
legend: { position: ‘bottom’
},
}
};
var chart = new google.visualization.LineChart(document.getElementById(‘curve_chart’));
chart.draw(data,options);
}
after this execution im getting blank page bro and ive connected mysql i didnt paste that here
Hey Hi,
Sorry For Late Reply, I’m busy with Some Stuff. Put Data after your line graph name (Scaling and Scale data). Hope It Will Work. If Not Pls mail your code on which you are working techjunkgigs at gmail dot com