Pembuatan grafik tidak harus rumit dengan tools yang harus dimasukkan terlebih dahulu. Grafik masih bisa diolah dengan menggunakan kombinasi teknik CSS dan HTML. Namun , karena keterbatasan CSS dan HTML adalah grafik tidak dapat dibentuk. Berikut adalah contoh grafik yang mudah dipelajari yaitu grafik batang, dimana seluruh value akan dibentuk dengan menggunakan Batang/bar.
Pembuatan grafik ini cukup mudah. Yaitu hanya dengan melakukan pembuatan elemen DIV yang diberi warna tertentu, dan diberi panjang tertentu, yang tentu saja panjangnya nanti akan menyesuaikan dari dalam tabel asal.
Sebagai contoh kita membuat Grafik Penjualan Handphone Per Bulan, apa yang terjadi apa bila kita membuat sintaks seperti demikian:
<h3 align="center">Grafik Penjualan Handphone Sederhana</h3>
<table rules="none" border="3" cellpadding="5" align="center">
<thead>
<th colspan="2">Jan-2019</th>
<th colspan="2">Feb-2019</th>
<th colspan="2">Mar-2019</th>
<th colspan="2">Apr-2019</th>
<th colspan="2">May-2019</th>
<th colspan="2">Jun-2019</th>
</thead>
<tbody>
<tr>
<td valign=bottom align=right>
75
<div style="height:74px; background: #4B77BE;"></div>
</td>
<td valign=bottom align=right>
84
<div style="height:84px; background: #EB9532;"></div>
</td>
<td valign=bottom align=right>
62
<div style="height:62px; background: #4B77BE;"></div>
</td>
<td valign=bottom align=right>
53
<div style="height:53px; background: #EB9532;"></div>
</td>
<td valign=bottom align=right>
38
<div style="height:38px; background: #4B77BE;"></div>
</td>
<td valign=bottom align=right>
103
<div style="height:103px; background: #EB9532;"></div>
</td>
<td valign=bottom align=right>
114
<div style="height:114px; background: #4B77BE;"></div>
</td>
<td valign=bottom align=right>
110
<div style="height:110px; background: #EB9532;"></div>
</td>
<td valign=bottom align=right>
94
<div style="height:94px; background: #4B77BE;"></div>
</td>
<td valign=bottom align=right>
91
<div style="height:91px; background: #EB9532;"></div>
</td>
<td valign=bottom align=right>
86
<div style="height:86px; background: #4B77BE;"></div>
</td>
<td valign=bottom align=right>
75
<div style="height:75px; background: #EB9532;"></div>
</td>
</tr>
</tbody>
</table>
<h5 align="center">Keterangan :</h5>
<table align="center" rules="none" border="1" cellpadding="5">
<tr>
<td></td>
<td><div style="height:13px; width: 13px; background: #4B77BE;"></div></td>
<td>Merk SUNGSANG</td>
<td></td>
</tr>
<tr>
<td></td>
<td><div style="height:13px; width: 13px; background: #EB9532;"></div></td>
<td>Merk NODIA</td>
<td></td>
</tr>
</table>
Nah ternyata tidaklah sulit. Untuk selanjutnya kita dapat melakukan manipulasi angka-angka tersebut dengan menggunakan PHP dan mengambil data dari database server MySQL..
Turorial membuat grafik sederhana HTML PHP