Selamat malam, dan selamat begadang.
Kali ini ane mau berbagi tentang bagaimana membuat grafik di PHP dari data MySQL, Grafik yang mau ane bahas yaitu membuat grafik menggunakan library fusioncharts (JQuery), jadi ane cuma membahas bagaimana menampilkan data di database berbentuk grafik di PHP, kalau lebih lanjut mengenai JQuery fusioncharts bisa langsung ke official site-nya fusioncharts,
Oke langsung saja ke TKP cara Membuat Grafik PHP dan MySQL menggunakan fusioncharts :
Misalkan studi kasusnya Sekolah, nah kita ingin menampilkan berapa banyak data siswa untuk setiap kelas.
Oke, misalkan di database kita punya tabel “siswa” dan tabel “kelas”,
berikut struktur dan relasi tabelnya :
Kurang lebih data di database seperti itu. Anggap datanya sudah terisi. kalau bingung ngisinya download aja file lengkapnya dibawah.
Nah sekarang bagaimana caranya menampilkan datanya.
Berikut kodingnya :
<!--Fungsi Load Javascript fusioncharts-->
<script type="text/javascript" src="JS/jquery-1.4.js"></script>
<script type="text/javascript" src="JS/jquery.fusioncharts.js"></script>
<!--GRAFIK JUMLAH SISWA PER KELAS-->
<div>
Grafik Jumlah Siswa Setiap Kelas<hr align="left" size="1" color="#cccccc">
</div>
<table id="TableSiswa" border="0" align="center" cellpadding="10">
<tr bgcolor="#FF9900" style='display:none;'> <th>Kelas</th> <th>Jumlah Siswa</th></tr>
<?php
//KONEKSI KE DATABASE
mysql_connect("localhost", "root", "") ;
mysql_select_db("grafik");
//QUERY AMBIL DATA KELAS
$query_kelas = "SELECT * FROM kelas";
$result_kelas = mysql_query($query_kelas);
$count_kelas = mysql_num_rows($result_kelas);
while ($data = mysql_fetch_array($result_kelas)) {
$kode_kelas = $data['kode_kelas'];
//QUERY MENGHITUNG JUMLAH SISWA SESUAI DENGAN KODE KELAS
$query_siswa = "SELECT COUNT(*) AS jumlah_siswa FROM siswa WHERE kode_kelas='$kode_kelas'";
$result_siswa = mysql_query($query_siswa);
$data_siswa = mysql_fetch_array($result_siswa);
echo "<tr bgcolor='#D5F35B' style='display:none;'>
<td>Kelas $data[kelas]</td>
<td align='center'>$data_siswa[jumlah_siswa]</td>
</tr>";
}
?>
</table>
<!--LOAD HTML KE JQUERY FUSION CHART BERDASARKAN ID TABLE-->
<script type="text/javascript">
$('#TableSiswa').convertToFusionCharts({
swfPath: "Charts/",
type: "MSColumn3D",
data: "#TableSiswa",
dataFormat: "HTMLTable"
});
</script>
Dan ini contoh capture hasilnya :
Mudah bukan?
Silahkan download file-lengkapnya disini
Ya sekian dulu sharing ane, semoga bermanfaat.