Menggunakan OpenFlashChart dengan Codeigniter

Open Flash Chart (OFC) dalam Pengembangan Grafik

Open Flash Chart (OFC) adalah sebuah komponen flash yang berfungsi untuk menampilkan grafik. Penggunaan flash sebagai media grafik memberikan keuntungan karena selain tampilannya yang menarik, ia juga dapat dikendalikan melalui javascript, memungkinkan untuk proses reload dan perubahan tipe chart dengan mudah menggunakan library.

Library PHP untuk OFC

OFC menyediakan sejumlah library PHP untuk menghasilkan JSON yang diperlukan untuk menampilkan grafik. JSON ini mencakup tipe chart yang diinginkan bersama dengan datanya. Namun, penggunaan OFC tidaklah mudah karena kompleksitas kelas-kelas di dalamnya. Untuk mempermudah penggunaan, penulis mencoba membuat sebuah library yang berfungsi sebagai factory dari library OFC itu sendiri.

Struktur Kelas ID_Chart

Kelas ID_Chart adalah sebuah factory yang mengatur kelas-kelas chart lainnya. Berikut adalah struktur dasarnya:

class Id_chart {
    // Method dan properties
}

Penggunaannya sebagai berikut:

$this->load->library('id_chart/id_chart'); 
for ($i=1;$i<30;$i++) 
    $data[] = array('label'=>'data '.$i, 'value'=>rand(1,300)); 
echo $this->id_chart->set_chart('line') 
    ->set_data($data) 
    ->set_vertical() 
    ->render();

Perhatikan fungsi set_chart(‘line’), yang merupakan fungsi untuk membuat instance kelas line_chart.

Cara Penggunaan

1. Depedensi

Anda hanya dapat menggunakan PHP5 untuk menggunakan library ini. Pastikan Anda sudah menginclude library SWFObject. Jika belum, Anda bisa mendownloadnya di sini.

Jika tidak ingin menggunakan library tersebut, Anda dapat memuat flash secara manual dan memasukkan URL JSON ke dalam variabel data-file.

2. Persiapan Syntax HTML dan Memuat Flash

Pada tahap ini, kita harus menghasilkan syntax HTML dan memuat flash. Salah satu cara yang dapat dilakukan adalah sebagai berikut:

function index() { 
    $this->load->helper('url'); 
    $this->load->library('id_chart/id_chart'); 
    $chart['c1'] = $this->id_chart->chart_embed('test',800,250,site_url('welcome/example1'),base_url()); 
    $chart['c2'] = $this->id_chart->chart_embed('test2',800,250,site_url('welcome/example2'),base_url()); 
    $chart['c3'] = $this->id_chart->chart_embed('test3',800,250,site_url('welcome/example3'),base_url()); 
    $chart['c4'] = $this->id_chart->chart_embed('test4',300,300,site_url('welcome/example4'),base_url()); 
    $this->load->view('welcome_message',$chart); 
}

Pada fungsi chart_embed, parameter pertama adalah ID chart, diikuti dengan width, height, URL JSON, dan base URL untuk OFC.

3. Menghasilkan JSON

Perhatikan fungsi example1(). Pada parameter ke-4, terdapat URL yang digunakan untuk menghasilkan JSON. Untuk menghasilkan JSON, Anda hanya perlu membuat array yang berisi label dan nilai. Berikut contoh sederhananya:

function example1() {   
    $this->load->helper('url'); 
    $this->load->library('id_chart/id_chart'); 
    // Generate data secara acak 
    for ($i=1;$i<30;$i++) 
        $data[] = array('label'=>'data '.$i, 'value'=>rand(1,300)); 
    echo $this->id_chart->set_chart('line') 
        ->set_data($data) 
        ->set_vertical() 
        ->render(); 
}