Hello friends in this tutorial we are going to learn something new topic. In this post we will make simple pie chart by using Google chart library with php script and mysql database. This advance topic in web development with php programming. For making pie chart we will use Google chart library for making pie chart and we have pass mysql data by using php programming in json format. Because Google chart library only work with data in json format. If you have developed any analytics project and you have to display data result into any type of chart. Then you can use Google chart Library that provides very powerful chart making tools that you can use for making charts very simple and in this web development tutorial we will describe you how to use Google charts with PHP and Mysql data. Here we have load Google chart library and then after we have define the package of Google chart library. By using this loader we can make different type of chart like bar, column, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram, scatter. As per your requirement you can make different type of chart as per your requirement. You can display large number of data converted into different type of chart as per your requirement. Then after we have added data into Google chart library class and after this we have define which type of chart you want to draw, here we have define pie chart and after this we have set different options of chart and lastly we have draw chart by using draw function. This way we have create simple pie chart by using Google chart library with php script and mysql database. By using php and mysql data with Google chart library we can make dynamic chart.
Source Code
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT gender, count(*) as number FROM tbl_employee GROUP BY gender";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Make Simple Pie Chart by Google Chart API with PHP Mysql</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visualization.arrayToDataTable([
['Gender', 'Number'],
<?php
while($row = mysqli_fetch_array($result))
{
echo "['".$row["gender"]."', ".$row["number"]."],";
}
?>
]);
var options = {
title: 'Percentage of Male and Female Employee',
//is3D:true,
pieHole: 0.4
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<br /><br />
<div style="width:900px;">
<h3 align="center">Make Simple Pie Chart by Google Chart API with PHP Mysql</h3>
<br />
<div id="piechart" style="width: 900px; height: 500px;"></div>
</div>
</body>
</html>
tbl_employee
--
-- Table structure for table `tbl_employee`
--
CREATE TABLE IF NOT EXISTS `tbl_employee` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`address` text NOT NULL,
`gender` varchar(10) NOT NULL,
`designation` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=187 ;
--
-- Dumping data for table `tbl_employee`
--
INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(1, 'Bruce Tom', '656 Edsel Road\r\nSherman Oaks, CA 91403', 'Male', 'Driver', 36, '1.jpg'),
(5, 'Clara Gilliam', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Female', 'Programmer', 24, '2.jpg'),
(6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26, '3.jpg'),
(7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 32, '4.jpg'),
(8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29, '5.jpg'),
(175, 'Ronald D. Colella', '1571 Bingamon Branch Road, Barrington, IL 60010', 'Male', 'Top executive', 32, '6.jpg'),
(174, 'Martha B. Tomlinson', '4005 Bird Spring Lane, Houston, TX 77002', 'Female', 'Systems programmer', 38, '7.jpg'),
(161, 'Glenda J. Stewart', '3482 Pursglove Court, Rossburg, OH 45362', 'Female', 'Cost consultant', 28, '8.jpg'),
(162, 'Jarrod D. Jones', '3827 Bingamon Road, Garfield Heights, OH 44125', 'Male', 'Manpower development advisor', 64, '9.jpg'),
(163, 'William C. Wright', '2653 Pyramid Valley Road, Cedar Rapids, IA 52404', 'Male', 'Political geographer', 33, '10.jpg'),
(178, 'Sara K. Ebert', '1197 Nelm Street\r\nMc Lean, VA 22102', 'Female', 'Billing machine operator', 50, ''),
(177, 'Patricia L. Scott', '1584 Dennison Street\r\nModesto, CA 95354', 'Female', 'Urban and regional planner', 54, ''),
(179, 'James K. Ridgway', '3462 Jody Road\r\nWayne, PA 19088', 'Female', 'Recreation leader', 41, ''),
(180, 'Stephen A. Crook', '448 Deercove Drive\r\nDallas, TX 75201', 'Male', 'Optical goods worker', 36, ''),
(181, 'Kimberly J. Ellis', '4905 Holt Street\r\nFort Lauderdale, FL 33301', 'Male', 'Dressing room attendant', 24, ''),
(182, 'Elizabeth N. Bradley', '1399 Randall Drive\r\nHonolulu, HI 96819', 'Female', ' Software quality assurance analyst', 25, ''),
(183, 'Steve John', '108, Vile Parle, CL', 'Male', 'Software Engineer', 29, ''),
(184, 'Marks Johnson', '021, Big street, NY', 'Male', 'Head of IT', 41, ''),
(185, 'Mak Pub', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 40, ''),
(186, 'Louis C. Charmis', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 40, '');
Hello Sir !
ReplyDeleteYour this tutorial was really very awesome !
..
Can you please make a tutorial on chart in which suppose dates are displaying on x-axis and years on y-axis and % of attendance is displaying on the bars while all the data coming from mysql??
..
I have tried it many times but failed to do so..
It will be your great favor to me ..
..
Regards :)
you Guy all your tutorials are awesome please keep it up we appreciate so please keep it up.
ReplyDeleteThank You
ReplyDeleteHello, when i run this code in browser.
ReplyDeletei could see code on the browser but not pie charts
please respond ASAP
Hi Sir what an easy way to do it but a little problem how can we manipulate the data and count it , put it beside as a label
ReplyDeletenice....!!!!
ReplyDeletegreat videos of piechart sir please uploads it and PHP MVC..!!!
I wish this worked for me. I've created the exact same table on my database, used the exact same code (except for my connection credentials to the duplicate table I've created), I get no chart and the message "No Data" where the legend should be. I've checked that my connection the database works and it does. Any ideas out there as to what's going wrong for me?
ReplyDeleteAfter 5 hours searching.. A simple and most accurate code that im serching for..tq so much..
ReplyDeleteI try more than 5 Codes but didn't find the right solution. Thanks alot men it finally work
ReplyDeletemuito obrigado pela explicação. excelente vídeo!!! parabéns!!!!
ReplyDeletemuito obrigado pela explicação, excelente vídeo, parabéns!!!
ReplyDeletei am use codeigneiter, i have a problem
ReplyDeleteI have the yield of my 2% 50% to 50% of the graph that should be 9.1% 9.1% that way. Could you help ?
is my code : foreach ($sorgumuz as $sorgumuz){
$veri = $sorgumuz->istasyon_durumu;
$sayi = (($sorgumuz->istasyon));
echo "['".$veri."','".$sayi."'],";
}
it's not working on server
ReplyDeleteHere is the super extra 20x fast server and cheap best and cheapest web hosting service to grow your big and small business on all search engine & get more sales or traffic, 70% blast discount, 24 hour live chat support.
ReplyDeleteOnce again Thanks,
ReplyDeleteCan you just tell me how can I add at the top the vaule?
appreciate
ReplyDeleteI had tried so many Codes but I could not find the right solution. Thanks a lot Sir.
ReplyDeleteBut
How do I add another such chart on same page?
Kindly please help. Thank you sir.