Tutorial PHP Part 55 – Membuat Grafik Dari Database MySQL dan PHP dengan Chart.JS

July 13, 2019August 7, 2020 Aris Samsudin 9 Comments

Selamat datang di warung belajar, melanjutkan pembahasan dari seri tutorial PHP, pada part 55 kita akan belajar membuat grafik untuk menampilkan data dari database mysql dengan php menggunakan Chart.js

Chart.js adalah salah satu library Javascript yang digunakan untuk membuat grafik.

Pada tutorial ini kita akan membuat grafiknya untuk menampilkan data dari database MySQL.

Persiapan Library Chart.js

Sebelumnya kita memulai kita akan persiapkan dulu library Chart.js, silahkan buka website resmi Chart.js :

https://www.chartjs.org/

didalamnya terdapat banyak jenis chart yang bisa anda buat dengan menggunakan Chart.js, anda melihat contoh grafiknya di menu sample : https://www.chartjs.org/samples/latest/

Kita persiapkan dulu library Chart.js, silahkan mengakses alamat :

https://github.com/chartjs/Chart.js/releases

akan terdapat library chart.js dengan versi yang paling baru, saat tutorial ini dibuat chart.js ada diversi 2.8.0.

Untuk mempermudah anda dalam download library Chart.js, kita sudah siapkan link downloadnya, untuk download library chart.js : Klik Disini

Buat Folder Project

Berikutnya silahkan buat folder projectnya.

Karena dalam contoh ini kita menggunakan xampp, sehingga kita akan simpan file project di drive C:/xampp/htdocs

Dalam contoh ini kita akan buat folder dengan nama belajarchart, sehingga folder project kita ada di direktori C:/xampp/htdocs/belajarchart

Pada direktori tersebut, silahkan letakkan file Chart.js hasil download sebelumnya, lalu berikutnya silahkan buat 4 file PHP lainnya :

grafik_bulan.php
grafik_pie.php
index.php
koneksi.php

baik saya asumsikan teman – teman sudah membuat folder project, serta telah mempersiapkan file seperti gambar diatas.

Membuat Database

Berikutnya silahkan buat sebuah database dengan nama db_penjualan, yang didalamnya terdapat 2 tabel, antara lain :

tabel tb_barang

tabel tb_penjualan

Untuk mempermudah anda dalam membuat database, tabel, serta record didalam tabel, anda bisa menggunakan perintah SQL dibawah ini :

-- phpMyAdmin SQL Dump
-- version 4.8.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 12 Jul 2019 pada 16.18
-- Versi server: 10.1.37-MariaDB
-- Versi PHP: 7.3.0

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
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: `db_penjualan`
--
CREATE DATABASE IF NOT EXISTS `db_penjualan` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `db_penjualan`;

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

--
-- Struktur dari tabel `tb_barang`
--

