Skip to main content

Menggunakan OpenFlashChart pada CodeIgniter (Part II)

March 26, 2008 by chandramulyana

chandramulyana's picture

Mohon maaf, mungkin tulisan ini melengkapi tulisan Sdr. Rafeequl,
khususnya untuk para newbie seperti saya ini. Contoh yang saya buat se-sederhana mungkin (data untuk chartnya masih statik, belum diambil dari database). Untuk ke depannya dapat dikembangkan sesuai kebutuhan masing-masing.

Chart yang ada tidak hanya bentuk Pie saja, mungkin rekan-rekan dapat mencoba bentuk lainnya.

Sebelum mencoba contoh di bawah ini, proses "instalasi "-nya dapat dibaca di Blog-nya Sdr. Rafeequl tentang Menggunakan OpenFlashChart pada CodeIgniter.

Sekarang langsung saja pada contoh-nya:

CONTROLLER
Buatlah sebuah file dengan nama openflashchart.php dan simpan di folder application/controllers/
Isi dari openflashchart.php adalah sebagai berikut :

&lt;?<br />
Class <strong>Openflashchart</strong> extends Controller {<br /><br />
&nbsp;function <strong>Openflashchart</strong>(){<br />
&nbsp;&nbsp;parent::Controller();<br />
&nbsp;&nbsp;}
&nbsp;function index(){<br />
&nbsp;&nbsp;<em>// Load library graph</em><br />
&nbsp;&nbsp;$this->load->library('graph');
&nbsp;&nbsp;<em>//Sintaks : pie( integer $alpha, string $line_colour, string $style )</em><br />
&nbsp;&nbsp;<em>//$alpha nilainya (0-100).Pada saat mouse di atas slice, maka akan tampak dari $alpha to 100.</em><br />
&nbsp;&nbsp;<em>//$line_colour : Nilai warna outline dalam HEXadecimal</em><br />
&nbsp;&nbsp;<em>//$style : CSS style dari labels.</em> <br />
&nbsp;&nbsp;<em>//Gunakan {display: none;} untuk menghapus labels, Nilai label tetap akan ditampilkan pada tooltips</em><br /> 
&nbsp;&nbsp;<em>//Contoh di bawah ini PIE chart, 75% alpha</em><br />
&nbsp;&nbsp;$this->graph->pie(75,'#505050','{font-size: 12px; color: #404040;');<br /><br />
&nbsp;&nbsp;<em>// Nilai yang diberikan untuk Pie Chart</em><br />
&nbsp;&nbsp;$this->graph->pie_values( array(20,40,40), array('IE','Firefox','Opera') );<br /><br />
&nbsp;&nbsp;<em>// Warna dari masing-masing slice</em><br />
&nbsp;&nbsp;$this->graph->pie_slice_colours( array('#d9db35','#487daf','#d00000') );<br /><br />
&nbsp;&nbsp;<em>// Tool tip yang akan ditampilkan pada saat mouse di atas slice</em><br />
&nbsp;&nbsp;$this->graph->set_tool_tip( 'Persentase : #val# ' );<br />
&nbsp;&nbsp;$this->graph->bg_colour = '#FFFFFF';<br />
&nbsp;&nbsp;$this->graph->title( 'Contoh Pie Chart', '{font-size:14px; color: #7F7772; padding-bottom:25px}' );<br />
&nbsp;&nbsp;$this->graph->set_output_type('js');<br /><br />
&nbsp;&nbsp;$this->load->view('v_openflashchart');<br />
&nbsp;&nbsp;}<br /><br />
}<br />
?><br />

VIEW
Buatlah sebuah file dengan nama v_openflashchart.php dan simpan di folder application/views/
Isi dari v_openflashchart.php adalah sebagai berikut :

<?=$this->graph->render()?>

Comments

Menggunakan OpenFlashChart pada CodeIgniter

