[Yii Framework] Membuat Chart

Data… sesuatu yang sangat penting tapi banyak orang yang tidak suka melihatnya karena bisa membuat pusing.. Tidak jarang untuk mempermudah orang melihat dan mempelajari data, maka data itu sendiri bisa di kemas dalam tampilan yang lebih interaktif dan menarik. Salah satu nya adalah menampilkannya dalam bentuk gambar berupa chart…

Dalam Yii Framework sendiri cukup mudah untuk melakukannya.. Sudah ada beberapa extension yang ada untuk menampilkan data. Saya sendiri menggunakan Yii Open Flash Chart untuk menampilkan chart. Extension itu sendiri saya pilih karena menurut saya fitur nya sudah cukup memenuhi kebutuhan saya dan ukurannya yang cukup ringan. Tapi tentu anda bisa explore sendiri extension lainnya yang menurut anda lebih baik😀.

Okeh, saya akan paparkan beberapa step untuk menambahkan chart pada aplikasi anda.. Pertama, download extension dari link yang sudah saya sediakan di atas. Lalu extract dan masukkan ke dalam “projectAnda/protected/extensions”. Untuk menampilkan chart yang data nya tidak terhubung ke database, anda bisa melihat contohnya di link yang sudah saya berikan di atas. Saya disini akan memaparkan cara menampilkan chart yang sudah terhubung dengan database kita…

Setelah anda extract file hasil download tadi, sekarang bukalah controller dimana anda akan menampilkan data anda. Ambil nilai dari database anda yang akan anda tampilkan. Saya sendiri membuat sebuah “actionChart” di controller saya seperti berikut:

	public function actionChart()
	{
		$aa=array();
		$aa[0]=array('nama'=>'NamaTabel1','nilai'=>Tabel1::model()->count());
		$aa[1]=array('nama'=>'NamaTabel2','nilai'=>Tabel2::model()->count());
		$aa[2]=array('nama'=>'NamaTabel3','nilai'=>Tabel3::model()->count());
		$aa[3]=array('nama'=>'NamaTabel4','nilai'=>Tabel4::model()->count());
		$this->render('chart',
			      array('aa'=>$aa,));
	}

Penjelasan : disana saya mendefinisikan sebuah nilai $aa dengan tipa array. Lalu saya memasukkan ke dalamnya data nama sesuai nama tabel masing-masing, dan nama “nilai” nya saya masukkan data nya sesuai dengan jumlah data pada masing-masing model. Disana sendiri saya mengirim variabel $aa agar bisa digunakan di view yang akan menampilkan chart nya.

Nah, setelah sudah mendefinisikan data dari controller tadi, sekarang kita definisikan chart nya di tampilan kita. Anda cukup masukkan code berikut di tampilan anda:

Untuk membuat “Line Chart”:

$flashChart = Yii::createComponent('application.extensions.chart.EOFC2');
 
$flashChart->begin();
$flashChart->setData($aa,'{n}.nilai','{n}.nama');
$flashChart->renderData('line');
$flashChart->render(400, 400);

Untuk membuat “Bar Chart”:

$flashChart = Yii::createComponent('application.extensions.chart.EOFC2');

$flashChart->begin();
$flashChart->setData($aa,'{n}.nilai','{n}.nama');
$flashChart->renderData('bar');
$flashChart->render(400, 400);

Untuk membuat “Pie Chart”:

$flashChart = Yii::createComponent('application.extensions.chart.EOFC2');

$flashChart->begin();
$haha=array();
$flashChart->setData($aa,'{n}.nilai','{n}.nama');
$flashChart->renderData('pie');
$flashChart->render(400, 400);

Untuk membuat “Bar Chart” dengan label:

$flashChart = Yii::createComponent('application.extensions.chart.EOFC2');

$flashChart->begin('SteppChart');
$flashChart->setTitle('Publikasi BPS RI','{color:#880a88;font-size:15px;padding-bottom:20px;}');
$flashChart->setData($aa);
$flashChart->setNumbersPath('{n}.nilai');
$flashChart->setLabelsPath('default.{n}.nama');
$flashChart->setLegend('x','Jenis Publikasi');
$flashChart->setLegend('y','Jumlah', '{color:#AA0aFF;font-size:12px;}');
$flashChart->renderData();
$flashChart->render(400,400);

Selesai… Silahkan anda coba dan liat hasilnya…

Semoga membantu…😀

6 Responses to [Yii Framework] Membuat Chart

  1. black says:

    tengs gan,,,ini ni yang ane tunggu tunggu
    ntar maleman ane coba,, mau putu2 kelas soalnya😀

    regards
    i’am black

  2. p-man says:

    gan, kalo ane boleh tau ada contoh screen shotnya ga?., tampilannya gimana?. , cz pas ane buka link extensionsnya try out a demo nya ndak ada.,

  3. sabitzhabit says:

    wah, sory gan baru bales..
    nanti la ane upload gan. skrg lagi sibuk skripsi gan. hehe..

  4. teuku says:

    Gan masih sibuk skripsi tidak?🙂
    mo tanya dunk..
    kenapa pada saat di run, ada error :
    Non-static method Set::extract() should not be called statically, assuming $this from incompatible context

    apa ada yg pernah mengalami?

    terima kasih sebelumnya.

  5. sabitzhabit says:

    ga gan, ane udah wisuda😀..
    wah, bisa kasih pesen error detail ny gan? baris mana yang error ny udah d coba kotak katik gan?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: