Risal's Blog: Membuat Grafik Batang (Horizontal) Dengan Menggunakan PHP dan CSS

Caranya sederhana banget, misalkan kita punya database 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);

Ga usah banyak basa-basi lah, kita langsung ke script aja ya :

<?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 jumlah penjualan
$sum = mysql_query("select sum(jumlah_penjualan) as tot from tpenjualan");
$total = mysql_fetch_array($sum);

//Grafik berada di dalam table
echo "
<table border=0 width=500 bgcolor='#82FFB7'>
<tr height=50><td align='center'><b>GRAFIK PENJUALAN BARANG<br>TOKO SAYA</b></td></tr>";

$query = mysql_query("select * from tpenjualan");
while($data = mysql_fetch_array($query))
{

/* Menghitung persentase penjualan barang dan membulatkan 2 digit angka di belakang koma */
$panjang = round($data[jumlah_penjualan]/$total[tot]*100, 2);

echo "
<tr><td><b>$data[nama_barang]</b> : $data[jumlah_penjualan] buah ($panjang%)
</td></tr><tr><td>
<div style='height: 10px; width: $panjang%; background-color: red;' title='$data[nama_barang] : $data[jumlah_penjualan] buah ($panjang%)'></div></td></tr>";

}

//Menampilkan total jumlah penjualan barang
echo "
<tr height=50><td align='center'><b>Total Jumlah Penjualan = $total[tot] buah</b></td></tr></table>";
?>

Kalau benar maka hasilnya akan seperti ini :