Membuat Chart Flash dengan FrameWork Code Igniter

Saturday, July 23, 2011

Membuat Chart Flash dengan FrameWork Code Igniter

Untuk aplikasi yang sedikit kompleks, tampilan grafik banyak membantu user dalam memahami data. Grafik lebih user friendly karena mayoritas user mampu menerjemahkan grafik lebih baik daripada tampilan berupa tabel. Sebagai programmer (khususnya web), library grafik sangat banyak beredar. Ada yang berbayar dan ada yang gratis. Bukan berarti yang gratis lebih jelek daripada yang berbayar.

Anda tidak perlu sedih. Library Flash yang tidak kalah cantiknya dan berlisensi gratis adalah Open Flash Chart. Tidak hanya gratis, library ini juga open source! Anda bisa mendownload file flashnya berupa FLA file beserta class yang menyertainya. Dan menurut saya, library ini lebih cantik daripada Fusion Flash Chart, karena animasi overlaynya lebih menawan. Apalagi jika Anda bekerja dalam lingkungan Framework Codeigniter, library ini bisa kita masukkan dalam library aplikasi yang bisa dipangggil sewaktu-waktu. Sampai sekarang, saya benar-benar jatuh hati dengan library ini. OK, biar ndak banyak basa basi, mari kita mulai membuat chart dengan Open Flash Chart di lingkungan Framework Codeigniter.
Download library-nya di sini (Ingat! Download yang versi 1.97 saja karena versi 2 masih tahap pengembangan.
Setelah Anda download, buat folder 'assets' di dalam root project CodeIgniter Anda. Buat lagi 2 folder di dalamnya dengan nama 'js' dan 'swf'. Copykan file swfobject.js dari folder js hasil downloadan tadi ke dalam folder js di dalam folder assets Codeigniter kita. Setelah itu copykan file open-flash-chart.swf dari hasil downloadan ke dalam folder swf di dalam folder 'assets'.
OK, langkah berikutnya copykan file dari hasil downloadan di dalam folder 'php-ofc-library', yaitu open-flash-chart.php ke dalam aplikasi CI yaitu di path 'system/application/libraries'. Rename file php dengan nama graph.php.
Buka file graph.php tersebut dan cari baris :

$this->js_path = 'js/';
$this->swf_path = '';


ubah menjadi



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


Instalasi beres, sekarang tinggal menggunakan saja, kawan. Buat Model  baru misalkan grafik_model.php di dalam folder Models. Buat fungsi  cretaegraph dan isikan baris kode berikut ini (ini adalah data acak) : 



function creategraph()
{
    $this->load->library('graph');
    $data_1 = array();
    for( $i=0; $i<7; $i++ )
    {
        $data_1[] = rand(30,550);
    }
    $ff = new graph();
    $ff->set_data( $data_1 );
    $ff->title( 'Traffic SMS 1 Minggu Terakhir', '{font-size: 14px; color: #3D5570;font-family:calibri;}' );
    $ff->line_dot( 3, 5, '#8B6122', 'SMS Jarkom', 10 );
    $ff->bg_colour = '#FFFFFF';
    $ff->x_axis_colour( '#818D9D', '#ADB5C7' );
    $ff->y_axis_colour( '#818D9D', '#ADB5C7' );
    $ff->set_x_labels( array( '25/12','26/12','27/12','28/12','29/12','30/12','31/12' ) );
    $ff->set_y_max( 600 );
    $ff->y_label_steps( 10 );
    $ff->set_y_legend( 'Jumlah SMS', 12, '#3D5570' );
    $ff->set_x_legend( 'Tanggal', 12, '#3D5570' );
    $ff->set_output_type('js');
    $ff->width = '90%';
    $ff->height = '300';
    return $ff->render();
}


Setelah itu kita panggil menggunakan controller. Buat file controller  di dalam folder controller dengan nama grafik.php. Di dalam fungsi  index, ketikkan baris kode berikut ini.



$this->load->model('Grafik_model');
$data['graph1'] = $this->Grafik_model->creategraph();
$this->load->view('tampilgrafik', $data);


Buat file view untuk menampilkan grafik di dalam folder views, yaitu tampilgrafik.php. Ketikkan Code berikut:



<html>
    <head>
        <title>Grafik Flashtitle>
    head>
    <body>
    php echo $graph1;?>
    body>
html>