Membuat Diagram Google Chart dengan PHP MySQL

Ditutorial kali ini kita akan menggunakan data penduduk Indonesia pada tahun 2010 sebagai contoh. Yang dibutuhkan adalah PHP, MySQL dan Apache. Sebelumnya pastikan PHP, MySQL dan Apache anda telah berhasil dijalankan, kita tidak akan membahas masalah ini disini, kita akan langsung masuk ke pembuatan Chart (diagram) dengan bantuan Google Chart.

Pembuatan Database

mysql -u root -p

sesuaikan username dan password dengan milik anda. Buat sebuah database baru, misalkan belajar

mysql> create database belajar;
Query OK, 1 row affected (0.00 sec)

lalu copy dan paste perinta dibawah ini

CREATE TABLE IF NOT EXISTS `datapenduduk` (
  `provinsi` varchar(50) NOT NULL,
  `jumlah` int(11) NOT NULL,
  PRIMARY KEY (`provinsi`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
--
-- Dumping data for table `datapenduduk`
--
 
INSERT INTO `datapenduduk` (`provinsi`, `jumlah`) VALUES
('BABEL', 1223296),
('BALI', 3890757),
('BANTEN', 10632166),
('BENGKULU', 1715518),
('DI YOGYAKARTA', 3457491),
('DKI JAKARTA', 1679163),
('GORONTALO', 1040164),
('JAMBI', 3092265),
('JAWA BARAT', 43053732),
('JAWA TENGAH', 32382657),
('JAWA TIMUR', 37476757),
('KALIMANTAN BARAT', 4395983),
('KALIMANTAN SELATAN', 3626616),
('KALIMANTAN TENGAH', 2212089),
('KALIMANTAN TIMUR', 3553143),
('KEPULAUAN RIAU', 1679163),
('LAMPUNG', 7608405),
('MALUKU', 1533506),
('MALUKU UTARA', 1038087),
('NANGGROE ACEH DARUSSALAM', 4494410),
('NUSA TEGGARA TIMUR', 4683827),
('NUSA TENGGARA BARAT', 4500212),
('PAPUA', 2833381),
('PAPUA BARAT', 760422),
('RIAU', 5538367),
('SULAWESI BARAT', 1158651),
('SULAWESI SELATAN', 8034776),
('SULAWESI TENGAH', 2635009),
('SULAWESI TENGGARA', 2232586),
('SULAWESI UTARA', 2270596),
('SUMATERA BARAT', 4846909),
('SUMATERA SELATAN', 7450394),
('SUMATERA UTARA', 12982204);

Script Membuat Diagram

sekarang kita buat file google.php untuk menampilkan diagram yang kita buat.

<html>
  <head>
<title>Data Penduduk Indonesia per Provinsi Tahun 2010</title>
	<?php
		$server = "localhost";
		$username = "root"; 
		$password = "password";
		$database = "belajar"; 
		mysql_connect($server,$username,$password) or die("Koneksi gagal");
		mysql_select_db($database) or die("Database tidak bisa dibuka");
		$query = "select * from datapenduduk";
		$result = mysql_query($query);
		$num_results = mysql_num_rows($result);
		if( $num_results > 0){
	?>
 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
                    ['Provinsi', 'Jumlah Penduduk'],
                    <?php
                    while( $row = mysql_fetch_array($result) ){
                        extract($row);
                        echo "['{$provinsi}', {$jumlah}],";
                    }
                    ?>
 
        ]);
 
        var options = {
          title: 'Data Penduduk Indonesia per Provinsi Tahun 2010'
        };
 
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>
    <?php
 
    }else{
        echo "data tidak ditemukan";
    }
    ?>

Contoh implementasi diatas diambil dari Google Chart Docs.
Pada script diatas sesuaikan username dan password MySQL anda. Sekarang jalankan di browser hasil yang muncul

File diatas bisa di download dibawah ini:

Join the Conversation

4 Comments

urang says:
30 January 2018 at 19:23
tnya dong gan, cara ganti tampilan chartnya jgn yg versi pie chart, yg bar chart misalnya gmn gan? saya udah ganti dgn bawaan dari google ga muncul gan
trs cara munculin 2 chart google di 1 halaman gmn gan?
saya coba ubah id chart nya ga muncul
terimakasih
1. tommy says:
  31 January 2018 at 13:01
  ngga tampil gimana ya? bisa di kasi contoh screenshotnya
redline says:
22 December 2015 at 12:44
terimakasih banyak gan ini yang ane cari, work semua sekali lagi terimakasih :thumbs:
husen says:
23 January 2015 at 00:24
wah ini dia yang dicari2….

Pembuatan Database

Script Membuat Diagram

Tulisan menarik lainnya

Join the Conversation