Seperti kita ketahui OpenFlashChart adalah tool cantik untuk membuat flash chart. OpenFlashChart bersifat opensource sehingga kita bebas menggunakan, menyebarkan dan memodifikasinya :) ..
Kali ini saya mencoba untuk berbagi pengalaman mengenai penggunaan OpenFlashChart pada CodeIgniter (sebagai library). Tentang bagaimana menggunakan OpenFlashChart itu sendiri anda bisa melihatnya di http://teethgrinder.co.uk/open-flash-chart/ .
Mohon koreksinya bila dalam entry ini terdapat kesalahan, mohon maaf juga kalau topiknya usang ....
Menggunakan OpenFlashChart sebagai Library di CI
- Download OpenFlashChart di http://teethgrinder.co.uk/open-flash-chart/
- Buat folder pada CI root assets/
--swf/
--js/
- Extract OpenFlashChart to temporary folder
- Copy file php-ofc-library/open-flash-chart.php ke system/application/library/ lalu rename menjadi graph.php
- Copy file open-flash-chart.swf ke assets/swf/
- Copy file js/swfobject.js ke assets/js/
- Edit file graph.php, temukan baris :
$this->js_path = 'js/';
$this->swf_path = '';
Edit menjadi :
$this->js_path = base_url().'assets/js/';
$this->swf_path = base_url().'assets/swf/';
- Contoh penggunaan :
Contoller :
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
Class Statistic extends Controller {
function Statistic(){
parent::Controller();
//$this->freakauth_light->check('user');
//load the models
$this->load->model('vouchermodel');
$this->load->model('postpaidmodel');
$this->load->model('billingplanmodel');
$this->load->model('statisticmodel');
//load radius helpers
$this->load->helper('radius');
}
function index(){
//security check
$this->freakauth_light->check('user');
$this->load->library('graph');
//get billingplan
$bp_qty = array();
$bp_label = array();
$data['billingplans'] = $this->billingplanmodel->getBillingPlanStat();
foreach ($data['billingplans']->result() as $billingplan) {
$bp_qty[geshifilter-] = $billingplan->qty;
$bp_label[] = $billingplan->billingplan;
}
//PIE chart, 60% alpha
//
$this->graph->pie(80,'#505050','{font-size: 12px; color: #404040;');
//
// pass in two arrays, one of data, the other data labels
//
$this->graph->pie_values( $bp_qty, $bp_label );
//
// Colours for each slice, in this case some of the colours
// will be re-used (3 colurs for 5 slices means the last two
// slices will have colours colour[0] and colour[1]):
//
$this->graph->pie_slice_colours( array('#d9db35','#487daf','#d00000','#4ae331') );
$this->graph->set_tool_tip( '#val# Vouchers' );
$this->graph->bg_colour = '#040404';
$this->graph->title( 'Voucher Created', '{font-size:14px; color: #7F7772}' );
$this->graph->set_output_type('js');
//get the vouchers data
$data['voucher'] = $this->vouchermodel->getVoucherStatistics();
//get the postpaid account data
$data['postpaid'] = $this->postpaidmodel->getAccountStatistic();
//get the who's online list
$data['onlineuser'] = radius_get_online_users();
$data['title'] = "Hotspot Statistics";
$data['h1'] = "Hotspot Statistics";
//$this->output->enable_profiler();
$this->load->view('statistic/statistic_view',$data);
}
}
?>
</code>
view :
<code>
<?php $this->load->view('header') ?>
<h1><?=$h1?></h1>
<div id='voucher_info'>
<h3>Vouchers Info</h3>
<ul>
<li><label>Vouchers Created</label><?=$voucher['created']?></li>
<li><label>Used</label><?=$voucher['used']?></li>
<li><label>Expired</label><?=$voucher['expired']?></li>
</ul>
<h3>Billing Plans</h3>
<ul>
<?php foreach($billingplans->result() as $row):?>
<li><label><?=$row->billingplan?></label><?=$row->qty?></li>
<?php endforeach; ?>
</ul>
<div id='graph'>
<?=$this->graph->render()?>
</div>
</div>
<div id='postpaid_info'>
<h3>Postpaid Account Info</h3>
<ul>
<li><label>Account Created</label><?=$postpaid['created']?></li>
<li><label>Used</label><?=$postpaid['used']?></li>
</ul>
</div>
<? $this->load->view('footer'); ?>
</code>
lebih lanjut cara menggunakan openflashchart bisa dilihat di <a href="http://teethgrinder.co.uk/open-flash-chart/" title="http://teethgrinder.co.uk/open-flash-chart/">http://teethgrinder.co.uk/open-flash-chart/</a> .
Selamat Mencoba[/geshifilter-]?>
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 :
<?
Class Openflashchart extends Controller {
function Openflashchart(){
parent::Controller();
}
function index(){
// Load library graph
$this->load->library('graph');
//Sintaks : pie( integer $alpha, string $line_colour, string $style )
//$alpha nilainya (0-100).Pada saat mouse di atas slice, maka akan tampak dari $alpha to 100.
//$line_colour : Nilai warna outline dalam HEXadecimal
//$style : CSS style dari labels.
//Gunakan {display: none;} untuk menghapus labels, Nilai label tetap akan ditampilkan pada tooltips
//Contoh di bawah ini PIE chart, 75% alpha
$this->graph->pie(75,'#505050','{font-size: 12px; color: #404040;');
// Nilai yang diberikan untuk Pie Chart
$this->graph->pie_values( array(20,40,40), array('IE','Firefox','Opera') );
// Warna dari masing-masing slice
$this->graph->pie_slice_colours( array('#d9db35','#487daf','#d00000') );
// Tool tip yang akan ditampilkan pada saat mouse di atas slice
$this->graph->set_tool_tip( 'Persentase : #val# ' );
$this->graph->bg_colour = '#FFFFFF';
$this->graph->title( 'Contoh Pie Chart', '{font-size:14px; color: #7F7772; padding-bottom:25px}' );
$this->graph->set_output_type('js');
$this->load->view('v_openflashchart');
}
}
?>
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()?>