Buat Grafik Sederhana dengan PHP, MySQL dan CSS


grafik

Setiap laporan biasanya sering dibuat grafik untuk mengetahui perkembangannya.

Btw yang saya buat ini grafik atau diagram to? ah, gak usah dipermasalahin, langsung saja caranya :

– Download dulu scriptnya di sini atau dropboxgithub

– Extract file grafik.rar kedalam htdocs/grafik

– Import file database.sql ke dalam phpMyAdmin

buka http://localhost/phpmyadmin -> klik import -> browse (masukkan file database.sql) -> GO

– Buka alamatnya : http://localhost/grafik

#semoga berhasil

#####################################################

Penjelasan Script

#####################################################

<html>
<head>
<title>Latihan Membuat Grafik</title>
</head>
<body>
<center>
<h1>Grafik Jumlah Pelanggan</h1>
<form action="" method="post">
<select name="bulan">
<option value="">Pilih Bulan</option>
<?php
for ($i = 1; $i <= 12; $i++) {
echo '<option value="' . $i . '">' . $i . '</option>';
}
?>
</select>
<input type="submit" value="OK"/>
</form>
<?php
if (!empty($_POST['bulan'])) {
echo "<h2>Grafik Bulan Ke $_POST[bulan]</h2>";
//koneksi database
mysql_connect("localhost", "root", "");
mysql_select_db("grafik");//query panggil data_grafik
$query = mysql_query("select * from data_grafik where bulan=$_POST[bulan]");
$record = mysql_fetch_array($query);//variabel data grafik
$jumlahAnakAnak = $record['anak_anak'];
$jumlahRemaja = $record['remaja'];
$jumlahDewasa = $record['dewasa'];

//cari nilai terbesar
if ($jumlahAnakAnak >= $jumlahRemaja and $jumlahAnakAnak >= $jumlahDewasa) {
$max = $jumlahAnakAnak;
} else if ($jumlahRemaja >= $jumlahAnakAnak and $jumlahRemaja >= $jumlahDewasa) {
$max = $jumlahRemaja;
} else if ($jumlahDewasa >= $jumlahAnakAnak and $jumlahDewasa >= $jumlahRemaja) {
$max = $jumlahDewasa;
}

//hitung panjang grafik
$Tmaksimal = 100 / $max;
$awal = 300;
$a = $jumlahAnakAnak * $Tmaksimal;
$ay = 100 - $a;
$ax = ($ay * $awal) / 100;

$b = $jumlahRemaja * $Tmaksimal;
$by = 100 - $b;
$bx = ($by * $awal) / 100;

$c = $jumlahDewasa * $Tmaksimal;
$cy = 100 - $c;
$cx = ($cy * $awal) / 100;
?>

<div style="height: 300px;border-left: 4px solid;border-bottom: 4px solid;margin: 70px;padding-top: 50px">
<div style="border: 1px solid;margin-top:<?php echo "$ax"; ?>px; height: <?php echo "$a"; ?>%;width: 100px;margin-left: 50px;text-align: center;float: left">
<?php //echo "$jumlahAnakAnak"." (".$a."%)" ?>
<img width="100%" height="100%" src="images/red.jpg"/>
<?php echo "$jumlahAnakAnak" ?>

</div>
<div style="border: 1px solid;margin-top:<?php echo "$bx"; ?>px; height: <?php echo "$b"; ?>%;width: 100px;margin-left: 50px;text-align: center;float: left">
<img width="100%" height="100%" src="images/green.jpg"/>
<?php echo "$jumlahRemaja" ?>
</div>
<div style="border: 1px solid;margin-top:<?php echo "$cx"; ?>px; height: <?php echo "$c"; ?>%;width: 100px;margin-left: 50px;text-align: center;float: left">
<img width="100%" height="100%" src="images/blue.jpg"/>
<?php echo "$jumlahDewasa" ?>
</div>
<div style="clear: both"></div>
</div>
<div style="margin-top: -40px;margin-left:-760px">
<table align="center">
<tr>
<td><img width="15px" src="images/red.jpg"/></td>
<td>Anak-Anak</td>
</tr>
<tr>
<td><img width="15px" src="images/green.jpg"/></td>
<td>Remaja</td>
</tr>
<tr>
<td><img width="15px" src="images/blue.jpg"/></td>
<td>Dewasa</td>
</tr>
</table>
</div>
<?php
}
?>
</center>
</body>
</html>

– Untuk koneksi databasenya sesuaikan dulu dengan settingannya, biasanya settingan default host:localhost, user:root, password:(dikosongin)

– Untuk pengaturan tinggi diagram, coba cari di script dengan keyword height: 300px ,ubah saja ukurannya

– Warna grafik juga bisa dirumah, setting aja di gambarnya,

– Kenapa saya menggunakan gambar dalam pengisian warna pada grafik? karena pada saat print via browser, kalau hanya warna di CSS, warna tersebut tidak bisa di print, jadi cuma muncul border di grafik aja

– Jadi, algoritma grafik yang saya buat adalah

1. Sebelumnya pilih bulan karena data yang diambil berdasarkan bulan

2. Mencari nilai tertinggi diantara ketiga data (anak-anak, remaja dan dewasa), nilai tertinggi tersebut digunakan untuk menampilkan tinggi maksimum grafik

3. Yang bukan nilai tertinggi, nilainya akan dipersentasekan dengan nilai maksimum, misalnya ada data 20,40,100. nilai maksimumnya kan 100, jadi untuk tingginya 100% itu maksimal, yang lainnya 40% dan 20 %

4. Hasil persentase tersebut di panggil kedalam CSS inline untuk menampilkan hasil grafiknya

5 thoughts on “Buat Grafik Sederhana dengan PHP, MySQL dan CSS

  1. Pingback: Buat Grafik Sederhana Dengan Php Mysql Dan Css Heru | Tempat Wisata Indonesia

  2. Wuelok, pengalaman dari pembuatan sistem di Magelang, bisa nambah inspirasi buat postingan mu, hehehe….

    Nice 😀

  3. makasih banget, Mas. saya lagi mencari ini. Kebanyakan tutorial menyarankan pakai jgraph, agak ribet menurut saya.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s