[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 :D.

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… 😀