Menggunakan OpenFlashChart dengan Codeigniter ~ inno zero

Selasa, 20 September 2011

Menggunakan OpenFlashChart dengan Codeigniter

Open flash chart (OFC) adalah sebuah komponen flash yang berfungsi sebagai untuk menampilkan grafik. Keuntungan yang didapatkan ketika menggunakan flash sebagai media grafik adalah selain tampilannya yang menarik ia juga dapat di control melalui javascript sehingga untuk proses reload, ganti tipe chart dll dapat menggunakn library.

Open flash chart (OFC) telah menyediakan sejumlah library php untuk dapat menggenerate json yang akan digunakan oleh openflash chart untuk menampilkan grafik. pada json tersebutlah di sertakan tipe chart yang diinginkan beserta data-datanya. Tetapi penggunaanya tidak lah mudah, karena banyaknya kelas-kelas yang adal di dalam library tersebut. Oleh karena itu maka penulis mencoba membuat sebuah library yang merupakan factory dari library openflash chart itu sendiri.

DEMO APP DOWNLOAD

Struktur ID_Chart

Kelas Id chart adalah sebuah factory dari kelas-kelas chart lainya. adapun struktur kelas chart adalah sebagai berikut:

Struktur Kelas Id Chart

adapun penggunaanya adalah sebagai berikut :

$this->load->library('id_chart/id_chart');
for ($i=1;$i&lt;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’), itu adalah fungsi yang menginstance kelas line_chart.

Cara Penggunaan

1. Depedensi

Anda hanya dapat menggunakan PHP5 untuk menggunakan library ini. Untuk dapat menggunakan library ini anda sudah harus mengincludekan library SWFObject. Jika anda belum memilikinya anda bisa download disini.
Jika anda tidak mau menggunakan library tersebut maka anda dapat meload flashnya secara manual lalu memasukan url json kedalam variabel data-file

2. Mempersiapkan syntax html dan meload flash

Pada tahap ini kita harus mengenerate syntax html dan meload flash. apaun cara yang dapat dilakukan adalah

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 1 adalah id dari chart, selanjutnya width, height, url_json dan base user openflash

Menggenerate JSON

Perhatikan fungsi chart_embed, pada paremeter ke 4 ada lah url yang berfungsi untuk menggenerate json. untuk menggenerate json, simple saja anda cukup membuat sebuah array yang berisi label dan value. contoh

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

Sumber : http://www.koder.web.id

inno zero

Selasa, 20 September 2011