March 11, 2009 by Anonymous, 2 years 47 weeks ago
Comment: 237

Anonymous's picture

Newbie nich oomm..

Diriku pake UniformServer 4.0

Coba cara Pertama keluarnya :
Parse error: parse error in Z:\www\xxx\system\application\controllers\statistic.php on line 31

Coba cara Kedua keluarnya :
&title=Contoh+Pie+Chart,{font-size:14px; color: #7F7772; padding-bottom:25px}& &x_axis_steps=1& &y_ticks=5,10,5& &line=3,#87421F& &y_min=0& &y_max=20& &bg_colour=#FFFFFF& &pie=75,#505050,{font-size: 12px; color: #404040;& &values=20,40,40& &pie_labels=IE,Firefox,Opera& &colours=#d9db35,#487daf,#d00000& &links=& &tool_tip=Persentase+%3A+%23val%23+&

Coba cara dari masdeka.com keluarnya :
An Error Was Encountered
Unable to locate the model you have specified: log_model

Mohon pencerahannya...
Thanks.

nambah2i

September 11, 2009 by elmanth, 2 years 20 weeks ago
Comment: 5642

elmanth's picture

kalo yg keluar kayak gitu, itu berarti swf nya belum di load.
jadi pada keluaran diatas tuh hanya data yang akan digunakan file swf nya saja yg ditampilkan
bisa jadi letak swf nya salah tuh.

kalo saya nih :
open_flash_chart_object.php saya jadikan plugin diganti namanya dengan apalah terserah, misal ofc_pi.php
nah dibagian ofc_pi.php inilah ada fungsi open_flash_chart_object() yg siap di oprek untuk menentukan letak file js dan swf karena saya udah set_path_js() dan set_path_swf() gak mau bekerja, kenapa???

parameter di open_flash_chart_object($width, $height, $url, $use_swfobject=true, $base='' ).

source code pada fungsi open_flash_chart_object() tidak ada yg menggunakan data dari $url untuk merubah atau menentukan kembali path swfobject.js dan open-flash-chart.swf, padahal di $url itulah letak controller kita, dan di controller itulah kita memanggil fungsi set_path_js() dan set_path_swf(). Oleh karena itu kita bisa setting secara langsung di file ofc_pi.php itu.

cari sintaks $base."/js/swfobject.js" dan $base."open-flash-chart.swf" nah sesuaikan disini dengan letak file itu di aplikasi CI kita.

nih controller saya (data2nya saya ambil dari tulisan sebelumnya(hee... maklum males) ) :

class Pages extends Controller {
 
	function Pages()
	{
		parent::Controller();		
		$this->load->library('ofcgraph'); 
  // file open-flash-chart.php saya ganti namanya dengan ofcgraph.php, taruh di libraries
		$this->load->plugin('ofc');
 //kita bisa menjadikannya plugin atau helper, karena menurut userguide CI, 
 //plugin identik dengan helper, hanya saja helper cenderung sebagai bawaannya CI
 //nah dengan menjadikannya plugin atau helper kita bisa memanggilnya di view.
	}
 
       function chartmarut()
	{	
 
		$this->ofcgraph->bg_colour = '0xFFFFCC'; //this is a change in background
		$this->ofcgraph->title( 'Statistik Kunjungan', '{font-size: 20px; color: #736AFF}' );
 
  //sementara gak usah pake database dulu yah
		$dataLabel = array('sapi', 'kebo', 'wedhus');
		$dataLog = array('9', '8', '5');
		$dataDL = array('10', '2', '12');
		$dataUL = array('8', '6', '3');
 
		// add the data:
		$this->ofcgraph->set_data( $dataLog );
		$this->ofcgraph->set_data( $dataDL );
		$this->ofcgraph->set_data( $dataUL );
 
		// we add the 3 line types and key labels
		$this->ofcgraph->line_hollow( 2, 4, '0xCC3399', 'Kunjungan', 9 );
		$this->ofcgraph->line_hollow( 2, 4, '0xCC9933', 'Download', 9 );
		$this->ofcgraph->line_hollow( 2, 4, '0x33CC99', 'Upload', 9 );
 
		$this->ofcgraph->set_x_labels( $dataLabel );
		$this->ofcgraph->set_x_label_style( 10, '0x000000', 0, 1 );
		$this->ofcgraph->set_tool_tip( 'Jumlah : #val#');
		$this->ofcgraph->set_y_max( 15 );
		$this->ofcgraph->y_label_steps( 3 );
		$this->ofcgraph->set_x_legend( 'Nama', 14, '#736AFF' );
		$this->ofcgraph->set_y_legend( 'Kunjungan', 14, '#736AFF' );
		$this->ofcgraph->set_output_type('js');
 
		echo $this->ofcgraph->render(); 
// echo disini perlu, agar data ini nanti dapat dibaca di view,
//kita perlu menyertakan fungsi render agar data2 tersebut diparsing
//sehingga dapat dibaca oleh open-flash-chart.swf
//karena dari controller inilah data2 tentang chart akan diambil.
 
//nah berikut ini kita sesuaikan sendiri dengan view kita, saya kira gampang lah
		$data['main'] = 'home/view_chartmarut';
		$this->load->view('home/index',$data);
	}
}

terus di view nya :
sertakan sintaks ini

 echo open_flash_chart_object( '485', '250', site_url('/pages/chartmarut/'), false, base_url() );      

di parameter site_url('') itulah data2 tentang chart kita diambil, karena telah di echo di controller maka bisa dibaca oleh fungsi ini.

posisi file swfobject.js dan open-flash-chart.swf punya saya adalah

//saya buat begini biar tab nya jadi jelas posisinya, jadi ini bukan source yg perlu ditulis
htdocs/
	- myClues/                       //---> ini nama project ->http://localhost/myClues/
		- js/
			- swfobject.js
		- open-flash-chart.swf

berdasarkan pemahaman dari beberapa teman2 sebelumnya kita bisa merubah2 posisi file2 tersebut.

untuk pemahaman lebih, baca aja sintaks dua file php yg disertakan oleh openflashflash

semoga bisa membantu.

Mantaps

April 28, 2008 by Anonymous, 3 years 40 weeks ago
Comment: 19

Anonymous's picture

Mantaps oom :)
thanks

