#JavaScript - #PHP

Membuat Pie Chart Dengan PHP dan MySQL

By Muzanni
11 November 2023
JavaScript PHP

Pie Chart adalah grafik yang berbentuk bulat atau lingkaran menyerupai dognut. Dalam menampilkan pie chart ini Saya masih menggunakan library chartjs. Menurut saya library ini sangat powerful untuk digunakan.

Ada beberapa materi tentang membuat grafik yang pernah di bahas pada tutorial malasngoding.com. berikut list materi yang bisa saya rekomendasi untuk belajar sobat MalasNgoding.

Membuat Pie Chart Dengan PHP dan MySQL

Pada materi-materi sebelumnya belum ada yang membahas mengenai cara membuat pie chart. Maka dari itu kami berinisiatif membuat materi kusus membahas bagaimana membuat grafik pie dengan php dan mysql.

Sebenarnya untuk membuat grafik pie ini bisa juga dibaca langsung di dokumentasi resmi chartJs. Hanya saja mungkin kasus yang dibahas tidak sesuai dengan keinginan pembaca, atau mungkin ada pembaca yang kurang mengerti apa yang dibahas di dokumentasi. Maka dari itu disini saya mencoba membahas mengenai materi membuat pie chart.

Menampilkan Pie Chart dengan ChartJs

Sebelum kita mulai ke kasus menampilkan grafik pie terlebih dahulu saya ingin membahas sedikti bagaimana sih menampilkan grafik pie ini menggunakan library chartJs. Coba perhatikan kodingan berikut:

<!DOCTYPE html>

<head>

<title>Malasngoding.com - Pie Chart</title>

</head>

<body>

<h1>Pie Chart</h1>

</div>

</body>

const ctx = document.getElementById('myChart');

