Penggunaan grafik biasanya untuk menampilkan
data yang dalam bentuk deskriptif, sehingga informasi tentang suatu data tertentu
menjadi lebih mudah dipahami dan tersampaikan kepada user. Grafik dapat diartikan sebagai suatu
kerangka atau gambar yang akan digunakan untuk membuat suatu objek visualisasi
dari data-data pada tabel dengan tujuan dapat memberikan informasi mengenai
suatu data dari pemberi informasi kepada penerima informasi tentang suatu data.
Grafik ditampilkan beragam macam dan bentuk, tergantung kebutuhan masing-masing yang ingin menapilkan atau menyampaikan informasi tentang data dalam bentuk grafik. Adapun bentuk-bentuk grafik diantaranya: Garifk Batang (bar chart), grafik garis (line chart), grafik lingkaran (pie grafi), grafik area (area chart), grafik donat (donut chart) dan grafik radar (radar chart). Dari beberapa grafik tersebut yang paling sering digunakan yaitu Garifk Batang (bar chart) termasuk dalam contoh tutorial tentang Menampilkan data grafik dengan PHP dan MySQL yang akan di simulasikan yaitu grafik batang seperti tampak pada gambar berikut:
Adapun materi
tutorial Menampilkan data grafik dengan PHP dan
MySQL yaitu sebagai berikut:
Langka pertama yaitu
buatlah sebuah database yang berfungsi untuk menampung data yang akan
ditampilkan dalam bentuk grafik (contoh: penjualan).
Selanjutnya buat tabel yang
berfungsi sebagai penyimpanan data (contoh tabel: barang).
Kemudian masukan (insert) beberapa contoh data kedalam tabel tersebut. Berikut merupakan gambar database, tabel dan hasil insert data sebanyak 7 (tujuh) contoh data:
Berdasarkan data tersebut
diatas maka, proses menampilkan grafik yang akan ditampilkan yaitu jumlah
barang yang telah terjual.
Sebelum membuat script Menampilkan
data grafik dengan PHP dan MySQL dibutuhkan
komponen javascript yang berfungsi untuk menampilkan grafik.
Adapun komponen tersebut dapat di peroleh dengan cara klik disini…
Apabila komponen berhasil
diperolah, selanjutnya komponen file javascript tersebut di ekstrak kemudian
disimpan kedalam folder projek kita didalam htdocs. Folder projek pada contoh
tutorial ini yaitu ‘grafik’ yang terletak di c:/xampp/htdocs/grafik/
Selanjutnya buatlah sebuah file PHP dan letakan pada folder grafik (contoh: index.php) yang berfungsi untuk menampilkan data grafik, berikut merupakan sitaks index.php:
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>kodingbuton.com</title>
</head>
<body
bgcolor="#CCFFFF">
<center>
<h3>Menampilkan data
grafik dengan PHP dan MySQL</h3>
<h3> Tutorial <a
href="https://www.kodingbuton.com/">kodingbuton.com</a></h3>
</center>
<div id="container" style="min-width: 310px; height:
400px; margin: 0 auto"></div>
<script
src="chart/highcharts.js"></script>
<script
src="chart/exporting.js"></script>
<script
src="chart/jquery-1.11.3.min.js"></script>
<!-- Javascript -->
<script
type="text/javascript">
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Penjualan Barang']
},
yAxis: {
title: {
text: 'Jumlah'
}
},
plotOptions:
{
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
tooltip: {
headerFormat: '<span
style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span
style="color:{point.color}">{point.name}</span>Jumlah :
<b>{point.y} Terjual</b>'
},
series:
[
<?php
$conn=($GLOBALS["___mysqli_ston"] =
mysqli_connect("localhost", "root", "")) or
die("Tidak Terkoneksi");
$db=mysqli_select_db($GLOBALS["___mysqli_ston"],
"penjualan") or die ("Database Tidak Ditemukan");
?>
<?php
$sql =
mysqli_query($GLOBALS["___mysqli_ston"], ("SELECT * FROM
barang"));
while ($oke =
mysqli_fetch_array($sql)) {
$jual =
$oke['terjual'];
?>
{
name: '<?php echo
$oke['nama_barang']; ?>',
data: [<?php echo
$jual ; ?>]
},
<?php } ?>
]
});
});
</script>
<!-- #END# Bar Chart -->
</body>
</html>
Keterangan
**:
Latar kuning : script yang
menampilkan grafik,
Latar
merah : komponen Javascript menampilkan grafik,
Teks merah : script koneksi ke database,
Teks coklat
: script select tabel database
Apabila telah selesai membuat script index.php, silahkan jalankan browser dan ketikan url pada address bar (contoh: localhost/cetak-laporan). Jika semua proses telah sesuai dan berjalan lancar maka halaman grafik akan tampak seperti contoh gambar pertama di atas.
Demikian pembahasan tutorial tentang Menampilkan data grafik dengan PHP dan MySQL, semoga apa yang saya bagikan ini dapat bermanfaat dan menjadi Inspirasi untuk membuat Source Code halaman website anda.
Post a Comment