Membuat grafik simpel untuk web dengan HTML

Bagi yang senang bermain dengan HTML, suatu ketika akan berhadapan dengan sistem informasi berbasis web. Kadang sistem informasi tersebut memerlukan bantuan visualisasi dengan grafik. Dalam PHP telah disediakan fitur dengan menggunakan JPGraph atau libPNG untuk men-generate grafik dan menjadi gambar image. Namun demikian, tidak semua web server apache, php, mysql langsung disupport dengan kelengkapan tambahan library tersebut.Untuk mengatasinya, kita dapat menggunakan beberapa teknik sederhana untuk membuat sebuah grafik. Kuncinya adalah di HTML saja.

Sebagai contoh saya memiliki data sebagai berikut:

Asemsaurus	Bimosaurus	Cocotsaurus	Dengkulmusaurus
10%	20%	60%	10%

Dan kita akan menjadikan perolehan angka Asemsaurus, Bimosaurus, Cocotsaurus, Dengkulmusaurus tersebut pada Grafik seperti ini:

Asemsaurus	10%
Bimosaurus	20%
Cocotsaurus	60%
Dengkulmusaurus	10%

Nah bagaimana tekniknya?

Sederhana saja. Yaitu dengan cara membuat sebuah background warna, yang widthnya adalah disesuaikan dengan variabel angka. Untuk penggunaan persen, dapat langsung menggunakan persentase lebar.

<div style="background:#3399ff; text-align:center; float:left; width:10%">10%</div>

akan menghasilkan elemen seperti berikut:

10%

Angka 10% yang dimiliki, akan digunakan untuk menyesuaikan lebarnya grafik. Mudah bukan? Untuk tabel di atas, kira-kira scriptnya adalah seperti demikian:

Script:

<table>
<tr style="height:15px;">
<th style="background:#ffffff;; color:#000000;">Asemsaurus</th>
<td style="width:300px">

<div style="background:#ff0000; text-align:center; float:left; width:10%">10%</div>

</td></tr>
<tr style="height:15px;">
<th style="background:#ffffff; color:#000000;">Bimosaurus</th>
<td style="width:300px">

<div style="background:#99ff33; text-align:center; float:left; width:20%">20%</div>

</td>
</tr>
<tr style="height:15px;">
<th style="background:#ffffff; color:#000000;">Cocotsaurus</th>
<td style="width:300px">

<div style="background:#ff6633; text-align:center; float:left; width:60%">60%</div>

</td>
</tr>
<tr style="height:15px;">
<th style="background:#ffffff; color:#000000;">Dengkulmusaurus</th>
<td style="width:300px">

<div style="background:#3399ff; text-align:center; float:left; width:10%">10%</div>

</td>
</tr>
</table>



bimosaurus

Nah, selanjutnya progammer PHP dapat melakukan pengambilan nilai dari database atau dari sebuah input untuk kemudian dimasukkan dalam value yang akan dijadikan sebagai width tersebut, yang akan saya posting, kapan-kapan..CMIIW



Sekian

Bimosaurus