koreksi....

December 17, 2008 by qorianku, 3 years 7 weeks ago
Comment: 162

qorianku's picture

saya sudah ikutin langkah di part 1 dan 2, masih saja gak bisa, graph tidak keluar. akhirnya saya coba2 ternyata ada yang kurang dari "menggunakan OpenFlashChart pada CodeIgniter bag I dan II"
supaya berhasil harus kopi file open-flash-chart-object ke folder plugin dan memanggilnya sebagai plugin

lengkapnya bisa dilihat disini http://masdeka.com/integrasi-openflashchart-dengan-codeigniter

wassalam
deka
http://masdeka.com

minta koreksi

April 3, 2010 by gutasaputra, 1 year 44 weeks ago
Comment: 6239

gutasaputra's picture

saya juga sudah mengikuti tutorial part 1 dan 2 mas. tapi masih aja ga bisa mas. mungkin saya lebih kampung dari mas dan saya nyobain codeigniter. dan sangat perlu bantuan dari emas. mungkin karena saya jauh lebih kampung. hee

mohon minta koreksi nya mas. intinya masalah yang saya alami adalah ga bisa load class library graph nya. saya sudah mencoba dengan tutorial lainnya, yang terjadi malah ga keluar output sama sekali. mohon pencerahannya. terima kasih. :)

koreksi

December 17, 2008 by Anonymous, 3 years 7 weeks ago
Comment: 164

Anonymous's picture

Thanks atas koreksi nya :)

Premium Drupal Themes by Adaptivethemes