CREATE TABLE `tb_barang` (
  `id_barang` int(11) NOT NULL,
  `barang` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `tb_barang`
--

INSERT INTO `tb_barang` (`id_barang`, `barang`) VALUES
(1, 'Redmi Note 7'),
(2, 'Samsung M20'),
(3, 'Realme 3'),
(4, 'Iphone X');

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

--
-- Struktur dari tabel `tb_penjualan`
--

CREATE TABLE `tb_penjualan` (
  `id_penjualan` int(11) NOT NULL,
  `id_barang` int(11) NOT NULL,
  `jumlah` int(11) NOT NULL,
  `tgl_penjualan` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `tb_penjualan`
--

INSERT INTO `tb_penjualan` (`id_penjualan`, `id_barang`, `jumlah`, `tgl_penjualan`) VALUES
(1, 1, 5, '2019-01-11'),
(2, 3, 3, '2019-01-04'),
(3, 2, 4, '2019-02-11'),
(4, 2, 3, '2019-03-09'),
(5, 3, 4, '2019-04-10'),
(6, 4, 1, '2019-05-11'),
(7, 1, 2, '2019-05-05'),
(8, 4, 7, '2019-06-09'),
(9, 3, 2, '2019-06-11'),
(10, 2, 5, '2019-07-11'),
(11, 1, 2, '2019-07-12');

--
-- Indexes for dumped tables
--

--
-- Indeks untuk tabel `tb_barang`
--
ALTER TABLE `tb_barang`
  ADD PRIMARY KEY (`id_barang`);

--
-- Indeks untuk tabel `tb_penjualan`
--
ALTER TABLE `tb_penjualan`
  ADD PRIMARY KEY (`id_penjualan`);

--
-- AUTO_INCREMENT untuk tabel yang dibuang
--

--
-- AUTO_INCREMENT untuk tabel `tb_barang`
--
ALTER TABLE `tb_barang`
  MODIFY `id_barang` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

--
-- AUTO_INCREMENT untuk tabel `tb_penjualan`
--
ALTER TABLE `tb_penjualan`
  MODIFY `id_penjualan` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
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 */;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

-- phpMyAdmin SQL Dump

-- version 4.8.4

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

-- Host: 127.0.0.1

-- Waktu pembuatan: 12 Jul 2019 pada 16.18

-- Versi server: 10.1.37-MariaDB

-- Versi PHP: 7.3.0

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET AUTOCOMMIT = 0;

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: `db_penjualan`

CREATE DATABASE IF NOT EXISTS `db_penjualan` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

USE `db_penjualan`;

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

-- Struktur dari tabel `tb_barang`

CREATE TABLE `tb_barang` (

`id_barang` int(11) NOT NULL,

`barang` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data untuk tabel `tb_barang`

INSERT INTO `tb_barang` (`id_barang`, `barang`) VALUES

(1, 'Redmi Note 7'),

(2, 'Samsung M20'),

(3, 'Realme 3'),

(4, 'Iphone X');

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

-- Struktur dari tabel `tb_penjualan`

CREATE TABLE `tb_penjualan` (

`id_penjualan` int(11) NOT NULL,

`id_barang` int(11) NOT NULL,

`jumlah` int(11) NOT NULL,

`tgl_penjualan` date NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data untuk tabel `tb_penjualan`

INSERT INTO `tb_penjualan` (`id_penjualan`, `id_barang`, `jumlah`, `tgl_penjualan`) VALUES

(1, 1, 5, '2019-01-11'),

(2, 3, 3, '2019-01-04'),

(3, 2, 4, '2019-02-11'),

(4, 2, 3, '2019-03-09'),

(5, 3, 4, '2019-04-10'),

(6, 4, 1, '2019-05-11'),

(7, 1, 2, '2019-05-05'),

(8, 4, 7, '2019-06-09'),

(9, 3, 2, '2019-06-11'),

(10, 2, 5, '2019-07-11'),

(11, 1, 2, '2019-07-12');

-- Indexes for dumped tables

-- Indeks untuk tabel `tb_barang`

ALTER TABLE `tb_barang`

ADD PRIMARY KEY (`id_barang`);

-- Indeks untuk tabel `tb_penjualan`

ALTER TABLE `tb_penjualan`

ADD PRIMARY KEY (`id_penjualan`);

-- AUTO_INCREMENT untuk tabel yang dibuang

-- AUTO_INCREMENT untuk tabel `tb_barang`

ALTER TABLE `tb_barang`

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

-- AUTO_INCREMENT untuk tabel `tb_penjualan`

ALTER TABLE `tb_penjualan`

MODIFY `id_penjualan` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;

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 */;

Baik kita asumsikan teman – teman sudah memiliki database seperti database db_penjualan diatas.

Membuat File Koneksi.php

Silahkan buka file koneksi.php yang sebelumnya kita buat, lalu isikan code dibawah ini :

<?php 
$host       = "localhost";
$user       = "root";
$password   = "";
$database   = "db_penjualan";
$koneksi    = mysqli_connect($host, $user, $password, $database);
?>

<?php

$host = "localhost";

$user = "root";

$password = "";

$database = "db_penjualan";

$koneksi = mysqli_connect($host, $user, $password, $database);

Keterangan :

Perintah diatas digunakan untuk koneksi ke database db_penjualan yang sebelumnya telah kita buat.
$host dengan nilai “localhost” yang merupakan alamat server databasenya
$user dengan nilai “root” yang merupakan user dari databasenya
$password dengan nilai “” yang merupakan password untuk mengakses database, nilainya kosong karena default dari xampp untuk password user root adalah kosong
$database dengan nilai “db_penjualan” yang merupakan nama dari database yang sebelumnya telah kita buat
Baris 6 adalah perintah untuk melakukan koneksi ke database, dan hasilnya disimpan di variabel $koneksi.

Membuat Grafik Penjualan Per Barang

Baik kita asumsikan anda sudah memiliki database, dan telah membuat sebuah file koneksi.php yang digunakan untuk melakukan koneksi ke database.

Berikutnya kita akan membuat grafik Penjualan Perbarang, silahkan buka file index.php yang sebelumnya telah kita buat, lalu isikan code dibawah ini :

<?php
include('koneksi.php');
$produk = mysqli_query($koneksi,"select * from tb_barang");
while($row = mysqli_fetch_array($produk)){
	$nama_produk[] = $row['barang'];
	
	$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");
	$row = $query->fetch_array();
	$jumlah_produk[] = $row['jumlah'];
}
?>
<!DOCTYPE html>
<html>
<head>
	<title>Membuat Grafik Menggunakan Chart JS</title>
	<script type="text/javascript" src="Chart.js"></script>
</head>
<body>
	<div style="width: 800px;height: 800px">
		<canvas id="myChart"></canvas>
	</div>


	<script>
		var ctx = document.getElementById("myChart").getContext('2d');
		var myChart = new Chart(ctx, {
			type: 'bar',
			data: {
				labels: <?php echo json_encode($nama_produk); ?>,
				datasets: [{
					label: 'Grafik Penjualan',
					data: <?php echo json_encode($jumlah_produk); ?>,
					backgroundColor: 'rgba(255, 99, 132, 0.2)',
					borderColor: 'rgba(255,99,132,1)',
					borderWidth: 1
				}]
			},
			options: {
				scales: {
					yAxes: [{
						ticks: {
							beginAtZero:true
						}
					}]
				}
			}
		});
	</script>
</body>
</html>

<?php

include('koneksi.php');

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

while($row = mysqli_fetch_array($produk)){

$nama_produk[] = $row['barang'];

$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

$row = $query->fetch_array();

$jumlah_produk[] = $row['jumlah'];

}

<!DOCTYPE html>

<html>

<head>

<title>Membuat Grafik Menggunakan Chart JS</title>

</head>

<body>

</div>

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'bar',

data: {

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

datasets: [{

label: 'Grafik Penjualan',

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

backgroundColor: 'rgba(255, 99, 132, 0.2)',

borderColor: 'rgba(255,99,132,1)',

borderWidth: 1

}]

options: {

scales: {

yAxes: [{

ticks: {

beginAtZero:true

}

}]

}

});

</script>

</body>

</html>

Untuk mengakses file index.php anda bisa mengaksesnya melalui alamat : localhost/belajarchart

maka tampilannya adalah seperti berikut ini :

Maka akan ditampilkan grafik penjualan yang dibagi per barang.

Penjelasan code :

include('koneksi.php');

1	include('koneksi.php');

Baris 2 kita include file koneksi.php

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

1	$produk = mysqli_query($koneksi,"select * from tb_barang");

Baris 3 kita tuliskan query untuk mengambil data di tabel tb_barang

while($row = mysqli_fetch_array($produk)){

1	while($row = mysqli_fetch_array($produk)){

Baris 4 kita extract data hasil query di baris 3 dan datanya kita simpan di variabel $row

$nama_produk[] = $row['barang'];

1	$nama_produk[] = $row['barang'];

Baris 5 kita buat array dengan nama $nama_produk, dimana array ini digunakan untuk menyimpan nama barang hasil query dibaris 3

$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

1	$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

Baris 7 kita menuliskan query untuk menjumlahkan nilai pada kolom jumlah di tabel tb_penjualan, berdasarkan id_barang disetiap perulangan data barang.

$row = $query->fetch_array();

1	$row = $query->fetch_array();

Baris 8 kita membuat variabel $row digunakan untuk menyimpan hasil query di baris 7 kedalam bentuk array dengan perintah fetch_array

$jumlah_produk[] = $row['jumlah'];

1	$jumlah_produk[] = $row['jumlah'];

Baris 9 kita membuat array $jumlah_produk untuk menyimpan data jumlah disetiap barang yang terjual di tabel tb_penjualan

Nah sampai sini kita memiliki 2 array :

$nama_produk yang berisi nama – nama dari barang
$jumlah_produk yang berisi jumlah penjualan dari masing – masing barang di tabel tb_penjualan

<script type="text/javascript" src="Chart.js"></script>

1	<script type="text/javascript" src="Chart.js"></script>

Baris 16 kita memanggil file Chart.js agar kita bisa membuat grafik dengan menggunakan Chart.js

<canvas id="myChart"></canvas>

1	<canvas id="myChart"></canvas>

Baris 20 kita membuat sebuah object dengan menggunakan tag <canvas> dimana didalamnya kita menuliskan nama id=”myChart”

Perintah yang ada di library chart.js ini kita ambil dari dokumentasi chart.js, jadi anda tidak perlu mengetahui fungsinya perbaris yang terpenting anda mengetahui bagian – bagian pentingnya.

var ctx = document.getElementById("myChart").getContext('2d');

1	var ctx = document.getElementById("myChart").getContext('2d');

Baris 25 kita menuliskan myChart itu adalah id dari object yang kita buat di baris 20

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

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

Baris 29 kita menuliskan label dari chart, karena sebelumnya kita telah memiliki array dengan nama $nama_produk yang berisi daftar nama barang, sehingga kita tinggal menggunakan perintah json_encode untuk konversi array $nama_produk menjadi bentuk JSON

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

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

Baris 32 kita menuliskan bagian data dari chart, karena sebelumnya kita telah memiliki array dengan nama $jumlah_produk yang berisi jumlah dari penjualan per barang, sehingga kita tinggal menggunakan json_encode untuk konversi array $jumlah_produk menjadi bentuk JSON

backgroundColor: 'rgba(255, 99, 132, 0.2)',

1	backgroundColor: 'rgba(255, 99, 132, 0.2)',

Baris 33 anda dapat memodifikasi warna dari chart, dalam contoh ini kita buat warnanya adalah warna merah

borderColor: 'rgba(255,99,132,1)',

1	borderColor: 'rgba(255,99,132,1)',

Baris 34 anda dapat memodifikasi border dari bagian chart

Membuat Laporan Penjualan Per Bulan

Berikutnya kita akan membuat laporan penjualan per bulan, silahkan buka file grafik_bulan.php, lalu isikan code dibawah ini :

<?php
include('koneksi.php');
$label = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];

for($bulan = 1;$bulan < 13;$bulan++)
{
	$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where MONTH(tgl_penjualan)='$bulan'");
	$row = $query->fetch_array();
	$jumlah_produk[] = $row['jumlah'];
}
?>
<!DOCTYPE html>
<html>
<head>
	<title>Membuat Grafik Menggunakan Chart JS</title>
	<script type="text/javascript" src="Chart.js"></script>
</head>
<body>
	<div style="width: 800px;height: 800px">
		<canvas id="myChart"></canvas>
	</div>


	<script>
		var ctx = document.getElementById("myChart").getContext('2d');
		var myChart = new Chart(ctx, {
			type: 'bar',
			data: {
				labels: <?php echo json_encode($label); ?>,
				datasets: [{
					label: 'Grafik Penjualan',
					data: <?php echo json_encode($jumlah_produk); ?>,
					borderWidth: 1
				}]
			},
			options: {
				scales: {
					yAxes: [{
						ticks: {
							beginAtZero:true
						}
					}]
				}
			}
		});
	</script>
</body>
</html>

<?php

include('koneksi.php');

$label = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];

for($bulan = 1;$bulan < 13;$bulan++)

{

$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where MONTH(tgl_penjualan)='$bulan'");

$row = $query->fetch_array();

$jumlah_produk[] = $row['jumlah'];

}

<!DOCTYPE html>

<html>

<head>

<title>Membuat Grafik Menggunakan Chart JS</title>

</head>

<body>

</div>

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'bar',

data: {

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

datasets: [{

label: 'Grafik Penjualan',

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

borderWidth: 1

}]

options: {

scales: {

yAxes: [{

ticks: {

beginAtZero:true

}

}]

}

});

</script>

</body>

</html>

Untuk menampilkan grafiknya anda bisa mengakses alamat : localhost/belajarchart/grafik_bulan.php

Keterangan Code :

include('koneksi.php');

1	include('koneksi.php');

Baris 2 kita include file koneksi.php

$label = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];

1	$label = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];

Baris 3 kita membuat array $label yang berisi data bulan, dimana data bulan ini nanti akan kita jadikan label dari grafik

for($bulan = 1;$bulan < 13;$bulan++)

1	for($bulan = 1;$bulan < 13;$bulan++)

Baris 5 kita membuat perulangan dengan menggunakan perintah for, dimana for diawal dari variabel $i dengan nilai 1, dan melakukan perulangan 12 kali, ini kita gunakan untuk menjadi bulan, yang nantinya digunakan sebagai perhitungan data penjualan perbulannya

$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where MONTH(tgl_penjualan)='$bulan'");

1	$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where MONTH(tgl_penjualan)='$bulan'");

Baris 7 setiap perulangannya kita buat query untuk menghitung jumlah pada kolom jumlah dari tabel tb_penjualan yang terjadi pada bulan di variabel $i yaitu dari angka 1 – 12

$row = $query->fetch_array();

1	$row = $query->fetch_array();

Baris 8 kita buat variabel $row untuk menyimpan hasil dari query baris 7

$jumlah_produk[] = $row['jumlah'];

1	$jumlah_produk[] = $row['jumlah'];

Baris 9 kita membuat array $jumlah_produk, untuk menyimpan data jumlah penjumlahan disetiap bulannya.

Nah sampai sini kita memiliki 2 array :

$label yang berisi nama – nama bulan
$jumlah_produk yang berisi jumlah penjualan di masing – masing bulan

<script type="text/javascript" src="Chart.js"></script>

1	<script type="text/javascript" src="Chart.js"></script>

Baris 16 kita memanggil file Chart.js agar kita bisa membuat grafik dengan menggunakan Chart.js

<canvas id="myChart"></canvas>

1	<canvas id="myChart"></canvas>

Baris 20 kita membuat sebuah object dengan menggunakan tag <canvas> dimana didalamnya kita menuliskan nama id=”myChart”

Perintah yang ada di library chart.js ini kita ambil dari dokumentasi chart.js, jadi anda tidak perlu mengetahui fungsinya perbaris yang terpenting anda mengetahui bagian – bagian pentingnya.

var ctx = document.getElementById("myChart").getContext('2d');

1	var ctx = document.getElementById("myChart").getContext('2d');

Baris 25 kita menuliskan myChart itu adalah id dari object yang kita buat di baris 20

label: 'Grafik Penjualan',

1	label: 'Grafik Penjualan',

Baris 31 kita menuliskan label dari chart, karena sebelumnya kita telah memiliki array dengan nama $label yang berisi daftar nama bulan, sehingga kita tinggal menggunakan perintah json_encode untuk konversi array $label menjadi bentuk JSON

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

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

Baris 32 kita menuliskan bagian data dari chart, karena sebelumnya kita telah memiliki array dengan nama $jumlah_produk yang berisi jumlah dari penjualan barang perbulan, sehingga kita tinggal menggunakan json_encode untuk konversi array $jumlah_produk menjadi bentuk JSON

Untuk warna disini kita sengaja tidak set, sehingga grafik menampilkan warna defaultnya yaitu abu – abu

Membuat Grafik PIE

Berikutnya kita akan membuat grafik PIE untuk menampilkan presentase penjualan dengan bentuk PIE, baik silahkan buka file grafik_pie.php yang sebelumnya telah kita buat, lalu isikan dengan code dibawah ini :

<?php
include('koneksi.php');
$produk = mysqli_query($koneksi,"select * from tb_barang");
while($row = mysqli_fetch_array($produk)){
	$nama_produk[] = $row['barang'];
	
	$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");
	$row = $query->fetch_array();
	$jumlah_produk[] = $row['jumlah'];
}
?>
<!doctype html>
<html>

<head>
	<title>Pie Chart</title>
	<script type="text/javascript" src="Chart.js"></script>
</head>

<body>
	<div id="canvas-holder" style="width:50%">
		<canvas id="chart-area"></canvas>
	</div>
	<script>
		var config = {
			type: 'pie',
			data: {
				datasets: [{
					data:<?php echo json_encode($jumlah_produk); ?>,
					backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
					'rgba(54, 162, 235, 0.2)',
					'rgba(255, 206, 86, 0.2)',
					'rgba(75, 192, 192, 0.2)'
					],
					borderColor: [
					'rgba(255,99,132,1)',
					'rgba(54, 162, 235, 1)',
					'rgba(255, 206, 86, 1)',
					'rgba(75, 192, 192, 1)'
					],
					label: 'Presentase Penjualan Barang'
				}],
				labels: <?php echo json_encode($nama_produk); ?>},
			options: {
				responsive: true
			}
		};

		window.onload = function() {
			var ctx = document.getElementById('chart-area').getContext('2d');
			window.myPie = new Chart(ctx, config);
		};

		document.getElementById('randomizeData').addEventListener('click', function() {
			config.data.datasets.forEach(function(dataset) {
				dataset.data = dataset.data.map(function() {
					return randomScalingFactor();
				});
			});

			window.myPie.update();
		});

		var colorNames = Object.keys(window.chartColors);
		document.getElementById('addDataset').addEventListener('click', function() {
			var newDataset = {
				backgroundColor: [],
				data: [],
				label: 'New dataset ' + config.data.datasets.length,
			};

			for (var index = 0; index < config.data.labels.length; ++index) {
				newDataset.data.push(randomScalingFactor());

				var colorName = colorNames[index % colorNames.length];
				var newColor = window.chartColors[colorName];
				newDataset.backgroundColor.push(newColor);
			}

			config.data.datasets.push(newDataset);
			window.myPie.update();
		});

		document.getElementById('removeDataset').addEventListener('click', function() {
			config.data.datasets.splice(0, 1);
			window.myPie.update();
		});
	</script>
</body>

</html>

<?php

include('koneksi.php');

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

while($row = mysqli_fetch_array($produk)){

$nama_produk[] = $row['barang'];

$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

$row = $query->fetch_array();

$jumlah_produk[] = $row['jumlah'];

}

<!doctype html>

<html>

<head>

<title>Pie Chart</title>

</head>

<body>

</div>

var config = {

type: 'pie',

data: {

datasets: [{

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

backgroundColor: [

'rgba(255, 99, 132, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(255, 206, 86, 0.2)',

'rgba(75, 192, 192, 0.2)'

borderColor: [

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

'rgba(54, 162, 235, 1)',

'rgba(255, 206, 86, 1)',

'rgba(75, 192, 192, 1)'

label: 'Presentase Penjualan Barang'

}],

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

options: {

responsive: true

}

};

window.onload = function() {

var ctx = document.getElementById('chart-area').getContext('2d');

window.myPie = new Chart(ctx, config);

};

document.getElementById('randomizeData').addEventListener('click', function() {

config.data.datasets.forEach(function(dataset) {

dataset.data = dataset.data.map(function() {

return randomScalingFactor();

});

window.myPie.update();

});

var colorNames = Object.keys(window.chartColors);

document.getElementById('addDataset').addEventListener('click', function() {

var newDataset = {

backgroundColor: [],

data: [],

label: 'New dataset ' + config.data.datasets.length,

};

for (var index = 0; index < config.data.labels.length; ++index) {

newDataset.data.push(randomScalingFactor());

var colorName = colorNames[index % colorNames.length];

var newColor = window.chartColors[colorName];

newDataset.backgroundColor.push(newColor);

}

config.data.datasets.push(newDataset);

window.myPie.update();

});

document.getElementById('removeDataset').addEventListener('click', function() {

config.data.datasets.splice(0, 1);

window.myPie.update();

});

</script>

</body>

</html>

Untuk menampilkan grafik, silahkan mengakses menggunakan alamat : localhost/belajarchart/

Keterangan Code :

include('koneksi.php');

1	include('koneksi.php');

Baris 2 kita include file koneksi.php

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

1	$produk = mysqli_query($koneksi,"select * from tb_barang");

Baris 3 kita membuat query untuk mengambil data di tabel tb_barang, dan hasil query disimpan di variabel $produk.

while($row = mysqli_fetch_array($produk)){

1	while($row = mysqli_fetch_array($produk)){

Baris 4 kita extract hasil query dengan menggunakan perintah while, dimana setiap datanya disimpan di variabel $row

$nama_produk[] = $row['barang'];

1	$nama_produk[] = $row['barang'];

Baris 5 kita membuat array $nama_produk yang digunakan untuk menyimpan nama barang disetiap perulangan, array ini yang akan kita gunakan sebagai label grafik

$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

1	$query = mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

Baris 7 kita membuat query untuk menghitung jumlah di kolom jumlah pada tabel tb_penjualan untuk setiap barangnya, hasil query disimpan di variabel $query

$row = $query->fetch_array();

1	$row = $query->fetch_array();

Baris 8 kita membuat variabel $row yang digunakan untuk menyimpan hasil konversi ke dalam bentuk array

$jumlah_produk[] = $row['jumlah'];

1	$jumlah_produk[] = $row['jumlah'];

Baris 9 kita membuat array $jumlah_produk untuk digunakan menyimpan data jumlah penjualan disetiap barangnya.

Nah sampai sini kita memiliki 2 array :

$nama_produk yang berisi nama – nama barang
$jumlah_produk yang berisi jumlah penjualan di masing – masing barang

<script type="text/javascript" src="Chart.js"></script>

1	<script type="text/javascript" src="Chart.js"></script>

Baris 17 kita memanggil file Chart.js agar kita bisa membuat grafik dengan menggunakan Chart.js

<canvas id="chart-area"></canvas>

1	<canvas id="chart-area"></canvas>

Baris 22 kita membuat sebuah object dengan menggunakan tag <canvas> dimana didalamnya kita menuliskan nama id=”canvas-area”

Perintah yang ada di library chart.js ini kita ambil dari dokumentasi chart.js, jadi anda tidak perlu mengetahui fungsinya perbaris yang terpenting anda mengetahui bagian – bagian pentingnya.

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

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

Baris 29 kita menuliskan bagian data dari chart, karena sebelumnya kita telah memiliki array dengan nama $jumlah_produk yang berisi jumlah dari penjualan barang perbulan, sehingga kita tinggal menggunakan json_encode untuk konversi array $jumlah_produk menjadi bentuk JSON

label: 'Presentase Penjualan Barang'

1	label: 'Presentase Penjualan Barang'

Baris 42 kita bisa set bagian judul chart

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

1	labels: <?php echo json_encode($nama_produk); ?>},

Baris 44 kita menuliskan label dari chart, karena sebelumnya kita telah memiliki array dengan nama $nama_produk yang berisi daftar nama barang, sehingga kita tinggal menggunakan perintah json_encode untuk konversi array $nama_produk menjadi bentuk JSON

var ctx = document.getElementById('chart-area').getContext('2d');

1	var ctx = document.getElementById('chart-area').getContext('2d');

Baris 51 kita menuliskan bagian ID chart-area yang kita tulis pada baris 22

Source Code Hasil Belajar

Untuk hasil belajar bisa anda download disini :

Baik teman – teman sekian dulu pembahasan tutorial kali ini, kita sudah belajar membuat grafik untuk menampilkan data dari database MySQL dengan PHP menggunakan ChartJS, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial berikutnya.

ANDA INGIN SERIUS BELAJAR PEMROGRAMAN PHP ?

Seperti yang anda ketahui bahwa saat ini skill di bidang pemrograman sangatlah dibutuhkan, salah satunya adalah pemograman PHP.
Untuk anda yang ingin serius belajar pemrograman PHP, Warung Belajar Memiliki Beberapa Paket Tutorial yang bisa membantu anda dalam belajar Pemrograman PHP, dari mulai step – step dasar hingga mampu membuat aplikasi berbasis web dengan menggunakan PHP.

Paket Tutorial ini berisi video tutorial belajar pemrograman berbahasa indonesia, cocok sekali untuk anda yang sedang belajar pemrograman PHP, bahkan untuk orang awam sekalipun.

Paket Tutorial ini juga dilengkapi dengan study kasus yang akan mempermudah pemahaman anda dalam belajar pemrograman, Mari berinvestasi untuk menambah skill dalam menguasai Pemrograman PHP

9 thoughts on “Tutorial PHP Part 55 – Membuat Grafik Dari Database MySQL dan PHP dengan Chart.JS”

yus
September 25, 2019 at 2:09 pm

bagaimana jika dua datasets ? mohon bantuannya
- Aris SamsudinPost author
  October 30, 2019 at 10:36 am
  
  maksud dari datasets itu bagaiman ya kak ?
Andi
April 27, 2020 at 4:01 pm

Ilmunya bermanfaat buat saya.
Terima kasih.
herry D.
May 30, 2020 at 1:21 am

maaf ka kalo kita hitung harian gimana ka, bisa atau tidak?
- Aris SamsudinPost author
  June 2, 2020 at 10:35 pm
  
  bisa tergantung, jenis grafik dan dipilih, dan tata ulang terlebih dahulu untuk pola grafiknya dalam menampilkan datanya
Rahmalia
September 15, 2020 at 5:01 pm

Apa ada contoh laravel dengan kasus yang sama?
- Aris SamsudinPost author
  September 20, 2020 at 10:05 pm
  
  mohon maaf untuk saat ini laravel belum ada pembahasannya di warungbelajar, tapi secara garis besar sama caranya, mungkin cara mendapatkan datanya saja yang berbeda
Kharisma Devi
December 13, 2020 at 8:57 pm

jika hasilnya blank, tidak muncul grafik maupun pesan eror itu masalahnya dimana ya kira-kira thor?
- Aris SamsudinPost author
  December 15, 2020 at 7:01 am
  
  coba cek di error console, dengan menekan ctrl + shift + i, atau coba samakan dengan source code yang kita sertakan

Warung Belajar

Tutorial PHP Part 55 – Membuat Grafik Dari Database MySQL dan PHP dengan Chart.JS

Persiapan Library Chart.js

Buat Folder Project

Membuat Database

Membuat File Koneksi.php

Membuat Grafik Penjualan Per Barang

Membuat Laporan Penjualan Per Bulan

Membuat Grafik PIE

Source Code Hasil Belajar

ANDA INGIN SERIUS BELAJAR PEMROGRAMAN PHP ?

Tutorial Seminggu Menguasai PHP Dan MySQL

Tutorial HTML White Box – Panduan Belajar HTML Lengkap

Tutorial Web Programming Black Box – Tutorial Belajar HTML, CSS, Bootstrap 4, PHP OOP, dan MySQL – Study Kasus Membuat Aplikasi Sistem Management Stok Barang

Tutorial Membuat Aplikasi Dengan Codeigniter, Javascript Dan Ajax Jquery

Tutorial Membangun Layanan SMS Gateway Berbasis Client Server

Tutorial Membuat Aplikasi Dinamis Dengan HTML CSS Boostrap PHP Dan MySQL

TUTORIAL MEMBANGUN APLIKASI BERBASIS WEB DENGAN PHP MYSQL DAN BOOTSTRAP

Tutorial Tips Dan Trik Aplikatif Master PHP

Related

9 thoughts on “Tutorial PHP Part 55 – Membuat Grafik Dari Database MySQL dan PHP dengan Chart.JS”

Leave a Reply to Aris Samsudin Cancel reply

Persiapan Library Chart.js

Buat Folder Project

Membuat Database

Membuat File Koneksi.php

Membuat Grafik Penjualan Per Barang

Membuat Laporan Penjualan Per Bulan

Membuat Grafik PIE

Source Code Hasil Belajar

ANDA INGIN SERIUS BELAJAR PEMROGRAMAN PHP ?

Tutorial Seminggu Menguasai PHP Dan MySQL

Tutorial HTML White Box – Panduan Belajar HTML Lengkap

Tutorial Web Programming Black Box – Tutorial Belajar HTML, CSS, Bootstrap 4, PHP OOP, dan MySQL – Study Kasus Membuat Aplikasi Sistem Management Stok Barang

Tutorial Membuat Aplikasi Dengan Codeigniter, Javascript Dan Ajax Jquery

Tutorial Membangun Layanan SMS Gateway Berbasis Client Server

Tutorial Membuat Aplikasi Dinamis Dengan HTML CSS Boostrap PHP Dan MySQL

TUTORIAL MEMBANGUN APLIKASI BERBASIS WEB DENGAN PHP MYSQL DAN BOOTSTRAP

Tutorial Tips Dan Trik Aplikatif Master PHP

Share this:

Related

You May Also Like

Tutorial Belajar PHP Part 34 – Memahami Keyword $this dan self di OOP PHP

Tutorial Belajar PHP Part 27 – Penanganan Form di PHP

Tutorial PHP Part 47 – Menggunakan Password_hash dan Password_verify pada PHP

9 thoughts on “Tutorial PHP Part 55 – Membuat Grafik Dari Database MySQL dan PHP dengan Chart.JS”

Leave a Reply to Aris Samsudin Cancel reply