Kali ini saya akan memberikan tutorial cara membuat grafik sendiri di PHP, istilah grafik sendiri adalah suatu visualisasi data table, yang dimana table tersebut berupa angka – angka yang dapat ditampilkan ke dalam bentuk gambar.
Atau bisa juga definisi grafik yang lainnya yaitu suatu kombinasi antara angka, huruf, simbol, gambar, lambang, perkataan, lukisan, yang tampilkan oleh satu media untuk memberi konsep maupun ide.
ok langsung saja buat project dengan nama terserah anda, kemudian salin kode berikut dan simpan file dengan nama index.php
<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT GRAFIK SENDIRI</title>
<style type="text/css">
body { font-size: 14px; font-family: Verdana; }
.container { margin: auto; width: 500px; border: 2px solid #EBEBEB; padding: 10px; }
.container h3,
.container h5 { margin: 10px; }
.container .layer-grafik { margin-bottom: 10px; display: block; background-color: #EEEEEE; }
.container .layer-grafik:last-child { margin-bottom: 0; }
.container .layer-grafik .grafik { height: 50px; border-left: 3px solid #000000; }
.container .layer-grafik .grafik .label-grafik { position: absolute; margin-top: 15px; margin-left: 5px; font-weight: bold; color: #F7F7F7; }
</style>
</head>
<body>
<div class="container">
<h3><center>PRESENTASE JUMLAH SISWA SD TRITUNGGAL</center></h3>
<h5><center>TAHUN 2015</center></h5>
<hr />
<?php
// data utama
$datas = array(
'pria'=>359,
'wanita'=>317
);
$warna_grafik = array(
'pria'=>'#0075CC',
'wanita'=>'#9D2416'
);
$total = null;
foreach($datas as $key=>$val){
$total += $val;
}
foreach($datas as $key=>$val){
$persen = ($val * 100) / $total;
$hasil = number_format($persen,2);
?>
<div class="layer-grafik">
<div class="grafik" style="background-color:<?php echo $warna_grafik[$key]; ?>; width:<?php echo $hasil; ?>%;">
<span class="label-grafik"><?php echo ucwords($key); ?> : <?php echo $hasil; ?>%</span>
</div>
</div>
<?php } ?>
</div>
</body>
</html>
sekarang jalankan project yang anda buat dengan browser dan lihat hasilnya, untuk $datas anda bisa mengambil data dari database dan untuk $warna_grafik anda bisa merubah warnanya dan menambahkan warna lainya tergantung data yang akan anda tampilkan.OK, sampai disini dulu tutorial kali ini, selamat mencoba dan semoga bisa bermanfaat
No comments:
Post a Comment