[Yii Framework] Integrasi Chart dan Database dengan Highchart
August 22, 2011 88 Comments
Menyambung postingan saya sebelumnya disini dimana saya sudah mencontohkan step-step untuk membuat chart. Pada postingan kali ini saya akan paparkan bagaimana caranya untuk menghubungkan chart yang kita buat dengan database..
Okeh, pertama saya asumsikan saya memiliki tabel “profile”, dimana tabel tersebut memiliki attribut sebagai berikut:
- id : Primary key, integer, auto increment
- nama : varchar(30)
- jenisKelamin: enum(“Laki-laki, Perempuan”);
public function actionStus()
{
$sql='SELECT count(id),jenisKelamin FROM profile GROUP BY jenisKelamin';
$dataProvider=new CSqlDataProvider($sql,array(
'keyField' => 'id',
));
$this->render('stus',array(
'dataProvider'=>$dataProvider,
));
}
Penjelasan : kode di atas akan mengembalikan jumlah pengguna berdasarkan jenis kelaminnya.
Lalu buatlah sebuah file view “stus.php” yg isinya sebagai berikut jika anda ingin menampilkan datanya berupa bar chart:
<?php
$this->breadcrumbs=array(
'Chart'=>array('index'),
'Statistik Pengguna',
);
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'tinstrument-form',
'enableAjaxValidation'=>false,
)); ?>
<center>
?>
<?php
$label=array();
$nilai=array();
foreach($dataProvider->getData() as $i=>$ii)
{
$label[$i]=$ii['aa'];
$nilai[$i]=(int)$ii['count(id)'];
}
$this->widget('application.extensions.highcharts.HighchartsWidget', array(
'options'=>array(
'chart'=> array('defaultSeriesType'=>'column',),
'title' => array('text' => ''),
'legend'=>array('enabled'=>false),
'xAxis'=>array('categories'=>$label,
'title'=>array('text'=>''),),
'yAxis'=> array(
'min'=> 0,
'title'=> array(
'text'=>'Jumlah'
),
),
'series' => array(
array('data' => $nilai)
),
'tooltip' => array('formatter' => 'js:function(){ return "<b>"+this.point.name+"</b> :"+this.y; }'),
'tooltip' => array(
'formatter' => 'js:function() {return "<b>"+ this.x +"</b><br/>"+"Jumlah : "+ this.y; }'
),
'plotOptions'=>array('pie'=>(array(
'allowPointSelect'=>true,
'showInLegend'=>true,
'cursor'=>'pointer',
)
)
),
'credits'=>array('enabled'=>false),
)
));
?>
</center>
<?php $this->endWidget(); ?>
Sedangkan jika ingin menampilkannya dalam bentuk pie chart, anda dapat membuat code ny sebagai berikut:
<?php
$this->breadcrumbs=array(
'Chart'=>array('index'),
'Statistik Pengguna',
);
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'tinstrument-form',
'enableAjaxValidation'=>false,
)); ?>
<center>
?>
<?php
$bb=array();
foreach($dataProvider->getData() as $i=>$ii)
$bb[$i]=array($ii['aa'],(int)$ii['count(id)']);
$this->widget('application.extensions.highcharts.HighchartsWidget', array(
'options'=>array(
'series' => array(
array('type'=>'pie',
'data' => $bb
)
),
'title'=>'',
'tooltip' => array(
'formatter' => 'js:function(){ return "<b>"+this.point.name+"</b> :"+this.y; }'
),
'plotOptions'=>array('pie'=>(array(
'allowPointSelect'=>true,
'showInLegend'=>true,
'cursor'=>'pointer',
)
)
),
'credits'=>array('enabled'=>false),
)
));
?>
</center>
<?php $this->endWidget(); ?>
Jika kode yang anda masukkan sudah benar, maka anda akan melihat tampilan seperti berikut:
Bar Chart:
Pie Chart :
Okeh, selesai.. Silahkan anda coba dan modifikasi dengan kebutuhan anda…
Selamat mencoba..
Semoga membantu… 😀
gan tau caranya ganti label gak gan??., tapi data dari database tetep gitu gan..,
ane punya field JENIS_DONASI trus yang jenis donasi “infaq” itu maunya ane ganti labelnya aja jadi “infaq/sedekah” jadi gak perlu ganti recordnya, jadi d record tetep infaq, tapi di chartnya labelnya di ganti jadi infaq/sedekah gitu pinginnya.
bisa gak?.,
bisa gan, tapi agan harus cek satu persatu gan mau di rubah jadi apa gan..
agan rubah disini coding nya:
foreach($dataProvider->getData() as $i=>$ii)
{
$label[$i]=$ii[‘aa’];
$nilai[$i]=(int)$ii[‘count(id)’];
}
misal agan mau ubah label dg tulisan “makan” ==> “makannasi”, jadi agan buat dia:
foreach($dataProvider->getData() as $i=>$ii)
{
$label[$i]=$ii[‘aa’];
$nilai[$i]=(int)$ii[‘count(id)’];
if($ii[‘aa’]==”makan”)
{
$label[$i]=”makannasi”;
}
}
ok gan , udah ane coba,,, terima kasih..
gan, ane mau tanya lagi nih, ane punya error gini…
– waktu proses create user ane ada pilihan kode area, trus sama form userid. nah, kalau berhasil create maka userid otomatis jadi gini “kode.userid” (11.p-man , misal gini gan). nah itu udah bisa tapi sekarang masalahnya kalau ada error, misal form tanggal lahir ndak di isikan keluar error “Tanggal Lahir: cannot be blank.” setelah tanggal lahir udah di isi user id jadi gini gan “11.11.p-man” , jadi kode yang sebelumnya itu masih kesimpen gan, trus di form kode kan ada isinya udahan, itu masuk lagi jadi “11.11.p-man” nah itu caranya gimana ya gan??.,
mungkin perlu validasi lagi atau gimana gitu gan???.,
makasih gan..
setiap proses ny jalan, di set dlu aja gan nilai ny itu kosing. Jadi $userid=””; dlu gan..
di setnya itu sebelum di post atau dimna?.,
di sebelum if(issset()) aja gan..
$model->userid = ”;
if(isset($_POST[‘User’]))
{
$model->attributes=$_POST[‘User’];
$model->foto=CUploadedFile::getInstance($model,’foto’);
……………………
}
gini gan??., udah ane coba, tapi tetep aja gak bisa gan..,
hmm, kalo di dalem POST nya dan sebelum $model->attributes ny gmana gan hasil ny?
sama juga gan, udah ane coba2
– di dlam post sebelum $model->attributes
– di dlam post setelah $model->attributes
tapi tetep aja gan.
coba lihat coding di controller ama model ny gan..
udah solved gan tapi ane ndak set userid jadi kosong, tapi ane simpen userid yang sebelumnya,
controllernya jadi gini gan.
if(isset($_POST[‘User’]))
{
$model->attributes=$_POST[‘User’];
$model->foto=CUploadedFile::getInstance($model,’foto’);
$userid = $model->userid;
if ($model->status==’muzakki’)
{
//echo $model->status;
$model->userid = $this->generateid($model->kode);
}
else if($model->status==’jejaring’)
{
//echo $model->status;
$model->userid = $model->kode.”.”.$userid;
}
$model->nominal_autodebet = str_replace(‘.’, ”, $model->nominal_autodebet);
if($model->save())
{
if(!empty($model->foto))
{
$model->foto->saveAs(Yii::app()->basePath . ‘/../images/foto/’ . $model->id . $this->extract_fileext($model->foto));
}
if ($model->status==’jejaring’)
Rights::assign(‘Jejaring’, $model->id);
else
Rights::assign(‘Muzakki’, $model->id);
$this->redirect(array(‘view’,’id’=>$model->id));
// redirect to success page
} else
$model->userid = $userid;
terimakasih gan sudah di bantu
oh udah solved, okeh2 gan..
gan gan, numpang tanya lagi nih, tau caranya hapus record table lain dari 1 model ga?.,
jadi kan ada table transaksi, di situ kan kesimpen id_user yg input transaksi tadi, lha trus waktu usernya di hapus , record d tabel transaksi dimana id_user yg di hapus tadi juga ikut hilang gitu gan…
bisa ga gan??.,
di controller nya agan buat aja misal:
$this->loadModel($id)->delete();
$itu=Transaksi::model()->findByAttributes(array(‘id_user’=>$id));
$itu->delete();
udah gan , tapi gak bisa..,
ane pake gini.
$model=$this->loadModel($id);
$model_1=Donasi::model()->findAll(array(‘condition’=>’id_user = ‘.$id));
$model->delete();
$model_1->delete();
gak bisa gan,.
ada pesen error ny gan? oh iya, kalo findAll itu brrti ada bnyak ya gan row yg mau dihapus di tabel Donasi ny? kalo iya, agan harus pake foreach() gan buat ngapus ny satu persatu..
undeclare delete()
iya , jadi kan user tersebut melakukan banyak transaksi gan.. oh berarti kalau lebih dari satu musti …
,,,
iya gan, cz hasil variabel agan itu adalah beberapa row, jadi harus di delete 1 per 1..
maaf gan baru bales.
ternyata bisa gan pake gini.
Transaksi::model()->deleteAll(array(‘condition’=>’id_user = ‘.$id));
😀 ., makasih gan.
Minal Aidzin Wal Faidzin ya gan..
oh, okeh2..
ane jga baru tau kalo bisa cara kek gitu gan..
sama2 gan.. minal aidzin wal faidzinnya..
gan, ane mau nanya nih, gimana ya cara agar web kita mudah dikenali sama search engine ?.,
sori gan baru bales, baru selesai sidang, hehe..
coba agan googling aja gan SEO, itu salah satu teknik ny gan..
udah gan, ane udah cari2., n katanya musti d daftarin d search engine nya itu gan, dan punya ane udah ane daftarin tuh,,, tapi bingung sama fitur2 di dalem webmasternya.
wah, ane jga ga ngerti gan.. SEO aja cuma tau teori nya.. belum prnah main gituan, hehe..
hmm, gitu ya gan, kira2 agan tau cara lain ga selain itu gan?.,
hehe, ga tau juga gan..
hmmmmm, oklah gan,
oia gan,
ini bukan soal coding lagi ato apa nih gan, ane mau tanya.
kok blog yg tumblr ga update lagi?., itu postnya terakhir 2 bulan yg lalu ya?., hehehehehehehehe, seru gan posting2annya, bisa jadi inspirasi nih gan, thanks bgt gan.
hehe, iya gan..
blog itu emang ga pernah ane sentuh2 lagi..
itu pun postingannya forward2 an dari yg di blogspot gan..
hehe..
Mau tanya gan,
Pas nampilin grafik dari database, xAxis yang ditampilin cuma sebagian gan.. Misal dari 12 (jan-Des) yang ditampilin cuma 10 gan (Jan- Okt)..
analisa ane sih foreach-nya cuma bisa 10 gan.. mohon bantuannya gan, kenapa bisa begitu?
di controllernya pagination di csqlprovider nya harus di atur dlu gan, cz itu default nya 10 emang. Ubah kek gini :
$dataProvider=new CSqlDataProvider($sql,array(
‘keyField’ => ‘id’,
‘pagination’=>array(
‘pageSize’=>30,
),
terima kasih bro, banyak ilmu yang saya dapat dari sini…
Dapat Error kayak gini
Undefined index: aa
variabel aa didefinisikan sebagai apa yah ?
index aa itu emang di dapet dari query nya gan, misal “select nama as aa” baru agan bisa pake aa. Kalo di query ny agan ga definisiin sperti itu berrrti ga bisa..
maksudnya aa itu gmana mas??
kalo dengan php biasa gmna caranya
wah, saya ga pernah coba juga kalo itu gan..
Mas, mau tanya, kalau pake chart tipe stacked column gimana ya?
Cukup bingung dengan kode yang beda dengan highchart awal hehe..
wah, saya juga ga pernah buat mas..
Gan, tanya donk
punya contoh yang basic line chart ga?
makasih banyak
pernah buat mas.. tapi udah lupa dimana..
oooh
ok deh
makasih
Gan itu kalo jenis kelamin nya yang di form di buat checkbox kaya gimana. Tolong pencerahan nya gan. Thx
udah solved gan, makasih gan
mau tanya lagi gan,itu kalo 2 chart di jadiin satu halaman gimana gan? misalnya yang chart 1:jenis kelamin dan chart 2:jenjang sekolah,lha itu gimana gan? semua data nya di ambil dari database.
yang penting agan bisa narik data nya dari database, pake group by nya di mainin aja di sql nya.. trus nilai nya di masukin ke chart nya..
gan, mau tanya dong, ini kan untuk menampilkan jumlah data yang masuk ya, kalo logika untuk menampilkan jumlah data yang sudah ada, misalnya udah ada di dalam field stock_obat : 80, 905, 150
itu gimana ya gan?
dikasih field penanda aja gan. Dimana field itu utk menandai barang yg sudah ada, uda terjual, dll..
hmm maksud saya untuk menampilkannya di dalam chart gitu gan. gimana yaa caranya? jd chart batang-nya itu menunjukkan angka yang ada di dalam field, bukan count data yang masuk satu per satu seperti coding yg agan share di atas..
tinggal mbak atur aja query nya, terus hasil dari query (angka2) nya masukin ke dalam variabel utk ke chart nya mbak..
thanks gan buat artikelnya,
mau tanya tanya gan.
saya coba pake coding kaya dibawah ini:
masalahnya: kenapa arraynya ga bisa ke baca ya gan?
$i=array();
$aa=array();
$i=$dataProviderSkill->getData();
$aa=array($i[0][‘rate’],0,0); –> kalo saya echo $i[0][‘rate’]; nilainya keluar. tapi pas masuk ke array ko jadi ga keluar ya.
‘plotOptions’ => array(‘series’ => array(‘stacking’ => ‘normal’)),
‘series’ => array(
array(‘name’ => ‘yii’, ‘data’ => $aa), ‘native php’, ‘data’ => array($aa1, 0, 0)),
array(‘name’ => ‘jquery’, ‘data’ => array(0, $ab, 0)),
array(‘name’ => ‘json’, ‘data’ => array(0, $ab1, 0)),
array(‘name’ => ‘Mysql’, ‘data’ => array(0, 0, $ac))
))
thanks sebelumnya gan. 🙂
sebelum masuk ke chart nya, coba di print_r array nya keluar ga nilai nya gan? ada ga nilai nya dan udah ssuai belum?
kalo di print_r ($aa) keluar gan: Array ( [0] => 30 [1] => 0 [2] => 0 )
sudah sesuai sama inputanya –> $aa=array($i[0][‘rate’],0,0);
tapi giliran dimasukin ke chartnya ga keluar valuenya gan,
sudah resolve gan, ternyata masalah tipe data arraynya gan. ane lupa rubah ke integer…
thanks ya gan….
di convert ke integer dulu gan nilainya.. (int)$nilainya
saya mau buat chart usia gan, dari usia tersebut digolongkan menjadi, 60th misalnya, nah datanya saya ambil dari database field ‘tgl_lahir’ yang bertipe data date. gimana ya gan? ada saran? makasih sebelumnya gan
saya mau buat chart usia gan, dari usia tersebut digolongkan menjadi, ,1th, 2-12th, 13-25th, 26-45th, > 60th misalnya, nah datanya saya ambil dari database field ‘tgl_lahir’ yang bertipe data date. gimana ya gan? ada saran? makasih sebelumnya gan
mas, buat query nya dulu mas
kalo mau buat search jeniskelamin di highchart bisa ga ya..?
misal, dari data diatas itu kita buat dropdown jeniskelamin, ketika kita pilih laki-laki maka yang muncul grafiknya hanya data laki-laki,,begitu juga sebaliknya ketika kita pilih perempuan, maka grafik yang muncul hanya data perempuan.
thanks
cara nya sama aja dengan sistem pencarian biasa. Tinggal beda nya di tampilin dalam bentuk tabel atau chart…
saya sdh coba tp tetap ga bisa…di bagian coding mana nya ya yg hrs di ubah..?
ga bisa nya gimana mas? ada pesan error?
datanya ga muncul di grafik…nilai x dan y nya jadi 0
coba nilai value nya di konvert ke dalam bentuk integer gan. (int)$nama_nilai, dia sering terkendala disana..
saya punya tabel berita
-judul (varchar)
-views (int)
gimana caranya agar cartnya membaca sesuai judul masing2 dengan anka nya yg bergerak adalah viewsnya
public function actionStus()
{
$sql=’SELECT count(id),judul FROM berita GROUP BY views’;
$dataProvider=new CSqlDataProvider($sql,array(
‘keyField’ => ‘id’,
));
$this->render(‘stus’,array(
‘dataProvider’=>$dataProvider,
));
}
apakah sudah bener
’SELECT views,judul FROM berita’; aja gan… coba baca lagi aja tentang query sql gan..
gimana cara nampilin nya di browser mas??
mksd nya ? step di atas jika sudah selesai bisa nampil di browser mbak..
udah solved mas.. hehe
oiy ,, mau nanya lagi ,, di dalam page chart itu ada tabelnya.. caranya gmana y mas??
itu otomatis dari chart nya sis…
kalo pake sql command kita mau nampilin data nya dalam bentuk tabel dan bar chart… caranya sama mas??
sis harus bisa ngeluarin data sql nya, abis itu baru di lempar ke chart..
untuk belajar cara narik data dengan sql command, bisa dicari di blog ini sis..
mas, saya punya error pada saat running k browser ..
error ny kayak gini : Alias “application.extensions.highcharts.HighchartsWidget” is invalid. Make sure it points to an existing PHP file and the file is readable.
kira2 ap yg salah y mas?? extensions ny udah d tambahin di folder extensions dan juga udah di deklarasikan di main.. mhon bantuannya mas..
path extensionnya udah bener? atau tulisanya nama nya ada yang salah..
udah mas,, juga udah d cek.. kira2 ap yg kurang lgi y mas??
dari pesan error nya sih itu salah path nya.. bisa aja salah besar kecil tulisannya, atau salah pengetikan..
categories yg x axis knp cmn muncul angka 0-9 gan?
bukan data dari databasenya.
mungkin data dari database coba di konversi ke integer gan (int)namanilai
Datanya berupa format tanggal gan.
bisa kasih contoh gan, maaf baru bljr php
harus nya keluar sih gan… coba di print_r nilainya, apa udah benar keluarg tanggal nya mas..
mas minta pencerahannya….
Data yang di load koq gak semua ya? Maksimal hanya 10 baris data. (yang ditampilkan hanya data dari 10 baris tersebut, sisa data lainnya gak tampil)
thanks.
itu karena di Yii default nya emang dibatasi 10 data mas.. kalo mau lebih banyak bisa di atur sendiri.. coba cari2 aja cara buat tentang totalitemcount di active record..
Undefined index: aa
C:\xampp\htdocs\z\protected\views\profile\stus.php(17)
05 );?>
06
07 beginWidget(‘CActiveForm’, array(
08 ‘id’=>’tinstrument-form’,
09 ‘enableAjaxValidation’=>false,
10 )); ?>
11
12 ?>
13 getData() as $i=>$ii)
17 $bb[$i]=array($ii[‘aa’],(int)$ii[‘count(id)’]);
aa fungsinya apa
jadi aa itu narik index array dari data nya sis..
jadi kalau Undefined index: aa gimana harusnya ?
gan mau tanya kalau bikin char berdasarkan tanggal gi mana yah
gan mau tanya, kalau pada grafiknya ingin dibuat dalam pecahan rupiah, gmn ya caranya..terima kasih
gan kok ga muncul ya chartnya
wah agan ini bener bener bikin saya berfikir haha, sudah solved gan 🙂
gan ko ga nampil sekali chart nya ,saya ngikutin step dari atas
mas sabit, bisa ngasih contoh yg bar chart versi drilldownnya? mohon bantuannya. terimakasih