Membuat Grafik PHP dan MySQL menggunakan fusioncharts

facebooktwittergoogle_plusredditpinterestlinkedinmail

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 :

ImageKurang 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 :

Image

Mudah bukan?

Silahkan download file-lengkapnya disini

Ya sekian dulu sharing ane, semoga bermanfaat.

Facebook Comments