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

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

Membuat Grafik / Chart dari Database dengan PHP MySQLi ChartJS

Last Updated on 6 February 2020 By tommy 3 Comments

Untuk kebutuhan menampilkan grafik kita bisa menggunakan ChartJS, selain karena tidak butuh jQuery, penggunaannya cukup mudah. Disini kita akan membuat grafik batang data penduduk Indonesia per provinsi.

Pertama import data ini ke MySQL/MariaDB anda

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
--
-- Database: `tutorial`
--
CREATE TABLE `datapenduduk` (
  `ID` INT(11) NOT NULL,
  `provinsi` VARCHAR(50) NOT NULL,
  `jumlah` INT(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
INSERT INTO `datapenduduk` (`ID`, `provinsi`, `jumlah`) VALUES
(1, 'BANTEN', 10632166),
(2, 'BENGKULU', 1715518),
(3, 'DI YOGYAKARTA', 3457491),
(4, 'DKI JAKARTA', 1679163),
(5, 'GORONTALO', 1040164),
(6, 'JAMBI', 3092265),
(7, 'JAWA BARAT', 43053732),
(8, 'JAWA TENGAH', 32382657),
(9, 'JAWA TIMUR', 37476757),
(10, 'KALIMANTAN BARAT', 4395983),
(11, 'KALIMANTAN TENGAH', 2212089),
(12, 'KEPULAUAN RIAU', 1679163),
(13, 'LAMPUNG', 7608405),
(14, 'MALUKU', 1533506),
(15, 'MALUKU UTARA', 1038087),
(16, 'NANGGROE ACEH DARUSSALAM', 4494410),
(17, 'NUSA TENGGARA BARAT', 4500212),
(18, 'PAPUA', 2833381),
(19, 'RIAU', 5538367);
ALTER TABLE `datapenduduk`
  ADD PRIMARY KEY (`ID`);
ALTER TABLE `datapenduduk`

Setelah di import buat satu file chartjs.php di root web server anda, contoh di saya berada di /var/www/html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Membuat Grafik / Chart dari Database dengan PHP MySQLi ChartJS</title>
</head>
<body>
<canvas id="datapenduduk"></canvas>
<?php
 
  $DB_SERVER = "localhost";
  $DB_USER = "root";
  $DB_PASSWORD = "";
  $DB_NAME = "tutorial";
  $mysqli = new mysqli("$DB_SERVER","$DB_USER","$DB_PASSWORD","$DB_NAME");
 
  if ($mysqli->connect_errno) {
      echo "Errno: " . $mysqli->connect_errno . "\n";
      echo "Error: " . $mysqli->connect_error . "\n";
      exit;
  }
  $query = "select provinsi,jumlah from datapenduduk";
  $result = $mysqli->query($query);
  $data = [];
  while ($output = $result->fetch_assoc()) {
      $data['provinsi'][] = $output['provinsi'];
      $data['jumlah'][] = $output['jumlah'];
  }
 
?>
 
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/palette.js"></script>
<script type="text/javascript">
var ctx = document.getElementById("datapenduduk");
var penduduk = [ <?php foreach($data['jumlah'] as $jumlah) { echo "'$jumlah',"; } ?> ];
var provinsi = [ <?php foreach($data['provinsi'] as $provinsi) { echo "'$provinsi',"; } ?> ];
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: provinsi,
        datasets: [{
            label: 'Jumlah Penduduk',
            data: penduduk,
            backgroundColor: palette(['tol', 'qualitative'], penduduk.length).map(function(hex) {
                return '#' + hex;
            })
        }],
    },
});
</script>
</body>
</html>

Disini kita menggunakan ChartJS untuk menampilkan grafiknya, untuk warna grafiknya kita menggunakan palettejs, dengan bantuan palettejs kita tidak perlu membuat satu persatu warna grafiknya.

Sesuaikan credential yang digunakan untuk masuk ke MySQL anda. Buka script diatas di browser (contoh di http://localhost/chart.js)
chart js php mysql database

script ini sudah ditesting di PHP 7.3 dan 7.4

Tulisan menarik lainnya

  • Membuat Script Login Sederhana dengan PHP dan MySQLi

    Sebelumnya ditutorial Membuat Script Login dengan PHP dan MySQL, kita menggunakan mysql_* yang telah deprecated,…

  • Membuat Grafik dengan PHP MySQL Chartjs

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

  • Membuat Kalender dengan PHP

    Buat sebuah file dengan nama kalender.php lalu tambahkan script dibawah ini Minggu Senin Selasa Rabu…

  • 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

Reader Interactions

Comments

  1. Valid says

    13 January 2021 at 21:41

    Itu yg di x-axis kan menampilkan data “banten, bengkulu, dst”. Misal kalo kasusnya menampilkan data per bulan jadi “januari, feb, mar, dst”, tapi di database tipe datanya itu pake date, “12/01/2021, 21/01/2021,dll” itu bagaimana?

    Reply
  2. Ivan says

    17 November 2020 at 06:47

    Gan, itu bar chart-nya di bagian atas “Jumlah Penduduk” labelnya cuma 1 aja ya gan (merah), gak semua warna ?

    Reply
    • tommy says

      18 November 2020 at 09:39

      iya, itu legend untuk menampilkan dan menyembunyikan data jumlah penduduk kalo ada beberapa data di barnya

      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 Mengganti Port Screen Sharing macOS
  • Cara Menonaktifkan Pager di macOS
  • Cara Mengupdate Nama Apple silicon-as-a-Service Scaleway
  • Cara Force Delete Namespace di Kubernetes
  • Install PHP MariaDB di Mac Monterey

Komentar

  • mazda on Tutorial Lengkap Install Mail Server Postfix Dovecot MariaDB di CentOS 7
  • adi on Menggunakan Mikrotik Sebagai SSH Client
  • aris u on Solusi Simple Queue Mikrotik Tidak Berjalan
  • Bowo on Cara Mematikan SSID Molecool Balifiber
  • aris on Solusi Simple Queue Mikrotik Tidak Berjalan

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1.2m views
  • Password Terbaru ZTE F609 Indihome 784.5k views
  • Password Superadmin Huawei HG8245A 318.3k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 273.1k views
  • Cara Setting Wireless ZTE F609 Indihome 257.1k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 169.9k views
  • Akses UseeTV Indihome via Wireless ZTE F609 156.8k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 153.2k views
  • Cara Reset Password ZTE F609 Indihome 147.6k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 113.6k 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