Cara Menggunakan Google Chart (Line Chart) Pada PHP Part 1

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
June 04, 2018

Selamat siang sobat blogger kali ini kami akan share bagaimana menggunakan google chart dengan benar dan tepat. Kali ini kami akan mencoba menggunakan google chart dengan MySQL.

Kami rasa tak perlu lama mari kita memulai apa yang harus kita lakukan, yang pertama adalah membuat database dahulu. Disini kami membuat database dengan nama "chart". kemudian masukkan database di bawah ini.


 -- phpMyAdmin SQL Dump
-- version 4.8.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 04, 2018 at 04:00 AM
-- 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";


-- --------------------------------------------------------

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

CREATE TABLE `tblcomplaints` (
  `complaintNumber` int(11) NOT NULL,
  `userId` int(11) NOT NULL,
  `floor` int(11) NOT NULL,
  `room` varchar(50) NOT NULL,
  `facilityName` varchar(50) NOT NULL,
  `buildingName` varchar(50) NOT NULL,
  `typedamage` varchar(50) NOT NULL,
  `complaintDetails` mediumtext NOT NULL,
  `complaintFile` varchar(50) DEFAULT NULL,
  `regDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `remark` mediumtext NOT NULL,
  `techName` varchar(50) NOT NULL,
  `status` varchar(25) DEFAULT NULL,
  `lastUpdationDate` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

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

INSERT INTO `tblcomplaints` (`complaintNumber`, `userId`, `floor`, `room`, `facilityName`, `buildingName`, `typedamage`, `complaintDetails`, `complaintFile`, `regDate`, `remark`, `techName`, `status`, `lastUpdationDate`) VALUES
(1, 1, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'Sementara di proses pak ya', 'admin', 'in process', '2018-05-23 05:24:19'),
(2, 2, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test', 'admin', 'in process', '2018-05-23 11:30:33'),
(3, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test', 'admin', 'in process', '2018-05-24 04:47:28'),
(4, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test ya', 'admin', 'closed', '2018-05-24 14:47:07'),
(5, 5, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test', 'admin', 'in process', '2018-05-24 14:50:36'),
(6, 6, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', 'admin', 'in process', '2018-05-29 09:18:09'),
(7, 7, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'sementara di proses pak ya', 'admin', 'in process', '2018-05-23 05:25:17'),
(8, 8, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(9, 9, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(10, 10, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(11, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', 'admin', 'in process', '2018-05-24 15:30:21'),
(12, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', 'sementara jalan pak ya', 'admin', 'in process', '2018-05-23 05:26:05'),
(13, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', 'admin', 'closed', '2018-05-24 04:48:13'),
(14, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(15, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(16, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(17, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(18, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(19, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(20, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(21, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(22, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(23, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', 'selesai pak', 'admin', 'closed', '2018-05-24 04:48:46'),
(24, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', 'Di proses pak ya', 'admin', 'in process', '2018-05-24 15:20:39'),
(25, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(26, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(27, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(28, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(29, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(30, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', 'mantap', 'admin', 'in process', '2018-05-24 15:21:30'),
(31, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(32, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(33, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(34, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(35, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(36, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(37, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', 'Selesai Pak ya', 'admin', 'closed', '2018-05-24 15:15:30'),
(38, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(39, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(40, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(41, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(42, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', 'admin', 'in process', '2018-05-24 15:43:13'),
(43, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(44, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', 'sementara pak', 'admin', 'in process', '2018-05-24 15:14:57'),
(45, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(46, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(47, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(48, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(49, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(50, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(51, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(52, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(53, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', 'admin', 'closed', '2018-05-24 15:30:10'),
(54, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(55, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', 'admin', 'in process', '2018-05-24 15:31:16'),
(56, 20, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(57, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(58, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(59, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(60, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(61, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', 'admin', 'in process', '2018-05-24 15:29:55'),
(62, 20, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00');


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

--
-- AUTO_INCREMENT for dumped tables
--

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

berikutnya yang mesti anda lakukan adalah membuat formnya, disini kami menggunakan Ajx Bootsrap. berikut tampilan formnya, kemudian beri nama index.php.

 <!DOCTYPE html>
<html>
<head>
  <title>LINE 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>
  
</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="#">GOOGLE CHART</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-envelope" style="font-size:18px;"></span></a>
       <ul class="dropdown-menu"></ul>
     </li>
   </ul>
 </div>
</nav>
<br />
<h2 align="center">LINE CHART</h2>
<br />
<form method="post">
 <div class="form-group">
 </div>
</form>

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


Pada form di atas google chart belum tampuil itu karena google chart belum kita panggi, jadi form di atas hanya untuk form saja. Mari kita coba panggil google chart dibawah ini.

   <html>
  <head>
    <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([
          ['Month', 'Month'],
          ['Jan',  1000],
   ['Feb',  1000],
   ['Mar',  1000],
   ['Apr',  1000],
   ['May',  1000],
   ['Jun',  1000],
   ['Jul',  1000],
   ['Aug',  1000],
   ['Sep',  1000],
   ['Oct',  1000],
   ['Nov',  1000],
   ['Dec',  1000]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html> 

Karena kami telah membuat form di atas menggunakan ajal bootsrap di atas maka berikutnya yang harus kita lakukan adalah menggabungkan form di bootsrap di atas dengan gogole chart di atas. untuk lebih lengkapnya lihat kodingan di bawah ini.

 <?php 
//connect.php;
$connect = mysqli_connect("localhost", "root", "", "chart");
?>
<!DOCTYPE html>
<html>
<head>
  <title>LINE 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([
          ['Month', 'Month'],
          ['Jan',  1000],
    ['Feb',  1000],
    ['Mar',  1000],
    ['Apr',  1000],
    ['May',  1000],
    ['Jun',  1000],
    ['Jul',  1000],
    ['Aug',  1000],
    ['Sep',  1000],
    ['Oct',  1000],
    ['Nov',  1000],
    ['Dec',  1000]
        ]);

        var options = {
          title: 'line Chart Per/Month',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        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="#">GOOGLE CHART</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-envelope" style="font-size:18px;"></span></a>
       <ul class="dropdown-menu"></ul>
     </li>
   </ul>
 </div>
</nav>
<br />
<h2 align="center">LINE CHART</h2>
<br />
<form method="post">
 <div class="form-group">
   <div id="curve_chart" style="width: 1200px; height: 500px"></div>
 </div>
</form>

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

berikut gambar dari gabungan antara form dan chart di atas.

Perlu teman-teman ketahui bahwa pada chart ini kami akan mencoba memanggi jumlah data yang masuk setiap bulannya menggunakan chart di line di atas.

Yang pertama kita lakukan adalah memanggil database yang tadi kita masukkan di mysql, kemudian kita panggi perbulannya dan terakhir kita masukkan kedalam chart.

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


Artikel Menarik Lainnya

SUBSCRIBE TO OUR NEWSLETTER