Visualisasi data dalam bentuk grafik, misalkan diagram batang merupakan representasi data yang lebih menarik dan akan lebih mudah dipahami. Bayangkan jika data disajikan dalam bentuk tabel, tentunya sedikit akan menyulitkan kita dalam menyimpulkannya.
Salah satu alternatif yang dapat digunakan dalam mengubah data yang berada di database menjadi dalam bentuk diagram batang pada suatu halaman web adalah PHP/SWF Charts.
Dalam percobaan ini, kita akan mengvisualisasikan data nilai pelajar untuk tiap-tiap mata kuliah ke dalam bentuk diagram batang. Pastikan telah mendownload librarinya terlebih pada halaman PHP/SWF Charts.
Data yang digunakan ditunjukkan oleh tabel berikut :
Berdasarkan tabel diatas, kita membuat file yang diberi nama nilai.php sebagai berikut:
<?php
include "charts/charts.php";
//start the PHP multi-dimensional array and create the region titles
$chart [ 'chart_data' ][ 0 ][ 0 ] = "";
$chart [ 'chart_data' ][ 1 ][ 0 ] = "1001";
$chart [ 'chart_data' ][ 2 ][ 0 ] = "1002";
$chart [ 'chart_data' ][ 3 ][ 0 ] = "1003";
//connect to the database
mysql_connect ( "localhost", "root", "" );
mysql_select_db ( "chart" );
//Get first field in kode_mk
$result = mysql_query ( "SELECT kode_mk FROM nilai" );
$kodematkul = mysql_result ( $result, 0, "kode_mk" );
$result = mysql_query ("SELECT * FROM nilai");
for ( $i=0; $i < mysql_num_rows($result); $i++ ) {
switch ( mysql_result ( $result, $i, "nim" ) ) {
case "1001":
$row = 1;
break;
case "1002":
$row = 2;
break;
case "1003":
$row = 3;
break;
}
//Menentukan kolom
if($i==0 OR $i==3 OR $i==6 )
{
$col =1;
}
else if($i==1 OR $i==4 OR $i==7)
{
$col =2;
}
else if($i==2 OR $i==5 OR $i==8)
{
$col=3;
}
//Membuat label matakuliah
$chart [ 'chart_data' ][ 0 ][ $col ] = mysql_result ( $result, $i, "kode_mk");
//Mencetak nilai
$chart [ 'chart_data' ][ $row ][ $col ] = mysql_result ( $result, $i, "nilai");
}
SendChartData ( $chart );
?>
Kemudian kita membuat file yang akan menampilkan data dalam bentuk diagram batang, file tersebut diberi nama berita.php yang berisikan code sbb :
<html>
<head>
<title>Diagram Batang</title>
<link type="text/css" rel="stylesheet" href="style2.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 align="center">Diagram Batang
</h1>
</div>
<div id="wrapper_konten">
<div id="right_konten">
<?php
include "charts/charts.php";
echo"<br><br>";
echo InsertChart ( "charts/charts.swf", "charts/charts_library", "nilai.php", 400, 250 );
?>
</div>
<div id="right_konten_bottom">
</div>
</div>
</div>
</body>
</html>
Outputnya ditunjukkan oleh gambar berikut:
Anda dapat mendownlad file secara keseluruhan beserta file css :
