Integrasi OpenFlashChart dengan CodeIgniter

Baru saja aku baca artikel di codeigniter-id (http://codeigniter-id.com/node/5 dan http://codeigniter-id.com/node/18), tentang integrasi codeigniter dengan open flash chart. Namun setelah membaca keduanya, saya masih belum bisa menjalankan OFC dengan sukses, padahal semua langkah sudah aku jalankan. setelah brosing2, akhirnya aku temukan cara, seperti yang aku tulis dibawah ini.

Intermezzo sedikit, Open Flash Chart adalah library grafik open source yang bersifat free. Library ini unik karena tidak menghasilkan image namun grafik yang dihasilkan berupa flash. Sudah tentu grafis yang ditampilkan akan lebih menarik.

Cara integrasinya dengan code igniter pun bisa dibilang cukup mudah.

Pertama, untuk OpenFlashChart versi 2 dapat didownload di http://sourceforge.net/project/showfiles.php?group_id=201148, atau untuk versi 1.9.6 dapat di download di http://teethgrinder.co.uk/open-flash-chart/open-flash-chart-1.9.6.zip atau disini
catatan: saya menggunakan yang versi 1.9.6, karena ukuran swf nya lebih kecil cuman 56-60KB, beda dengan versi 2 nya yang ukuran swf nya sampe 250KB

Kedua, abis download, extract dan kopi file berikut ini :

1. File open-flash-chart-object.php di folder php-ofc-library kopi ke folder ci_root/system/plugins, lalu ganti nama file nya jadi graph_pi.php
2. File open-flash-chart.php di folder php-ofc-library kopi ke folder ci_root/system/application/libraries lalu ganti nama file jadi graph.php. Lalu buka file graph.php, kemudian ganti baris class graph menjadi class opgraph dan function graph() menjadi function opgraph().
3. File open-flash-chart.swf kopi ke folder ci_root

Ketiga, edit file graph.php tambahkan 2 baris ini

$this->js_path = base_url().'js/';
$this->swf_path = base_url().'swf/';

dan ubah baris

$this->base = 'js/';

menjadi

$this->base = base_url().'js/';

Keempat, buat kelas controller seperti ini :

< ?php

class CMain extends Controller {

	function CMain()
	{
		parent::Controller();
		$this->load->model('log_model');
		$this->load->model('user_model');
                $this->load->plugin('graph');
                $this->load->libraries('opgraph');

	}

  function grvisit()
  {
		$allbln = $this->log_model->getStatSemuaBulan($this->site_sentry->get_userdata('kodeDealer'),'LOGIN');
		$statall = $allbln->result_array();

		$dataBulanLog = array();

		for ($i=0;$i< $allbln->num_rows;$i++)
		{
			$dataBulanLog['LOG'][$statall[$i]['bulan']] = (int)$statall[$i]['CNT'];
		}

		$allbln = $this->log_model->getStatSemuaBulan($this->site_sentry->get_userdata('kodeDealer'),'DL');
		$statall = $allbln->result_array();

		for ($i=0;$i< $allbln->num_rows;$i++)
		{
			$dataBulanLog['DL'][$statall[$i]['bulan']] = (int)$statall[$i]['CNT'];
		}

		$allbln = $this->log_model->getStatSemuaBulan($this->site_sentry->get_userdata('kodeDealer'),'UL');
		$statall = $allbln->result_array();

		for ($i=0;$i< $allbln->num_rows;$i++)
		{
			$dataBulanLog['UL'][$statall[$i]['bulan']] = (int)$statall[$i]['CNT'];
		}

		$dataLabel = array_unique(array_merge(array_merge(array_keys($dataBulanLog['LOG']),array_keys($dataBulanLog['UL'])),array_keys($dataBulanLog['DL'])));

		$dataLog = array();
		$dataDL = array();
		$dataUL = array();
		foreach ($dataLabel as $lbl)
		{
			$dataLog[] = (in_array($lbl,array_keys($dataBulanLog['LOG'])))?$dataBulanLog['LOG'][$lbl]:0;
			$dataDL[] = (in_array($lbl,array_keys($dataBulanLog['DL'])))?$dataBulanLog['DL'][$lbl]:0;
			$dataUL[] = (in_array($lbl,array_keys($dataBulanLog['UL'])))?$dataBulanLog['UL'][$lbl]:0;
		}
    $this->opgraph->opgraph();
    $this->opgraph->bg_colour = '0xFFFFCC'; //this is a change in background
    $this->opgraph->title( 'Statistik Kunjungan', '{font-size: 20px; color: #736AFF}' );

    // add the data:
    $this->opgraph->set_data( $dataLog );
    $this->opgraph->set_data( $dataDL );
    $this->opgraph->set_data( $dataUL );

    // we add the 3 line types and key labels
    $this->opgraph->line_hollow( 2, 4, '0xCC3399', 'Kunjungan', 9 );
    $this->opgraph->line_hollow( 2, 4, '0xCC9933', 'Download', 9 );
    $this->opgraph->line_hollow( 2, 4, '0x33CC99', 'Upload', 9 );

    $this->opgraph->set_x_labels( $dataLabel );
    $this->opgraph->set_x_label_style( 10, '0x000000', 0, 1 );
		$this->opgraph->set_tool_tip( 'Jumlah : #val#');
    $this->opgraph->set_y_max( 15 );
    $this->opgraph->y_label_steps( 3 );
    $this->opgraph->set_x_legend( 'Hari', 14, '#736AFF' );
    $this->opgraph->set_y_legend( 'Jumlah', 14, '#736AFF' );
    echo $this->opgraph->render();
  }

}
?>

Kelima, buat view seperti ini :

< ?echo open_flash_chart_object_str( '385', '250', site_url('cmain/grvisit'), false, base_url() );?>

catatan: site_url(’cmain/grvisit’) adalah url yang menyediakan data buat open-flash-chart.swf untuk membangun graph yang dibutuhkan. Berikut ini gambar hasil generate OFC ku.

Kalo masih belum bisa, monggo silahkan tanya.

wassalam

• 07/01/2009 -- Mulai dengan CodeIgniter
• 17/12/2008 -- Bikin Laporan PDF dengan CodeIgniter
• 14/12/2008 -- Batasi Download Dengan Library FileDownload
• 11/12/2008 -- Bikin Send email dengan CodeIgniter
• 10/12/2008 -- Bug Library ZIP di CodeIgniter
• 09/12/2008 -- Contoh simple bikin aplikasi dengan CodeIgniter.
• 09/12/2008 -- Patch CodeIgniter untuk Koneksi ke Oracle
• 08/12/2008 -- Code Igniter Dengan Oracle