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();
}

26 Comments

June 9, 2010 12:01 pm by Bguz Reply

Tutorial yang bagus.
bagaimana jika tutorial bisa lebih detail. di jelaskan line per line code yang penting.
Kasihan mas yang baru belajar codeigniter ^_^
June 11, 2010 8:06 am by utari Reply

ok nih, lumayan jelas tutorialnya..
thx
(http://tric06.student.ipb.ac.id/)
June 16, 2010 12:21 am by eta Reply

makasih link downloadnya.. saya ijin sedot ya.. :D
June 19, 2010 8:13 am by zalaz Reply

wow.... keren tuhh... btw saya sudah coba download file nya tpi gak muncul chartnya, yang ada hanya tertulis, Line Chart, Bar Chart, Area Chart, & Pie Chart....

mungkin SWFObjectnya belum ada .. padahal saya rajin update flashplayer & juga saya menggunakan XAMPP yang terbaru (belum lebih dari 2 bulan kemaren yang pasti sudah PH5)

bisa bantu salahnya dimana ?
June 19, 2010 8:29 am by zalaz Reply

saya juga padahal sudah menyertakan SWFObjectnya sekarang... but it's not work.. :((

June 21, 2010 4:45 pm by ibnoe Reply

ada pesan error?

July 9, 2010 1:50 pm by akhatam Reply

Wahh mumett ane gan.. hahha.. maklum baru nwebie nehh..
July 24, 2010 12:31 am by lizarazu Reply

mass,file swf nya mana y?????????kok ada file js ngak ada swf nya padahal discript demo terdapat file swf pada library....
klu bener tolong link dwn nya y mas....
klu aku salah y aku minta maaf..namanya juga mencari ilmu mas...
August 6, 2010 11:15 am by caesar Reply

agan,, ini gimana yaa??? bingung saya.... maklum bgt ya masih newbie...
October 25, 2010 4:30 pm by romdhan m u Reply

thank's link downloadnya
November 17, 2010 12:47 am by Jefriyanto Reply

ane bantu mas ibnoe deh

dapat mendownload script aslinya open flash chart deh disini
http://biznetnetworks.dl.sourceforge.net/project/openflashchart/open-flash-chart/Version%202%20Lug%20Wyrm%20Charmer/open-flash-chart-2-Lug-Wyrm-Charmer.zip

itu uda ada swfnya :)
ntar di tarok di folder sesuai dengan parameter ke 5
misal
$this->id_chart->chart_embed('test',800,250,site_url('welcome/example1'),base_url());
karena base_urk() berarti tarok sejajar dg index.php nya website utama :)
tq
November 22, 2010 10:37 am by dwi Reply

kalo script diatas disimpennya di controller atau view? terus kalo swf object otu disimpen d lib?
maaf banyak nanya, maklum masih pemula banget, terima kasih
November 22, 2010 10:45 am by dwi Reply

maaf, udah ada ternyata, tadi belum dilihat, tapi pas udah dibuka, jadi URL not found. aneh? kalo itu kenapa ya?
November 24, 2010 9:21 am by deni sutaji Reply

bagus banged...
tapi ane mau tanya gan, bagaiamana jika ingin menggunakan FushionChart. apakah sama saja dengan opnflash... ???

terima kasih,
Deni Sutaji
February 9, 2011 3:56 pm by ibnoe Reply

@deni sutaji: beda karena format jsonnya beda.. prinsipnya sama aja
@dwi : urlnya apa?
March 1, 2011 11:52 am by Eski Reply

mas knp pas saya coba kok ngk keluar gambar chart ny ya??heheh

saya dah donlod SWFObjectnya dan saya taro sesuai agan Jefriyanto bilang
March 5, 2011 12:29 am by ibnoe Reply

coba di view source.. komponen flashnya ada ga?
March 22, 2011 9:51 pm by bali media design Reply

hheee, makasi infonya mas.
Terus terang saya tumben dengar istilah open flash chart, emang saya perlu banyak belajar tentang php nhii
thanx ya mas atas tutorialnya.. saya download dulu untuk blajar ^_^
March 24, 2011 12:35 pm by pujianto Reply

idem kaya mas eski udah saya view souce

Welcome to CodeIgniter

tapi gambar tidak keluar.. salah di mana
March 24, 2011 1:06 pm by pujianto Reply

mau kasih solusi karena saya sudah berhasil
pertama copy http://koder.web.id/demo/id_chart//swfobject.js dan paste ke url maka akan muncul skrip di web browser
copy semua skrip dan pastekan ke editor (notepad++) save as dengan nama file swfobject.js dan simpan di file tsb setara dengan folder system. moga membantu
September 15, 2011 11:39 am by Shandy Reply

Hmm mau nanya
Kalo kita mau menampilkan 2 garis dalam 1 diagram itu bisa gak y ?
Saat ini kan baru cuman 1 garis doang

Thx
September 20, 2011 4:09 pm by Kingstone Reply

Mau nanya kalo mw dibuat dalam 1 diagram garis , pake 2 garis bisa gak yak ?
September 22, 2011 9:04 am by SHandy Reply

Gmn dengan pertanyaan saya yg kemaren ?
Apakah memungkinkan dibuat 2 garis dlm 1 diagram ?
October 20, 2011 4:05 am by BOONAAA Reply

Kalau datanya dari database gimana???

misal data yang diambil, dalam kategori dan total post yang ada di kategori itu.

gimana nge render nya ?
November 9, 2011 9:36 am by Restyo Reply

Mas ini saya sudah mempraktekan step2 yang udah dikasih..
tapi tetep ga keluar gambar chartnya..
saya coba view source nya kaya gini bentuknya....
kayanya jsonnya ga mau jalan, trus gimana solusi nya ya mas

var so = new SWFObject("http://localhost/ascast/open-flash-chart.swf", "chart_test", "800", "250", "9", "#FFFFFF");
so.addVariable("data-file", "http://localhost/ascast/asterisk/chart_queue");
so.addParam("allowScriptAccess", "always" );so.addParam("wmode", "transparent");
so.write("test");
November 9, 2011 3:41 pm by Restyo Reply

mas update an error dari saya

Open Flash Chart

JSON Parse Error [Syntax Error]
Error at character 0, line 1:

0:
kenapa ya???
Tolong Mas (T.T)