Friday, April 23, 2010

Membuat Grafik Batang (Vertikal) Dengan Menggunakan PHP


Sekarang saya mau sharing cara membuat grafik data vertikal dengan menggunakan PHP. Sama seperti pada artikel sebelumnya tentang Membuat Grafik Batang (Horizontal) Dengan Menggunakan PHP dan CSS, kita buat dulu database misalkan dengan nama db_toko_saya dan data tabelnya sebagai berikut :
CREATE TABLE `tpenjualan` (
`id` int(11) NOT NULL auto_increment,
`nama_barang` varchar(255) collate latin1_general_ci NOT NULL,
`jumlah_penjualan` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=5 ;
--
-- Dumping data for table `tpenjualan`
--
INSERT INTO `tpenjualan` (`id`, `nama_barang`, `jumlah_penjualan`) VALUES
(1, 'Pensil', 15),
(2, 'Penggaris', 367),
(3, 'Buku', 90),
(4, 'Penghapus', 125);
Selanjutnya kita akan membuat grafik (vertikal) dengan nama_barang sebagai variabelnya dan persentase jumlah_penjualan sebagai nilainya. Cara sederhananya seperti ini: buat sebuah tabel dimana jumlah kolomnya (td) sebanyak jumlah variabel, pada masing-masing kolom dibuat lagi tabel sebagai grafik batangnya dengan tinggi = persentase jumlah penjualan. Ngerti ga? Fuuuhhh... saya kurang mampu dalam menjelaskan, langsung aja deh lihat kode keseluruhannya :
<?php
//Koneksi ke mysql
$host = "localhost"; $user = "root"; $pass = ""; $db = "db_toko_saya";
$koneksi = mysql_connect($host,$user,$pass) or die("Koneksi error : ".mysql_error());
mysql_select_db($db,$koneksi) or die ("Database tidak ditemukan : ".mysql_error());
//Menghitung total keseluruhan jumlah penjualan
$sum = mysql_query("select sum(jumlah_penjualan) as tot from tpenjualan");
$total = mysql_fetch_array($sum);
/* Menghitung jumlah data kemudian tambah 1 untuk pengisian colspan, maksudnya untuk membuat baris judul grafik pada baris pertama dan menampilkan total jumlah penjualan keseluruhan pada baris terakhir tabel */
$query = mysql_query("select * from tpenjualan");
$jumdata = mysql_num_rows($query);
$jumdata++;
echo"
<table border=0 cellpadding=0 cellspacing=5 bgcolor='#009900'>
<tr height=50>
<td colspan=$jumdata align='center'>
<p><font color='#FFFFFF'><b>GRAFIK PERSENTASE<br>JUMLAH PENJUALAN BARANG<br>TOKO SAYA</b></font></p>
</td>
</tr>
<tr valign='bottom' height='200px'>
<td></td>";


/* Menambah kolom tabel. round digunakan untuk pembulatan digit angka di belakang koma */
while($data=mysql_fetch_array($query))
{
$panjang = round($data[jumlah_penjualan]/$total[tot]*100, 2);
echo"
<td width='70px' align='center' bgcolor='#82FFB7'>
$panjang%";
//Membuat grafik vertikal
echo"<table height='$panjang%' bgcolor='#DD0000' border=0 width='20px'>
<tr><td></td></tr></table>
</td>";
}
/* Baris baru untuk menampilkan jumlah penjualan */
echo"
</tr>
<tr>
<td align='right'><font color='#FFFFFF'>Jumlah</font></td>";
$query = mysql_query("select * from tpenjualan");
while($data=mysql_fetch_array($query))
{
echo"
<td align='center' width='70px' bgcolor='#FFFFFF'>$data[jumlah_penjualan]</td>";
}
/* Baris baru untuk menampilkan nama barang */
echo"
</tr>
<tr>
<td align='right'><font color='#FFFFFF'>Nama Barang</font></td>";
$query = mysql_query("select * from tpenjualan");
while($data=mysql_fetch_array($query))
{
echo"
<td align='center' width='70px' bgcolor='#FFFFFF'>$data[nama_barang]</td>";
}
echo"
</tr>
<tr>
<td colspan=$jumdata align='center'>
<font color='#FFFFFF'><b>Total Jumlah Penjualan = $total[tot]</b></font>
</td>
</tr>
</table>";

?>
Kalau benar maka hasilnya akan seperti ini :

Untuk mempercantik tampilan, atur-atur sendiri sesuai selera asalkan jangan satu warna semua, kalau code bener tapi ga nampil kan percuma, betul?

2 comments:

liyn said...

untuk membuat form inputnya gimana?

Sandi Luck said...

saya coba tapi tinggi grafiknya sama semua padahal persentase nya beda, semua saya copy dari atas gan.
thx

Post a Comment