• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

Membuat Diagram Google Chart dengan PHP MySQL

Last Updated on 14 October 2013 By tommy 4 Comments

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

Login ke MySQL anda, disini kita akan menggunakan command line (terminal)

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);

query sukses

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
pie chart data penduduk indonesia

File diatas bisa di download dibawah ini:

Tulisan menarik lainnya

  • Menampilkan Data Dari Database MySQL ke Combobox dengan PHP

    Pada tutorial kali ini, kita akan menampilkan data dari database kedalam combobox. Buat sebuah database…

  • Membuat Diagram di CodeIgniter 3

    Contoh data yang akan ditampilkan adalah jumlah penduduk di beberapa provinsi Indonesia. Untuk menampilkan diagramnya…

  • Membuat Grafik dengan PHP MySQL Chartjs

    Pertama buat database mysql, buat database dengan nama tutorial, lalu import MySQL dibawah ini menggunakan…

  • Membuat Diagram Batang (Pie Chart) dengan PHP MySQL

    Sebagai contoh kita akan membuat diagram batang data penduduk Indonesia per provinsi. Buat sebuah database…

Filed Under: PHP Tagged With: Chart, Google Chart, mysql

Reader Interactions

Comments

  1. 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

    Reply
    • tommy says

      31 January 2018 at 13:01

      ngga tampil gimana ya? bisa di kasi contoh screenshotnya

      Reply
  2. redline says

    22 December 2015 at 12:44

    terimakasih banyak gan ini yang ane cari, work semua sekali lagi terimakasih :thumbs:

    Reply
  3. husen says

    23 January 2015 at 00:24

    wah ini dia yang dicari2….

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Pencarian

Tanya Jawab tentang DevOps SRE CPE, gabung di https://t.me/devopsindonesia

Terbaru

  • Cara Buat atau Update UID User Docker Image
  • Solusi helm Upgrade Failed
  • macOS package is untrusted
  • Cara Mengganti Port Screen Sharing macOS
  • Cara Menonaktifkan Pager di macOS

Komentar

  • Iqu on Review ISP Fiber Optik Balifiber
  • Sarah on Kemana Menghilangnya Saldo BCA 50 ribu
  • Rizcky on Kemana Menghilangnya Saldo BCA 50 ribu
  • Mubashar sadiq on Password Superadmin Huawei HG8245A
  • Beritalogi on Cara Redirect Domain di Cloudflare

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1.3m views
  • Password Terbaru ZTE F609 Indihome 786k views
  • Password Superadmin Huawei HG8245A 330.5k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 275.4k views
  • Cara Setting Wireless ZTE F609 Indihome 260.4k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 172.2k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 162k views
  • Akses UseeTV Indihome via Wireless ZTE F609 157.5k views
  • Cara Reset Password ZTE F609 Indihome 148.5k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 115.5k views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi

Sponsor

kadal.id
carakami.com
kuotabisa.com
Untuk jadi sponsor, hubungi kita lewat halaman sponsor
© 2021. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java