Membuat Grafik Flash dengan Framework PHP Codeigniter

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.

Di antara library-library tersebut, ada yang menampilkan berupa gambar, adapula yang menampilkan berupa grafik flash yang lebih interaktif. Saya sarankan, sebaiknya menggunakan grafik dengan tampilan flash saja karena tidak melakukan rendering gambar ketika aplikasi diload yang tentunya akan memakan waktu dan proses lebih lama. Untuk grafik flash, yang cukup terkenal adalah Fushion Flash Chart. Library ini unggul dalam hal banyaknya variasi grafik yang dibuat. Secara umum, ketika hendak membuat grafik ini, kita harus menyiapkan XML file sebagai data provider. XML file ini bisa digenerate dengan PHP dengan cara mengambil nilai dari database jika kita ingin lebih dinamis. Namun, sayangnya library ini berbayar dengan harga yang cukup mahal.

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 Flash</title>
    </head>
    <body>
    <?php echo $graph1;?>
    </body>
</html>

farid

Selamat datang dan salam kenal. Penulis merupakan lulusan Sekolah Tinggi Ilmu Statistik Jakarta jurusan Komputasi Statistik. Menekuni pemrograman web khususnya PHP dengan Yii Framework. Penggemar musik instrumen dan film Doraemon. Berasal dari Kota Lumpia Semarang dan pernah bertugas menjadi Staf Produksi dan IPDS di BPS Kabupaten Melawi. Sejak tahun 2016, mulai bertugas sebagai Staf Pengolahan Data di BPS Provinsi Kalimantan Barat

You may also like...

  • ahmad

    jika menampilkan data dari database gmn pak?

    • kampungkali

      variabel array $data_1 tinggal diisi dari database saja. Kalau contoh di atas kan hasil meng-generate data random