Pada artikel kali ini akan dibahas seputar grafik, lebih tepatnya menampilkan sebuah grafik data dinamis dengan menggunakan PHP.
Untuk menampilkan data berupa grafik dengan hanya menggunakan PHP saja tentulah tidak mungkin, karena PHP itu sendiri hanya bertindak sebagai pengolah atau pemroses data saja.
Solusinya adalah dengan menggunakan plugin tambahan, biasanya plugin tersebut dibuat menggunakan JavaScript atau jQuery yang nanti dipadukan dengan PHP.
Disini akan dicoba menampilkan grafik data dinamis dengan menggunakan PHP dan Plugin Grafik dari MorrisJS
<?php
include "koneksi.php";
$sql = "SELECT * FROM tbl_laptop";
$query = mysqli_query($konek, $sql) or die (mysqli_error());
$chart_data = '';
while($data = mysqli_fetch_array($query)){
$chart_data .="{
tahun:'".$data["tahun"]."',
merk_abc:".$data["merk_abc"].",
merk_def:".$data["merk_def"].",
merk_xyz:".$data["merk_xyz"]."},
";
}
$chart_data = substr($chart_data, 0, -2);
?>
<!DOCTYPE html>
<html>
<head>
<title>Grafik Morris.js | Kursus Web YELLOWWEB</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Grafik dengan Plugin Morris</h2>
<div class="box-left" style="float: left; width: 50%;">
<div id="chart"></div>
</div>
<div class="box-right" style="float: right; width: 50%;">
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Tahun</th>
<th>Merk ABC</th>
<th>Merk DEF</th>
<th>Merk XYZ</th>
</tr>
</thead>
<tbody>
<?php
include "koneksi.php";
$no = 1;
$sql = "SELECT * FROM tbl_laptop";
$query = mysqli_query($konek, $sql) or die (mysqli_error());
while($data = mysqli_fetch_array($query)){?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data['tahun'];?></td>
<td><?php echo $data['merk_abc'];?></td>
<td><?php echo $data['merk_def'];?></td>
<td><?php echo $data['merk_xyz'];?></td>
</tr>
<?php $no++; ?>
<?php }
?>
</tbody>
</table>
<p style="font-style: italic; ">
Catatan<br>
Data yang ditampilkan langsung diambil secara dinamis dari Database Tabel Merk Laptop.
<br>
Untuk artikel lainnya silahkan mengunjungi situs <a href="https://www.yellowweb.id" target="_blank">www.yellowweb.id</a>
</p>
</div>
</div>
<script type="text/javascript">
Morris.Bar({
element: 'chart',
data:[<?php echo $chart_data; ?>],
xkey:'tahun',
ykeys:['merk_abc','merk_def','merk_xyz'],
labels:['MERK ABC','MERK DEF','MERK XYZ'],
hideHover: 'auto',
stacked:true
});
</script>
</body>
</html>
Teman-teman jangan lupa membuat database terlebih dahulu, serta file index.php untuk menampilkan data.
Secara keseluruhan skripnya dapat teman-teman lihat, dan hal perlu teman-teman ketahui adalah pada bagian tag html head disana terdapat link CDN yang mengarah ke plugin morris js.
<!DOCTYPE html>
<html>
<head>
<title>Grafik Morris.js | Kursus Web YELLOWWEB</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>Untuk bagian aktivasi akan diletakan pada bagian bawah, sebelum tag penutup body.
<script type="text/javascript">
Morris.Bar({
element: 'chart',
data:[<?php echo $chart_data; ?>],
xkey:'tahun',
ykeys:['merk_abc','merk_def','merk_xyz'],
labels:['MERK ABC','MERK DEF','MERK XYZ'],
hideHover: 'auto',
stacked:true
});
</script>untuk skrip proses tarik data (fetch) disini diletakan pada bagian atas DOCTYPE.
<?php
include "koneksi.php";
$sql = "SELECT * FROM tbl_laptop";
$query = mysqli_query($konek, $sql) or die (mysqli_error());
$chart_data = '';
while($data = mysqli_fetch_array($query)){
$chart_data .="{
tahun:'".$data["tahun"]."',
merk_abc:".$data["merk_abc"].",
merk_def:".$data["merk_def"].",
merk_xyz:".$data["merk_xyz"]."},
";
}
$chart_data = substr($chart_data, 0, -2);
?>Untuk menampilkan datanya sendiri, aktivasi akan memanggil id yang terdapat pada tag html body.
<div id="chart"></div>Selamat mencoba & Happy coding,…
Download Skrip:
https://drive.google.com/drive/folders/1bjY1re_kvM-4oa5vWgDPgbwdsr0m0zN0?usp=sharing
Demo:
https://www.yellowweb.id/demo/grafik-morris/
Sumber: