26 Agustus 2012

Membuat Grafik di CodeIgniter dengan PhpMyGraph


Grafik atau chart biasanya digunakan untuk merepresentasikan data – data yang memiliki nilai angka agar informasi yang disampaikan lebih mudah dibaca tanpa kata – kata yang berbelit, Infornasi yang disampaikan bisa berupa peningkatan penjualan, trend produk, dll.

PhpMyGraph

PhpMyGraph dibuat oleh Martijn Beulens dan hanya dapat digunakan di PHP 5.0, grafik yang dapat dibuat yaitu grafik garis, batang dan poligon dan dengan banyak konfigurasi seperti font, bakcground, nama grafik dll. PhpMyGraph yang saya gunakan yaitu PhpMyGraph 5.0.5. PhpMyGraph bisa dicek di http://phpmygraph.abisvmm.nl/



Membuat Library pada Codeigniter

Selanjutnya membuat class library codeigniter untuk menggunakan PhpMyGraph, buat berkas PhpGraph.php dan salin berkas PhpMyGraph5.0.php ke dalam folder /application/libraries/

Nama yang digunakan oleh kelas sama dengan nama berkas dan diawali dengan huruf kapital tanpa menggunakan prefix CI_

Kode program (untuk tag html saya tambahkan titik agar tidak kacau tampilannya, pas nanti dicoba hilangkan titiknya)

PhpGraph.php


include('phpMyGraph5.0.php');
if(!defined ('BASEPATH')) exit('no direct scripts access allowed');
 
class PhpGraph{
 
function create_graph($cfg=null, $data,$chart_type='horizontal-line-graph',$title='', $filename=null){
 
/* set title pada grafik */
$cfg['title'] = $title;
/* pilihan tipe grafik */
if($chart_type=='horizontal-line-graph'){
$graph = new HorizontalLineGraph();
}
else if($chart_type=='horizontal-simple-column-graph'){
$graph = new HorizontalSimpleColumnGraph();
}
else if($chart_type=='horizontal-column-graph'){
$graph = new HorizontalColumnGraph();
}
else if($chart_type=='horizontal-polygon-graph'){
$graph = new HorizontalPolygonGraph();
}
else if($chart_type=='vertical-line-graph'){
$graph = new VerticalLineGraph();
}
else if($chart_type=='vertical-simple-column-graph'){
$graph = new VerticalSimpleColumnGraph();
}
else if($chart_type=='vertical-shadow-column-graph'){
$graph = new VerticalColumnGraph();
}
else if($chart_type=='vertical-polygon-graph'){
$graph = new VerticalPolygonGraph();
}
/* jika memberi nama file, berarti gambar diisimpan ke dalam berkas */
if($filename!=null){
/* jika graph yang digunakan untuk perbandingan */
if($cfg['compare']==true){
$cfg['file-name'] = $filename;
$graph->parseCompare($data[0],$data[1], $cfg);
return $cfg['file-name'];
}
else{
$cfg['file-name'] = $filename;
$graph->parse($data, $cfg);
return $cfg['file-name'];
}
}
/* jika tidak memberi nama file, konten header berupa gambar */
else{
header("Content-type: image-png");
/* jika graph yang digunakan untuk perbandingan */
if($cfg['compare']==true){
$graph->parseCompare($data[0],$data[1], $cfg);
return $cfg['file-name'];
}
else{
$graph->parse($data, $cfg);
return $cfg['file-name'];
}
}
 
}
}

Controller

class Library_Saya extends CI_Controller{
private $this_url;
function __construct(){
parent::__construct();
$this->this_url = site_url().'/library_saya';
}
 
function index(){
$str = "<ol>
        <li><a href=".$this->this_url."/create_graph>Create Graph</a></li></ol>";
 
echo $str;
}
function create_graph(){
$data[0] = array(
        'Jan' => 112,
        'Feb' => 25,
        'Mar' => 0,
        'Apr' => 7,
        'May' => 80,
        'Jun' => 67,
        'Jul' => 45,
        'Aug' => 66,
        'Sep' => 23,
        'Oct' => 23,
        'Nov' => 78,
        'Dec' => 23
    );
$data[1] = array(
        'Jan' => 20,
        'Feb' => 75,
        'Mar' => -35,
        'Apr' => 17,
        'May' => 8,
        'Jun' => 7,
        'Jul' => 15,
        'Aug' => 26,
        'Sep' => 43,
        'Oct' => 33,
        'Nov' => 48,
        'Dec' => 13
    );
/* load library PhpGraph yang dibuat */
$phpgraph = $this->load->library('PhpGraph');
$chart_type = 'vertical-line-graph';
/* konfigurasi lebar dan tinggi gambar */
$cfg['width'] = 700;
$cfg['height'] = 500;
/* set $cfg['compare'] = true , untuk menampilkan grafik dengan perbandingan. $cfg['compare'] pada defaultnya tidak ada */
$cfg['compare'] = true;
/* create_graph($konfigurasi_grafik, $data, $tipe_grafik, $judul_pd_grafik, $nama_berkas) */
$this->phpgraph->create_graph($cfg, $data,'vertical-simple-column-graph','Grafik dengan Tipe vertical-simple-column-graph','compare-'.$chart_type);
 
$cfg['compare'] = false;
$this->phpgraph->create_graph($cfg, $data[0],$chart_type,'Grafik dengan Tipe '.$chart_type,$chart_type);
/* tampilkan grafik */
echo '<img src="'.base_url().$chart_type.'" title="'.$chart_type.'"/>';
echo '<img src="'.base_url().'compare-'.$chart_type.'" title="'.$chart_type.'"/>';
}
}

Kode Program :
PhpMyGraph
File lengkap

9 komentar:

  1. kok tidak bisa ya.,.,.,.
    kelihatannya kurang file view

    BalasHapus
  2. File view sengaja tidak saya buat, untuk menyederhanakan saja. Kalau belum tampil mungkin ada masalah dengan file permission nya. Nanti klo bisa gambar chartnya ada di folder aplikasi. Kalau mau ditampilkan di view, bisa diganti pada baris terakhir controller menjadi :

    $data['chart'] = '<,img src="'.base_url().'img/'.'compare-'.$chart_type.'" title="'.$chart_type.'"/>';
    $this->load->view('chart', $data);

    Pada tag img diatas saya tambahkan koma, karena tag img tidak diperbolehkan di blogspot. Makasih atas kritikannya, maaf lama balas, lama juga ga buka blog.. :)

    BalasHapus
  3. kalau data yg ditampilkan di chart dari database bisa gan??

    BalasHapus
    Balasan
    1. Bisa, coba kaya gini $result = $this->db->query("SELECT nama_nama_kolom, nilai_kolom FROM tabel")->result_array();
      $data[1] = array();
      foreach($result as $r){
      $data[1] += array($r['nama_kolom']=>$r['nilai_kolom']);
      }

      Kalau mau di compare nilai field yang dibandingkannya harus sama. Maap lama balesnya, jarang buka blog hehehe

      Hapus
  4. saya ud coba, di local berjalan dengan baik, tp ketika saya upload, muncul error sbb:
    A PHP Error was encountered
    Severity: Warning
    Message: imagepng() [function.imagepng]: Unable to open 'vertical-shadow-column-graph' for writing
    Filename: libraries/phpMyGraph5.0.php
    Line Number: 734
    apa kira2 penyebabnya?

    BalasHapus
    Balasan
    1. apa yah ??? file permissionnya gimana ? udah di cek ? file permission di folder dimana image itu nantinya akan dibuat

      Hapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. Membuat Grafik Batang Dengan Database MySQL

    >> Klik Disini <<

    BalasHapus
  7. Membuat grafik lingkaran data dari database pada codeigniter
    >Lihat Disini<

    BalasHapus