Cara Menggunakan Google Chart (Pie Chart) Menggunakan PHP MySQL

Selamat malam, kembalilagi bersama kami admin tutorialswb, kali ini kami akan share bagaimana menggunakan Google Chart (Pie Chart) Menggunakan PHP MySQL. Pada postingan sebelumnya kami telah membahas beberapa racara menghubungkan google chart dengan php my admin, dimana chart yang kita gunakan terkoneksi dengan database MySql.

Read More:
1. Cara Menggunakan Google Chart (Line Chart) Pada PHP Part 1
2. Cara Menggunakan Google Chart (Line Chart) Pada PHP Part 2

Langsung saja yang pertama kalian harus persiapkan adalah membuat struktur databsenya terlebih dahulu, ini bertujuan untuk memudahkan kita dalam memanggilnya ketika sudah terhubung dengan google chart. Disini kalian harus membuat database terlebih dahulu dengan nama "chart" kemudian tambahkan tabel pada database chart dengan nama "tblcomplaints". Berikut database yang telah kami buat beserta isinya.


 -- phpMyAdmin SQL Dump
-- version 4.8.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jul 20, 2018 at 03:52 PM
-- Server version: 10.1.32-MariaDB
-- PHP Version: 7.2.5

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `chart`
--

--
-- Table structure for table `tblcomplaints`
--

CREATE TABLE `tblcomplaints` (
  `complaintNumber` int(11) NOT NULL,
  `room` varchar(50) NOT NULL,
  `status` varchar(25) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tblcomplaints`
--

INSERT INTO `tblcomplaints` (`complaintNumber`, `room`, `status`) VALUES
(1, 'Engineering and Technolog', 'in process'),
(2, 'Engineering and Technolog', 'in process'),
(3, 'Engineering and Technolog', 'in process'),
(4, 'Engineering and Technolog', 'closed'),
(5, 'Engineering and Technolog', 'in process'),
(6, 'Engineering and Technolog', 'in process'),
(7, 'Engineering and Technolog', 'in process'),
(8, 'Engineering and Technolog', NULL),
(9, 'Engineering and Technolog', NULL),
(10, 'Engineering and Technolog', NULL),
(11, 'Engineering and Technolog', 'in process'),
(12, 'Engineering and Technolog', 'in process'),
(13, 'Engineering and Technolog', 'closed'),
(14, 'Engineering and Technolog', NULL),
(15, 'Engineering and Technolog', NULL),
(16, 'Engineering and Technolog', NULL),
(17, 'Engineering and Technolog', NULL),
(18, 'Engineering and Technolog', NULL),
(19, 'Engineering and Technolog', NULL),
(20, 'Engineering and Technolog', NULL),
(21, 'Engineering and Technolog', NULL),
(22, 'Engineering and Technolog', NULL),
(23, 'Engineering and Technolog', 'closed'),
(24, 'Engineering and Technolog', 'in process'),
(25, 'Engineering and Technolog', NULL),
(26, 'Engineering and Technolog', NULL),
(27, 'Engineering and Technolog', NULL),
(28, 'Engineering and Technolog', NULL),
(29, 'Engineering and Technolog', NULL),
(30, 'Engineering and Technolog', 'in process'),
(31, 'Engineering and Technolog', NULL),
(32, 'Engineering and Technolog', NULL),
(33, 'Engineering and Technolog', NULL),
(34, 'Engineering and Technolog', NULL),
(35, 'Engineering and Technolog', NULL),
(36, 'Engineering and Technolog', NULL),
(37, 'Engineering and Technolog', 'closed'),
(38, 'Engineering and Technolog', NULL),
(39, 'Engineering and Technolog', NULL),
(40, 'Engineering and Technolog', NULL),
(41, 'Engineering and Technolog', NULL),
(42, 'Engineering and Technolog', 'in process'),
(43, 'Engineering and Technolog', NULL),
(44, 'Engineering and Technolog', 'in process'),
(45, 'Engineering and Technolog', NULL),
(46, 'Engineering and Technolog', NULL),
(47, 'Engineering and Technolog', NULL),
(48, 'Engineering and Technolog', NULL),
(49, 'Engineering and Technolog', NULL),
(50, 'Engineering and Technolog', NULL),
(51, 'Engineering and Technolog', NULL),
(52, 'Engineering and Technolog', NULL),
(53, 'Engineering and Technolog', 'closed'),
(54, 'Engineering and Technolog', NULL),
(55, 'Engineering and Technolog', 'in process'),
(56, 'Engineering and Technolog', NULL),
(57, 'Engineering and Technolog', NULL),
(58, 'Engineering and Technolog', NULL),
(59, 'Engineering and Technolog', NULL),
(60, 'Engineering and Technolog', NULL),
(61, 'Engineering and Technolog', 'in process'),
(62, 'Engineering and Technolog', NULL);

--
-- Indexes for table `tblcomplaints`
--
ALTER TABLE `tblcomplaints`
  ADD PRIMARY KEY (`complaintNumber`);


--
-- AUTO_INCREMENT for table `tblcomplaints`
--
ALTER TABLE `tblcomplaints`
  MODIFY `complaintNumber` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=63;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Berikutnya yang anda harus lakukan adalah membuat formnya dan memanggil database untuk di aplikasikan pada google chart, Pada form dibawah kami akan langsung menggabungkan form yang telah kami desain dengan google chart dan jangan lupa beri nama index.php pada formnya.

 <?php
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'chart');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
<!DOCTYPE html>
<html>
<head>
  <title>Chart</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <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([
          ['Task', 'All Complaint'],
    
    <?php
                $rt = mysqli_query($con,"SELECT * FROM tblcomplaints where status is null");
                $num1 = mysqli_num_rows($rt);
                {?>
          ['Not Process Yet Complaint', <?php echo htmlentities($num1); ?><?php } ?>],
    
    <?php 
                $status="in Process";                   
                $rt = mysqli_query($con,"SELECT * FROM tblcomplaints where status='$status'");
                $num1 = mysqli_num_rows($rt);
                {?>
          ['In Process Complaint',      <?php echo htmlentities($num1); ?><?php } ?>],
    
    <?php 
                $status="closed";                   
                $rt = mysqli_query($con,"SELECT * FROM tblcomplaints where status='$status'");
                $num1 = mysqli_num_rows($rt);
                {?>
          ['Closed Complaint', <?php echo htmlentities($num1); ?><?php } ?>]
        ]);

        var options = {
          title: 'Google Chart'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="#">Cara Menggunakan Google Chart (Pie Chart) Menggunakan PHP MySQL</a>
    </div>
 </div>
</nav>
<br />
<br />
 <div id="piechart" style="width: 900px; height: 500px;"></div>
</form>

</div>
</body>
</html> 

Kami sengaja langsung menggabungkan form di atas dengan google chart nya, jadi bagi temna-teman yang baru belajar menggunakan google chart dan belum paham dengan apa yang kami buat di atas silahkan tinggalkan koment dibawah, kami akan selalu membalasnya. dan jangan lupa berikut gambar dari hasil google chart di atas.


Kami sarankan anda mencoba sendiri supaya lebih mengerti, Sekian share singkat di atas,semoga apa yang kami share bermanfaat bagi anda.