Notes For My Knowledge

Private Trainer, Web , Mobile & Desktop Programmer


Fahmi Basya Kartapura On December - 22 - 2010

Diketahui:

  • Direktori Root untuk Program CodeIgniter Saya adalah ibook.
  • Nama Controllernya adalah graphik
  • Nama Metode Controllernya adalah batang
  • Nama Viewnya adalah tampilan.php

Contoh Kasus:

Pada link http://teethgrinder.co.uk/open-flash-chart/gallery-bar.php terdapat diagram seperti pada gambar dibawah ini:

Pertanyaan:

Bagaimana kita membuatnya dalam CodeIgniter … ?

Jawaban:

Download OpenFlashChart Versi 1.9.7 dari  http://teethgrinder.co.uk/open-flash-chart/download.php

Lalu Extractlah file hasil downloadan tersebut dimana saja.

File-File yang Diperlukan

Dari hasil extrakan tadi maka ambillah file-file yang diperlukan seperti terlihat dibawah ini:

Membuat Library

  • Ambillah file “open-flash-chart.php” dalam folder php-ofc-library
  • Lalu rubahlah namanya menjadi graph.php
  • Kemudian masukkan ke dalam folder application/libraries

Membuat Helper

  • Ambillah file “open_flash_chart_object.php” dalam folder php-ofc-library
  • Lalu rubahlah namanya menjadi “open_flash_chart_object_helper”
  • Kemudian masukkan file tersebut ke dalam direktori application/helpers

Membuat Folder

  • Buatlah satu folder bernama “open_flash_chart” dalam direktori rootmu
  • Kemudian masukkan file open_flash_chart.swf dan folder js ke dalam direktori “open_flash_chart”

Merubah Library Graph

Bukalah library graph.php lalu rubahlah 2 baris dibawah ini:

$this->js_path = ‘js/’;
$this->swf_path = ”;

Menjadi

$this->js_path = base_url().’open_flash_chart/js/’;

$this->swf_path = base_url().’open_flash_chart/’;

Membuat Controller

Buatlah satu Controller bernama graphik.php dengan isi seperti dibawah ini:

<?php

class Graphik  extends CI_Controller {

public function batang()

{

$this->load->library(‘graph’);

$bar = new bar_outline( 50, ‘#9933CC’, ‘#8010A0′ );

$bar->key( ‘Page views’, 10 );

$data = array();

for( $i=0; $i<9; $i++ )

{

$bar->data[] = rand(5,9);

}

$this->graph->title( ‘Bar Chart’, ‘{font-size: 20px;}’ );

$this->graph->data_sets[] = $bar;

$this->graph->set_x_labels( array( ‘January’,'February’,'March’,'April’,'May’,'June’,'July’,'August’,'September’ ) );

$this->graph->set_x_label_style( 10, ‘#9933CC’, 0, 2 );

$this->graph->set_x_axis_steps( 2 );

$this->graph->set_y_max( 10 );

$this->graph->y_label_steps( 4 );

$this->graph->set_y_legend( ‘Open Flash Chart’, 12, ‘#736AFF’ );

$this->load->view(‘tampilan’);

}

}

Keterangan:

$bar = new bar_outline( 50, ‘#9933CC’, ‘#8010A0′ ), digunakan untuk membuat objek diagram batang dengan argumen:

  • 50 adalah angka ketajaman warna
  • #9933CC adalah warna dari diagram batang
  • #9010A0 adalah warna garis luar diagram batang

$bar->key( ‘Page views’, 10 ), key adalah sebuat metode dari objek $bar dimana kode ini akan membuat Legend bertulisakan ‘Page views’ dengan ukuran font adalah 10.

$bar->data[] = rand(5,9), array data[] disini digunakan untuk menambahkan nilai ke dalam diagram batang.

$this->graph->title( ‘Bar Chart’, ‘{font-size: 20px;}’ ), kode ini digunakan untuk membuat judul.

$this->graph->data_sets[] = $bar, kode ini untuk memasukkan obje $bar kedalam graphik.

$this->graph->set_x_labels, kode ini digunakan untuk membuat label pada koordinat X.

$this->graph->set_x_label_style( 10, ‘#9933CC’, 0, 2 ), kode ini digunakan untuk menambahkan style ke label dimana 10 adalah ukuran font dan ‘#9933CC’ adalah warna font, angka 0 saya tidak tahu,  serta angka 2 adalah jarak labelnya setiap berapa batang.

$this->graph->set_x_axis_steps( 2 ), kode ini untuk membuat satu garis kecil diatas label, dimana angka 2 menyatakan bahwa axis tersebut dibuat dengan jarak 2 batang.

$this->graph->set_y_max( 10 ), kode ini berarti angka maximal pada koordina Y adalah 10.

$this->graph->y_label_steps( 4 ), kode ini berarti 4 langkah dari angka 0 sampai angka 10.

$this->graph->set_y_legend( ‘Open Flash Chart’, 12, ‘#736AFF’ ), kode ini digunakan untuk membuat legend pada koordinat Y.

Membuat View

Buatlah satu view bernama tampilan.php dengan isi seperti dibawah ini:

<?php

$this->load->helper(‘open_flash_chart_object’);

echo $this->graph->render();

echo open_flash_chart_object(500,300, site_url(‘graphik/batang’),false, $this->graph->swf_path);

?>

Muncul Pertanyaan:

Diagram batangnya sudah keluar tapi kenapa ada tulisan seperti ini yang keluar juga :

&title=Bar+Chart,{font-size: 20px;}& &x_label_style=10,#9933CC,0,2& &x_axis_steps=2& &y_legend=Open Flash Chart,12,#736AFF& &y_ticks=5,10,4& &x_labels=January,February,March,April,May,June,July,August,September& &y_min=0& &y_max=10& &filled_bar=50,#9933CC,#8010A0,Page+views,10& &values=7,7,7,5,7,7,5,8,5&

Jawaban:

Gantilah tulisan dibawah ini

echo $this->graph->render();

Menjadi

echo ‘<span style=”display:none”>’.$this->graph->render().’</span>’;


Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.




Categories: CodeIgniter

One Response

  1. Ari Karniawan says:

    Terima kasih Fahmi Basya Kartapura, bermanfaat banget. setelah saya cari2 tutorial sana sini. tutorial pak fahmi yang menyelamatkan saya..

    Semoga sukses selalu. salam kenal

Copy Protected by Chetans WP-Copyprotect.