new Chart(ctx, {

type: 'pie',

data: {

labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],

datasets: [{

label: '# of Votes',

data: [12, 19, 9, 6, 10, 2],

backgroundColor: [

'rgba(255, 99, 71, 1)',

'rgba(9, 31, 242, 0.8)',

'rgba(240, 255, 45, 0.8)',

'rgba(17, 231, 42, 0.8)',

'rgba(201, 30, 255, 0.8)',

'rgba(255, 128, 6, 0.8)'

borderColor: [

'rgba(255, 99, 71, 1)',

'rgba(9, 31, 242, 0.8)',

'rgba(240, 255, 45, 0.8)',

'rgba(17, 231, 42, 0.8)',

'rgba(201, 30, 255, 0.8)',

'rgba(255, 128, 6, 0.8)'

borderWidth: 1

}]

options: {

scales: {

y: {

beginAtZero: true

}

});

</script>

</html>

Sebenarnya untuk menampilkan grafik pie sangatlah sederhana hanya menggunakan kode type: 'pie', saja. Kodingan yang membedakan grafik lain dengan grafik pie hanya pada type nya saja.

Membuat Pie Chart Dengan PHP dan MySQL

Oke langsung ke kasus yang mau kita kerjakan. Ikuti tahapan berikut untuk lebih bisa memahami cara membuat pie chart dengan php dan database mysql.

Siapkan database, tabel lengkap dengan data.

langkah pertama seperti biasa kita membuat tabel yang. Untuk mempersingkat silahkan copas saja query berikut kedalam sql sobat.

100

101

102

103

104

105

106

107

108

109

110

111

-- phpMyAdmin SQL Dump

-- version 5.1.1

-- https://www.phpmyadmin.net/

-- Host: 127.0.0.1

-- Waktu pembuatan: 11 Nov 2023 pada 13.45

-- Versi server: 10.4.22-MariaDB

-- Versi PHP: 7.4.26

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

START TRANSACTION;

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

-- Database: `malasngoding`

-- --------------------------------------------------------

-- Struktur dari tabel `dokter`

CREATE TABLE `dokter` (

`dokter_id` int(11) NOT NULL,

`dokter_nama` varchar(255) NOT NULL,

`dokter_spesialis` varchar(50) NOT NULL,

`dokter_alamat` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data untuk tabel `dokter`

INSERT INTO `dokter` (`dokter_id`, `dokter_nama`, `dokter_spesialis`, `dokter_alamat`) VALUES

(2, 'Supian efendi', 'Spesialis Dalam', 'jl mantraman no 12'),

(3, 'Supyan jalil', 'THT', 'Jl. waru no.1 desa kepala kambing'),

(4, 'Zunaitun dayanan', 'Kandungan', 'jl kenari no 298');

-- --------------------------------------------------------

-- Struktur dari tabel `pasien`

CREATE TABLE `pasien` (

`pasien_id` int(11) NOT NULL,

`pasien_nama` varchar(255) NOT NULL,

`pasien_no_identitas` varchar(255) NOT NULL,

`pasien_alamat` text NOT NULL,

`pasien_tanggal_lahir` varchar(255) NOT NULL,

`pasien_dokter` int(11) NOT NULL,

`pasien_tgl_berobat` date NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data untuk tabel `pasien`

INSERT INTO `pasien` (`pasien_id`, `pasien_nama`, `pasien_no_identitas`, `pasien_alamat`, `pasien_tanggal_lahir`, `pasien_dokter`, `pasien_tgl_berobat`) VALUES

(1, 'Muzanni', '0828283923232328', 'jl.panglateh', 'Pandrah, 17/12/1990', 2, '2018-02-07'),

(2, 'Sulaiman daut', '123123234234', 'Jl. waru no.1 desa kepala kambing', 'Jakarta, 12/2/1991', 2, '2018-02-07'),

(3, 'Sahlan', '0786564564', 'jl mantraman no 12', 'Batuphat, 20/12/1990', 2, '2018-02-07'),

(4, 'Siti aminah', '8363638376873434', 'mantraman', 'jakarta, 1/1/1980', 2, '2018-02-07'),

(5, 'muhammad', '234234234', '2sdfsd', 'csdfsd 3/3/2001', 4, '2022-07-29'),

(6, 'Non aliqua Ipsam qu', 'Minima esse rerum u', 'Corrupti porro qui ', 'Omnis aliquip ea rep', 3, '2022-07-29'),

(7, 'Facilis sint nihil d', 'Veniam aliquip sapi', 'Eaque asperiores ist', 'Ut ratione libero mi', 3, '2022-07-29');

-- Indexes for dumped tables

-- Indeks untuk tabel `dokter`

ALTER TABLE `dokter`

ADD PRIMARY KEY (`dokter_id`);

-- Indeks untuk tabel `pasien`

ALTER TABLE `pasien`

ADD PRIMARY KEY (`pasien_id`);

-- AUTO_INCREMENT untuk tabel yang dibuang

-- AUTO_INCREMENT untuk tabel `dokter`

ALTER TABLE `dokter`

MODIFY `dokter_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

-- AUTO_INCREMENT untuk tabel `pasien`

ALTER TABLE `pasien`

MODIFY `pasien_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;

COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Untuk strukturnya bisa dilihat pada gambar berikut :

Menampilkan Pie Chart Dengan PHP MySQL

Langkah selanjutnya yaitu menampilkan pie chart dari data yang sudah kita buat sebelumnya. Perhatikan kode berikut.

<!DOCTYPE html>

<head>

<title>Malasngoding.com - Pie Chart</title>

</head>

<body>

<h1>Pie Chart</h1>

</div>

</body>

<?php

$koneksi = mysqli_connect("localhost","root","","malasngoding");

$dokter = mysqli_query($koneksi,"select * from dokter");

while($dr = mysqli_fetch_array($dokter)){

$nama_dokter[] = $dr['dokter_nama'];

$id_dokter = $dr['dokter_id'];

$pasien = mysqli_query($koneksi,"select * from pasien where pasien_dokter='$id_dokter'");

$jumlah_pasien[] = mysqli_num_rows($pasien);

}

const ctx = document.getElementById('myChart');

new Chart(ctx, {

type: 'pie',

data: {

labels: <?php echo json_encode($nama_dokter); ?>,

datasets: [{

label: 'Jumlah Pasien',

data: <?php echo json_encode($jumlah_pasien); ?>,

backgroundColor: [

'rgba(255, 99, 71, 1)',

'rgba(9, 31, 242, 0.8)',

'rgba(255, 128, 6, 0.8)'

borderColor: [

'rgba(255, 99, 71, 1)',

'rgba(9, 31, 242, 0.8)',

'rgba(255, 128, 6, 0.8)'

borderWidth: 1

}]

options: {

scales: {

y: {

beginAtZero: true

}

});

</script>

</html>

Menampilkan Pie Chart Dengan PHP dan MySQL

Dalam kasus ini saya memiliki dua tabel yaitu tabel dokter dan tabel pasien. Tabel pasien berkaintan dengan dokter yang mana dia berobat. Yang ingin saya buatkan grafiknya yaitu menampilkan berapa jumlah pasien setiap dokternya.

Untuk mengambil data dokter dan data pasien saya menggunakan kodingan berikut