Kali ini, saya akan berbagi tutorial tentang membuat Grafik Bar(Batang) di PHP dengan sinkronisasi database di MYSQL dengan XAMPP  1.7.7. Nih contoh Grafiknya..  

Woke.. Setelah ngotak-ngatik akhirnya, saya bisa juga membuat grafik batang, dan langsung saya bagi kali ini juga..

Langsung kita ke TKP Aja.. Langkah-langkahnya:

1. Buat Database di MYSQL. Di sini, saya punya database kp, dengan kolom t_bus, t_driver, t_jalur. Yang bakal kita gunakan hanya 2 kolom yaitu t_bus dan t_jalur. Dan field yang akan kita ambil hanya halte(dari kolom t_jalur) dan naik, turun(t_bus). Jadi, dengan demikian, kita gunakan Syntax Join di sini. Untuk database nya, bisa dilihat contoh di bawah ini..

2. Coding Time… Nah, karena kita bakal buat chart nya dengan fasilitas JpGraph, jadi download dulu JpGraph nya di-sini. Download yang for PHP5, kalau XAMPP kamu udah support PHP5. Kalau udah kelar downloadnya, ekstrak  file .zip nya di folder yang sama dengan script yang akan kita buat. Ini dia contohnya..

 

3.Nah, untuk sciptnya, ini dia… Di sini, saya buat nama file phpnya dengan chart.php. Sudah dikasi komen kok, agar lebih mudah untuk memahami scriptnya.

<?php
include (“src/jpgraph.php”);
include (“src/jpgraph_line.php”);
include (“src/jpgraph_bar.php”);

// inisialisasi array untuk jumlah naik, turun dan halte

$dataNaik = array();
$dataTurun = array();
$dataHalte = array();

// koneksi ke mysql

mysql_connect(“localhost”,”root”,””);
mysql_select_db(“kp”);

// query SQL untuk menampilkan nama halte jumlah masuk dan jumlah keluar

$query = “select * from t_bus b join t_jalur j using (id_halte)”;
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
// menambahkan data hasil query ke array
array_unshift($dataHalte, $data[‘halte’]);
array_unshift($dataNaik, $data[‘naik’]);
array_unshift($dataTurun, $data[‘turun’]);

}

// membuat image dengan ukuran 600×400 px
$graph = new Graph(600,400,”auto”);
$graph->SetScale(“textlin”);

// menampilkan diagram batang untuk data masuk dengan keluar merah
// pada diagram batang ditampilkan value data
$bplot1 = new BarPlot($dataNaik);
$bplot1->SetFillColor(“red”);
$bplot1->value->show();

// menampilkan diagram batang untuk data turun dengan warna biru
// pada diagram batang ditampilkan value data
$bplot2 = new BarPlot($dataTurun);
$bplot2->SetFillColor(“blue”);
$bplot2->value->show();

// mengelompokkan grafik batang berdasarkan naik dan turun
$gbplot = new GroupBarPlot(array($bplot1,$bplot2));
$graph->Add($gbplot);

// membuat legend untuk keterangan naik dan turun
$bplot1->SetLegend(“naik”);
$bplot2->SetLegend(“turun”);
$graph->legend->Pos(0.04,0.5,”right”,”buttom”);

// mengatur margin image
$graph->img->SetMargin(60,180,5,80);

// menampilkan title grafik dan nama masing-masing sumbu
$graph->title->Set(“Grafik Jumlah Penumpang Naik Turun Passenger Counter”);
$graph->xaxis->title->Set(“Halte”);
$graph->yaxis->title->Set(“Jumlah”);

// menampilkan nama halte ke sumbu x
$graph->xaxis->SetTickLabels($dataHalte);

// format font title grafik
$graph->title->SetFont(FF_FONT1,FS_BOLD);

// menampilkan efek shadow pada image
$graph->SetShadow();

// menampilkan image ke browser
$graph->Stroke();
?>

4. Aktifin Apache dan MySql XAMPP kamu, dan running deh di browser kamu.. Tereng.. Kelar deh, ini dia hasilnya..

Sulit atau mudah gak? Yang penting terus berusaha dan mencoba.. Nah, kalau ada yang butuh script, database, dan JpGraphnya, silahkan komen di bawah, dan cantumkan email kamu.. “Indahnya saling berbagi Ilmu” :):) ..