Membuat Graphic Chart Dengan PHP - PChart

Dalam project yang sedang saya kerjakan, ada sebuah kebutuhan untuk menampilkan data statistik dan komprehensif dalam bentuk Graphic Chart. Di internet, library untuk membuat Graphic Chart tidak terlalu banyak, dan kebanyakan lisensinya berbayar. Didalam PEAR (PHP Extension and Application Repository) ada sebuah libary yang ada pada Image/Graph.php yang bisa membuat graphic chart sederhana, akan tetapi hasilnya tidak begitu memuaskan.

Sampai akhirnya saya menemukan satu library di situs sourceforge.net yang bernama PChart, berikut linknya http://pchart.sourceforge.net/ dan Graphic yang dihasilkannya sangat memuaskan dan relatif mudah untuk digunakan. berikut adalah contoh output "advance" dari PChart :

Cukup bagus bukan?

Yup, two thumb up untuk Mark James yang dengan segala kerendahan hatinya mau membagikan hasil karyanya yang briliant secara gratis.

Ok, sekarang kita akan coba membuat Graphic Chart sederhana (tidak serumit yang diatas) dengan library ini. pertama-tama, silakan download librarynya di http://pchart.sourceforge.net/download.php didalamnya terdapat beberapa folder seperti Cache/Font/pChart, tapi yang terpenting adalah folder PChart. Ada 3 file utama di dalamnya yang masing-masing merupakan nama dari class yang akan kita gunakan nanti, berikut penjelasan singkat dari masing-masing classnya :

1. pData.class
   Berfungsi sebagai container data / struktur data yang akan digunakan oleh instance pChart
2. pChart.class
   Berfungsi untuk menDraw Graphic berdasarkan stuktur data yang didefinisikan sebelumnya dengan pData
3. pCache.class
   Berfungsi sebagai handler jika kita ingin menggunakan fasilitas Caching Image yang memang disediakan oleh pChart untuk performa proses (akan ditulis pada artikel selanjutkan)

Gambaran abstrak dari proses pembuatan Graphic Chart dengan pChart bisa dilihat dari gambar dibawah ini :

Yup, dilihat dari alur proses diatas, pChart ini sangatlah fleksibel karena data source yang digunakan bisa kita generate dari berbagai sumber, seperti result query, CSV file dan lain-lain.

Untuk memulai membuat Graphic Chart, Copy folder pChart ke folder aplikasi. lalu buatlah file dengan nama testPChart.php dan tulis beberapa baris kode di bawah ini :

<?  
 // Include standard pChart
 include("pChart/pData.class");  
 include("pChart/pChart.class");  
 
 // Mendefinisikan data
 $DataSet = new pData;  
 $DataSet->AddPoint(array(20,25,35,22,24,15,21,17,20,25,28,31),"Turis Asing");  
 $DataSet->AddPoint(array(16,17,23,18,17,22,25,29,30,27,25,16),"Turis Lokal");  
 $DataSet->AddPoint(array("Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"),"Label");  
 
 // Menset agar semua serie didaftarkan pada serie list yang akan di draw
 $DataSet->AddAllSeries();   
 
 // Menggunakan serie "Label" sebagai label dari nilai sumbu X
 $DataSet->SetAbsciseLabelSerie("Label");   
 $DataSet->RemoveSerie("Label");
 
 // Inisialisasi class pChart (*lebar, *tinggi)
 $Test = new pChart(600,230);  
 
 /*
  Load file warna yang akan digunakan oleh Chart, isinya berupa text RGB collor, contoh :
  0,78,127 <--- warna biru tua
  156,55,50 <--- warna merah tua
  jika ingin menggunakan warna default, tinggal di remark saja 1 baris kode dibawah
 */
 $Test->loadColorPalette("warna.txt");
 
 // Setting font
 $Test->setFontProperties("Fonts/tahoma.ttf",8);  
 $Test->setGraphArea(50,30,580,190);  
 
 // Draw kotak persegi lonjong sebagai background dari chart
 $Test->drawFilledRoundedRectangle(7,7,593,223,5,254,254,254);  
 
 // Setting area chart
 $Test->drawGraphArea(255,255,255,TRUE);  
 $Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,45,2,TRUE); 
 
 // Draw background garis diagonal
 $Test->drawGrid(4,TRUE,254,254,254,50);  
 
 // Draw background garis silang
 $Test->drawTreshold(0,143,55,72,TRUE,TRUE);  
 
 // Draw chart dengan data yang sudah didefinisikan diatas
 $Test->drawBarGraph($DataSet->GetData(),$DataSet->GetDataDescription(),TRUE);  
 
 // Draw legend / keterangan chart
 $Test->setFontProperties("Fonts/tahoma.ttf",8);
 $Test->drawLegend(496,20,$DataSet->GetDataDescription(),245,245,245);  
 $Test->setFontProperties("Fonts/tahoma.ttf",10);
 $Test->drawTitle(50,22,"Grafik Pengunjung Hotel",50,50,50,585);  
 $Test->Render("contohchart.png");
?>

Sebagai contoh data diatas merupakan data pengunjung suatu hotel dalam satu tahun, dengan nilai sumbu Y adalah total pengunjung, dan nilai sumbu X adalah nilai bulan 1 sampai 12.

Setelah file diatas dijalankan dan berhasil, maka yang keluar dilayar adalah layar kosong. lalu dimana output Graphic Chartnya? karena kita menggunakan method Render() untuk membuat chartnya, maka object pChart akan menyimpan chart yang kita buat pada satu file pada parameter yang kita masukan, misalnya disini kita memasukan parameter "contohchart.png", maka hasilnya akan disimpan pada file contohchart.png satu folder dengan aplikasi yang kita jalankan. Supaya hasilnya bisa langsung dilihat dibrowser, cukup tambahkan tag "img" pada akhir kode, misalnya :

<img src="contohchart.png" />

dan Tada....!! ketika kita merefresh browser, maka yang keluar pada layar browser adalah berupa Graphic Chart sebagai berikut :

Untuk membuat data yang dinamis, cukup memanupulasi Array data yang diparsing ke parameter method AddPoint dari database atau resource lainnya.

Info selengkapnya mengenai method-method yang digunakan, bisa dibaca dokumentasinya di http://pchart.sourceforge.net/documentation.php