Computer Hacker: Tutorial PHP - Membuat Grafik Data Vertikal

dengan format Graphic Batang

ni cara bikin grafik sederhana tanpa gambar di PHP, dengan bentuk vertikal

pertama kita butuh sql data dari database:
bikin database, dengan nama: graph_dbase

ni bwat table SQL na:

Code:

CREATE TABLE `report_toko` (
`id` int(11) NOT NULL auto_increment,
`nama_toko` varchar(255) NOT NULL default '',
`laba` int(11) NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `report_toko`
--

INSERT INTO `report_toko` VALUES (1, 'Toko A', 100000);
INSERT INTO `report_toko` VALUES (2, 'Toko B', 25000);
INSERT INTO `report_toko` VALUES (3, 'Toko C', 15000);
INSERT INTO `report_toko` VALUES (4, 'Toko D', 5000);

wuki singkat saja, gw mao bikin koneksi dlo:

Code:

$varData = array('localhost', 'root', '', 'graph_dbase');
list($host, $user, $pass, $db) = $varData;
$con = mysql_connect($host, $user, $pass);
mysql_select_db($db, $con) or die('ERROR DBASE CON');

ambil query untuk jumlah terbesar dari laba (MAX) dan total seluruh laba (SUM) dalam baris table:

Code:

$qry = mysql_query("SELECT * FROM report_toko") or die('ERROR REPORT DATA');
//ambil data MAX dari laba
$max = mysql_query("SELECT MAX(laba) FROM report_toko") or die('ERROR MAX DATA');
list ($most_value) = mysql_fetch_row($max);
mysql_free_result($max);

//jumlahkan (SUM) seluruh nilai laba dalam baris data sebagai ttlLaba
$sum = mysql_query("SELECT SUM(laba) AS ttlLaba FROM report_toko") or die('ERROR SUM DATA');
$ttl = mysql_fetch_array($sum);

sebagai keluaran data, gw memanfaatkan table bwat bikin graphic na menjadi vertical. Jadi kaga make fungsi2 gambar lib dari PHP.

Code:

<table border=0 cellspacing=5 cellpadding=0 align="center" style="background-color:#ABCDEF;border:1px solid blue;"><tr>

<?
while($row=mysql_fetch_array($qry))
{
if($most_value==0)
$most_value=1; // menghandle nilai field laba yang nol
//mulai proses data value untuk graphic
$graphLineValue = round(($row[laba] * 100) / $most_value);
$percent = round(($row[laba] * 100) / $ttl[ttlLaba], 2);
?>
<td valign="bottom" title="Nama Toko: <? echo $row['nama_toko']; ?>"><table border=0 cellpadding=0 cellspacing=2>
            <tr align=center valign=bottom><td style="background-color:#E0F0FF;"><table border=0 cellspacing=0 cellpadding=0 width=100%>
            <tr align=center><td height=102 valign=bottom nowrap style="color:black;font-family:Arial, Helvetica;font-size:12px;"><? echo $percent; ?> %</td>
         </tr><tr align=center valign=bottom><td><table border=0 cellspacing=0 cellpadding=0><tr><td style="border:2px outset white;" bgcolor="#A0C0F0" title="<? echo "Rp. ".number_format($graphLineValue,3,"",".").",-".""; ?>"><div style="width:20px; height:<? echo $graphLineValue; ?>px; line-height:1px; font-size:1px;"></div></td></tr></table></td></tr></table></td></tr><tr align=center>
            <td style="color:#000000;background-color:#FFFFFF;border:2px groove white;font-family:Arial, Helvetica;font-size:12px;" nowrap> <? echo "Rp. ".number_format($graphLineValue,3,"",".").",-".""; ?>  </td>
         </tr><tr><td bgcolor="#C0E0FF" style="color:#000000;background-color:#C0E0FF;border:2px groove white;font-family:Arial, Helvetica;font-size:12px;text-align:center;"> <? echo $row['nama_toko']; ?> </td>
         </tr></table></td>
<?
}
?>
</tr></table>

<div style="font-family:'Courier New'; font-size:24px; font-weight:bold; padding-top:20px; text-align:center;">
<?
echo "Total Laba = Rp. ".number_format($ttl[ttlLaba],0,"",".").",-"."";
?>
</div>

sebagai penentu tinggi dari graphic na ada pada baris:

Code:

$graphLineValue = round(($row[laba] * 100) / $most_value);

NOTE: round = pembulatan digit angka dibelakang koma

sedangkan untuk perhitungan nilai persentase na ada pada baris:

Code:

$percent = round(($row[laba] * 100) / $ttl[ttlLaba], 2);

jadi kalo di preview di browser, jadi ke gini:

Computer Hacker

Search This Blog

March 11, 2024

Tutorial PHP - Membuat Grafik Data Vertikal

No comments: