Membuat Diagram Lingkaran di PHP dengan Google Charts

Penulis

April 26, 2017

Membuat Diagram Lingkaran di PHP dengan Google Charts

Pie Chart atau Diagram Lingkaran adalah grafik melingkar yang dibagi menjadi potongan-potongan untuk mewakili proporsi numerik. Diagram Lingkaran terutama digunakan untuk menunjukkan perbandingan dan representasi grafis membantu memahami perbandingan dengan mudah. Diagram Lingkaran merupakan pilihan yang sempurna untuk menggambarkan data dalam format persentase.

Jika kamu ingin menampilkan statistik data dengan Diagram Lingkaran, ada cara mudah untuk membuat Diagram Lingkaran di website. Dalam tutorial ini, saya akan menunjukkan cara membuat Diagram Lingkaran dengan PHP dan MySQL.

Google Visualization API menyediakan cara yang mudah untuk membuat chart di situs website. Dengan menggunakan Google charts API, kamu dapat menghasilkan diagram lingkaran untuk mengisi data dari database dalam hitungan menit. Di sini kita akan membuat berbagai jenis diagram lingkaran untuk menampilkan data yang dinamis dari database MySQL menggunakan PHP dan Google charts API. Selain itu, tutorial ini akan membantu kamu membuat Google Pie Chart dengan PHP dan MySQL.

Membuat Diagram Lingkaran dengan PHP dan MySQL

Dalam contoh script saya ini, saya akan menampilkan beberapa bahasa pemrograman pada diagram lingkaran. Selain itu, data akan diambil dari database MySQL dan popularitasnya akan ditampilkan di pie chart.

Membuat table database

Untuk menyimpan data bahasa pemrograman, kamu perlu membuat table dalam database. Script SQL berikut akan membuat tabel bernama bhs_pemrograman dalam database MySQL.

CREATE TABLE `bhs_pemrograman` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `nama` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `rating` int(5) NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Data dinamis pada Google Pie Chart

Pada awalnya data akan diambil dari tabel bhs_pemrograman menggunakan PHP dan MySQL. Setelah itu, nama dan peringkat bahasa pemrograman akan ditentukan dalam variabel data.
Dalam variabel options, kamu dapat menentukan judul, lebar, dan tinggi diagram lingkaran yang diinginkan.

<?php
// Kredensial database
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'demo';

// menghubungkan ke db
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// mendapatkan data dari db
$result = $db->query("SELECT nama,rating FROM bhs_pemrograman WHERE status = '1' ORDER BY rating DESC");
?>

<!DOCTYPE html>
<html lang="id">
<head>
<title>Membuat Diagram Lingkaran di PHP dengan Google Charts - Codingan.com</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([
      ['Language', 'Rating'],
      <?php
      if($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
            echo "['".$row['nama']."', ".$row['rating']."],";
          }
      }
      ?>
    ]);

    var options = {
        title: 'Bahasa Pemrograman yang paling populer',
        width: 900,
        height: 500,
    };

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

    chart.draw(data, options);
}
</script>
</head>
<body>
    <!-- Menampilkan diagram lingkaran -->
    <div id="piechart"></div>
</body>
</html>

Kamu dapat membuat berbagai jenis diagram lingkaran dengan Google Charts API. Beberapa jenis diagram lingkaran populer diberikan di bawah ini.

3D Pie Chart

Atur is3D menjadi true untuk membuat efek 3D.

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      <?php
      if($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
            echo "['".$row['nama']."', ".$row['rating']."],";
          }
      }
      ?>
    ]);
    
    var options = {
        title: 'Bahasa Pemrograman yang paling populer',
        width: 900,
        height: 500,
        is3D: true,
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    
    chart.draw(data, options);
}
</script>

Donut Pie Chart

Donut Chart sama seperti pie chart normal dengan lubang di tengahnya. Tetapkan opsi pieHole untuk membuat Donut Pie Chart.

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      <?php
      if($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
            echo "['".$row['nama']."', ".$row['rating']."],";
          }
      }
      ?>
    ]);
    
    var options = {
        title: 'Bahasa Pemrograman yang paling populer',
        width: 900,
        height: 500,
        pieHole: 0.5,
    };
    
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    
    chart.draw(data, options);
}
</script>