Membuat Chart atau Grafik dengan PHP dan MySQL

Membuat Chart atau Grafik dengan PHP dan MySQL. Malam sobat tutorialweb, kali ini saya akan sharing bagaimana cara membuat chart atau grafik dengan PHP dan MySQL. Kali ini saya akan membuat chart pie atau grafik lingkaran, dan menggunakan API dari Google Chart. Kalau pengen tahu dulu dimana bisa melihat alamat google chart bisa di https://developers.google.com/chart/

Sebenarnya google chart sendiri tidak hanya menyediakan grafik lingkaran saja, tapi menyediakan banyak sekali pilihan grafik yang bisa sobat gunakan, seperti grafik batang, silinter, garis dan jenis grafik lainnya yang tentunya bisa di kombinasikan dengan PHP dan MySQL untuk data yang ingin dimasukkan di grafik tersebut.

Lihat dokumentasinya di https://developers.google.com/chart/interactive/docs/

Langsung saja ke demo ya sob, kali ini saya akan membuat grafik lingkaran dengan data kelas, dimana kelas ini nantinya ada nama kelas dan jumlah siswa tiap kelas tersebut. Jadi intinya nanti yang ditampilkan adalah Nama kelas dan jumlah siswa perkelas. Tentunya data kelas ini dari database ya sob.

Ini contoh yang akan kita buat sob

Yuk kita mulai, pertama buat dulu databasenya. Dalam kasus ini saya buat database dengan nama tutorialweb_google_chart, kemudian silahkan dump script di bawah ini untuk mendapatkan tabel dengan nama kelas beserta kolom-kolomnya. Berikut ini kodenya:

