Membuat Chart Pie Dengan Google Chart API

Buat teman-teman yang ingin Membuat Chart Pie Dengan Google Chart API di tampilan websitenya juga bisa loh. Karena Google menyediakan chart yang dapat kita pakai untuk kebutuhan website kita. Dimana chart ini gratis bisa di pakai kapan saja tanpa kita harus membayarnya. Bersifat powerfull dimana kita bisa melakukan custom bentuk chartnya, bisa juga melakukan control terhadap data yang ingin ditampilkan sehingga interaktif, membuat data dengan dinamika yang berbeda-beda serta mudah di gunakan. Google chart juga memiliki banyak variasi tipe chart seperti pada gambar di bawah ini.

Langkah pertama cara  teman-teman siapkan terlebih dahulu table databasenya yang sudah berisi data atau teman-teman bisa salin script di bawah untuk membuat databasenya.

CREATE TABLE IF NOT EXISTS `karyawan` ( 

  `id` int(11) NOT NULL AUTO_INCREMENT, 

  `nama` varchar(50) NOT NULL,  

  `jenis_kelamin` varchar(10) NOT NULL,  

  `umur` int(11) NOT NULL,  

  PRIMARY KEY (`id`) 

 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=187 ; 

 -- 

 -- Dumping data for table `karyawan` 

 -- 

 INSERT INTO `karyawan` (`id`, `nama`, `jenis_kelamin`, `umur`) VALUES 

 (1, 'Shelli', 'wanita', '25'),

 (2, 'Bartho', 'pria', '30'),

 (3, 'Irwan', 'pria', '27'),

 (4, 'Fatimah', 'wanita', '23'),

 (5, 'Nita', 'wanita', '25'),

 (6, 'Shari', 'wanita', '23');

Jika sudah maka kita akan membuat perintah sql di php untuk mengambil data dengan cara di grouping dan kemudian akan kita looping di dalam fungsi drawChart() dan lalu di tampilkan di dalam div seperti script di bawah ini.

<?php 

 $connect = mysqli_connect("localhost", "dumet", "school", "test"); 

 $query = "SELECT jenis_kelamin, count(*) as total FROM karyawan GROUP BY jenis_kelamin"; 

 $result = mysqli_query($connect, $query); 

 ?> 

 <!DOCTYPE html> 

 <html> 

      <head> 

           <title>Cara Membuat Chart Pie Dengan Google Chart API</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([ 

                          ['Jenis kelamin', 'Total'],

                          <?php 

                          while($row = mysqli_fetch_array($result))  { 

                               echo "['".$row["jenis_kelamin"]."', ".$row["total"]."],"; 

                          } 

                          ?> 

                     ]);

                var options = { 

                      title: 'Persentase dari karyawan Pria dan Wanita', 

                      is3D:true 

                      // pieHole: 0.4 

                     }; 

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

                chart.draw(data, options); 

           } 

           </script> 

      </head> 

      <body>

           <div style="width:900px;"> 

                <h3 align="center">Cara Membuat Chart Pie Dengan Google Chart API</h3> 

                <div id="piechart" style="width: 900px; height: 500px;"></div> 

           </div> 

      </body> 

 </html>

Jika teman-teman buka di browser maka tampilannya akan seperti pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Chart Pie Dengan Google Chart API. Semoga bermanfaat dan selamat mencoba.