Jika kamu ingin menampilkan statistik data dengan Diagram Lingkaran (Pie Chart), ada cara mudah untuk membuat Diagram Lingkaran di website. Dalam tutorial ini, saya akan menunjukkan cara membuat Diagram Lingkaran di PHP dengan menggunakan Database MySQL dan tanpa Database.
Mengunakan Database MySQL
1. Membuat Database dengan nama 'diagram', kemuadian create tabel 'skill' dengan menjalankan query berikut:CREATE TABLE `skill` ( `id` int(11) NOT NULL AUTO_INCREMENT, `pemograman` varchar(100) NOT NULL, `rating` int(5) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin12. File koneksi.php
<?php
$host="localhost";
$user="root";
$pw="";
$db="diagram";
$con=mysql_connect($host,$user,$pw);
$condb=mysql_select_db($db,$con);
if(!$condb){
echo"Db Not Found";
require"error.php";
}
?>
3. File index.php<!DOCTYPE html>
<html lang="id">
<head>
<title>Diagram Lingkaran PHP dengan Google Charts - BedahPHP.blogspot.co.id</title>
<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() {
var data = google.visualization.arrayToDataTable([
['Language', 'Rating'],
<?php
include "koneksi.php";
$sql=mysql_query("select pemograman, rating from skill");
while($row=mysql_fetch_array($sql)){
echo "['".$row['pemograman']."', ".$row['rating']."],";
}
?>
]);
var options = {
title: 'Skill Bahasa Pemograman',
width: 900,
height: 500,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!-- Menampilkan diagram lingkaran -->
<div id="piechart"></div>
</body>
</html>
Tanpa Database
Jika kamu ingin menampilkan Grafik tanpa menggunakan database, kamu cukup membuat data secara manual pada grafik.File index.php
<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() {
var data = google.visualization.arrayToDataTable([
['Task', 'My Skill'],
['PHP', 11],
['Visual Basic', 2],
['Phyton', 2],
['Java', 2],
['Android', 7]
]);
var options = {
title: 'Skill Bahasa Pemograman'
};
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>
DOWNLOAD SOURCE CODE DISINI