CREATE TABLE `kelas` (
  `id` int(11) NOT NULL,
  `kelas` varchar(20) NOT NULL,
  `jumlah_siswa` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `kelas` (`id`, `kelas`, `jumlah_siswa`) VALUES
(1, 'Kelas X', 45),
(2, 'Kelas XI', 60),
(3, 'Kelas XII', 20);
ALTER TABLE `kelas`
  ADD PRIMARY KEY (`id`);
ALTER TABLE `kelas`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

CREATE TABLE `kelas` (

`id` int(11) NOT NULL,

`kelas` varchar(20) NOT NULL,

`jumlah_siswa` int(11) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `kelas` (`id`, `kelas`, `jumlah_siswa`) VALUES

(1, 'Kelas X', 45),

(2, 'Kelas XI', 60),

(3, 'Kelas XII', 20);

ALTER TABLE `kelas`

ADD PRIMARY KEY (`id`);

ALTER TABLE `kelas`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

Cek ya sob apakah sudah ada tabel kelasnya, jika ada masalah silahkan komentar di bawah.

Lanjut silahkan buat folder baru di server lokal sobat, namanya bebas yang penting ada namanya aja 🙂

Kemudian buat file dengan nama index.php, dan tuliskan kode di bawah ini:

<?php
//koneksi ke database
$conn = new mysqli("localhost", "root", "", "tutorialweb_google_chart");
if ($conn->connect_errno) {
    echo die("Failed to connect to MySQL: " . $conn->connect_error);
}
$rows = array();
$table = array();
$table['cols'] = array(
	//membuat label untuk nama nya, tipe string
	array('label' => 'Kelas', 'type' => 'string'),
	//membuat label untuk jumlah siswa, tipe harus number untuk kalkulasi persentasenya
	array('label' => 'Jumlah siswa', 'type' => 'number')
);
//melakukan query ke database select
$sql = $conn->query("SELECT * FROM kelas");
//perulangan untuk menampilkan data dari database
while($data = $sql->fetch_assoc()){
	//membuat array
	$temp = array();
	//memasukkan data pertama yaitu nama kelasnya
	$temp[] = array('v' => (string)$data['kelas']);
	//memasukkan data kedua yaitu jumlah siswanya
	$temp[] = array('v' => (int)$data['jumlah_siswa']);
	//memasukkan data diatas ke dalam array $rows
	$rows[] = array('c' => $temp);
}
//memasukkan array $rows dalam variabel $table
$table['rows'] = $rows;
//mengeluarkan data dengan json_encode. silahkan di echo kalau ingin menampilkan data nya
$jsonTable = json_encode($table);
?>
<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
	google.charts.load('current', {'packages':['corechart']});
	google.charts.setOnLoadCallback(drawChart);
	function drawChart() {
		// membuat data chart dari json yang sudah ada di atas
		var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
		// Set options, bisa anda rubah
		var options = {'title':'Data siswa',
					   'width':500,
					   'height':400};
		var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
		chart.draw(data, options);
	}
    </script>
</head>
<body>
	<!--Div yang akan menampilkan chart-->
    <div id="chart_div"></div>
</body>
</html>

<?php

//koneksi ke database

$conn = new mysqli("localhost", "root", "", "tutorialweb_google_chart");

if ($conn->connect_errno) {

echo die("Failed to connect to MySQL: " . $conn->connect_error);

}

$rows = array();

$table = array();

$table['cols'] = array(

//membuat label untuk nama nya, tipe string

array('label' => 'Kelas', 'type' => 'string'),

//membuat label untuk jumlah siswa, tipe harus number untuk kalkulasi persentasenya

array('label' => 'Jumlah siswa', 'type' => 'number')

);

//melakukan query ke database select

$sql = $conn->query("SELECT * FROM kelas");

//perulangan untuk menampilkan data dari database

while($data = $sql->fetch_assoc()){

//membuat array

$temp = array();

//memasukkan data pertama yaitu nama kelasnya

$temp[] = array('v' => (string)$data['kelas']);

//memasukkan data kedua yaitu jumlah siswanya

$temp[] = array('v' => (int)$data['jumlah_siswa']);

//memasukkan data diatas ke dalam array $rows

$rows[] = array('c' => $temp);

}

//memasukkan array $rows dalam variabel $table

$table['rows'] = $rows;

//mengeluarkan data dengan json_encode. silahkan di echo kalau ingin menampilkan data nya

$jsonTable = json_encode($table);

<html>

<head>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

// membuat data chart dari json yang sudah ada di atas

var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

// Set options, bisa anda rubah

var options = {'title':'Data siswa',

'width':500,

'height':400};

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Jika sudah silahkan simpan, dan coba buka di browser sobat, alamatnya ini sob: localhost/folder_sobat

Jangan salah ya sob, soalnya banyak yang buka nya itu hanya di klik dua kali pada file index.php nya, jadi gak jalan deh.

Seperti dilihat pada kode diatas, disana saya memasukkan API Google Chart dengan source yang online, jadi kalau pengen berhasil ya harus online dulu sobat. Atau bisa download dulu source nya.

Nah, sudah selesai sob, kalau ada error, grafik tidak tampil, atau yang lainnya silahkan tinggalkan komentar di bawah. Jangan lupa selalu kunjungi tutorialweb untuk tutorial pemrograman web terbaru.

Sekian dari saya, see u again.. 🙂

21 Comments

Anonim berkata:

Agustus 7, 2017 pukul 2:03 pm

Visitor Rating: 5 Stars

Anonim berkata:

September 6, 2022 pukul 2:43 pm

Visitor Rating: 1 Stars

Anonim berkata:

September 8, 2022 pukul 2:11 pm

Visitor Rating: 4 Stars

mirdad berkata:

September 12, 2022 pukul 11:49 am

Tks mas Fatoni, sangat membantu…

Anonim berkata:

September 13, 2022 pukul 11:17 am

Visitor Rating: 5 Stars

Anonim berkata:

September 17, 2022 pukul 9:17 am

Visitor Rating: 5 Stars

Anonim berkata:

Oktober 7, 2017 pukul 2:40 pm

Visitor Rating: 4 Stars

Anonim berkata:

Oktober 11, 2017 pukul 2:03 pm

Visitor Rating: 5 Stars

Anonim berkata:

Oktober 30, 2017 pukul 2:42 pm

Visitor Rating: 2 Stars

Anonim berkata:

November 7, 2022 pukul 2:01 pm

Visitor Rating: 1 Stars

Anonim berkata:

Desember 2, 2017 pukul 9:34 am

Visitor Rating: 5 Stars

Anonim berkata:

Desember 3, 2017 pukul 11:49 pm

Visitor Rating: 1 Stars

Anonim berkata:

Desember 25, 2017 pukul 3:23 pm

Visitor Rating: 5 Stars

Anonim berkata:

Februari 13, 2018 pukul 6:13 pm

Visitor Rating: 5 Stars

Hedi Sulyantiadi berkata:

Maret 26, 2018 pukul 4:33 pm

Bisa membuat Grafik distribusi Normal ?

- Fatoni berkata:
  
  Maret 26, 2018 pukul 6:33 pm
  
  maksudnya gan?
  
Anonim berkata:

April 25, 2023 pukul 7:43 pm

Visitor Rating: 4 Stars

Faris Zati berkata:

Mei 25, 2018 pukul 4:02 pm

$temp[] = array(‘v’ => (string)$data[‘kelas’]);
//memasukkan data kedua yaitu jumlah siswanya
$temp[] = array(‘v’ => (int)$data[‘jumlah_siswa’]);
//memasukkan data diatas ke dalam array $rows
$rows[] = array(‘c’ => $temp);

untuk ‘v’ dan ‘c’ maksudnya apa ya mas

- Fatoni berkata:
  
  Mei 28, 2018 pukul 2:48 pm
  
  suda bawaan dari program chart n ya
  
Anonim berkata:

Agustus 18, 2018 pukul 11:46 am

Visitor Rating: 5 Stars

rina berkata:

Oktober 12, 2019 pukul 4:57 pm

mau tanya, bagaimana kalau data yg di peroleh berupa array dan kita harus menampilkan grafik per index nya? terima kasih..

Membuat Chart atau Grafik dengan PHP dan MySQL

About the author

Fatoni

21 Comments

Leave a Comment X

You may also like

About the author

Fatoni

21 Comments

Leave a Comment X