[Yii Framework] Integrasi Chart dan Database dengan Highchart

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”);
Anggaplah saya sudah menginput ke dalam data tersebut beberapa informasi untuk tabel tersebut. Lalu saya akan membuat jumlah pengguna berdasarkan jenis kelaminnya dengan menggunakan chart, yaitu pie chart dan bar chart. Okeh berikut step-step nya:
Pertama buatlah sebuah action di controller anda seperti berikut:
	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…😀

87 Responses to [Yii Framework] Integrasi Chart dan Database dengan Highchart

  1. p-man says:

    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?.,

  2. sabitzhabit says:

    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”;
    }
    }

  3. p-man says:

    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..

  4. sabitzhabit says:

    setiap proses ny jalan, di set dlu aja gan nilai ny itu kosing. Jadi $userid=””; dlu gan..

  5. p-man says:

    di setnya itu sebelum di post atau dimna?.,

  6. sabitzhabit says:

    di sebelum if(issset()) aja gan..

  7. p-man says:

    $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..,

  8. sabitzhabit says:

    hmm, kalo di dalem POST nya dan sebelum $model->attributes ny gmana gan hasil ny?

  9. p-man says:

    sama juga gan, udah ane coba2
    – di dlam post sebelum $model->attributes
    – di dlam post setelah $model->attributes
    tapi tetep aja gan.

  10. sabitzhabit says:

    coba lihat coding di controller ama model ny gan..

  11. p-man says:

    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

  12. sabitzhabit says:

    oh udah solved, okeh2 gan..

  13. p-man says:

    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??.,

  14. sabitzhabit says:

    di controller nya agan buat aja misal:
    $this->loadModel($id)->delete();
    $itu=Transaksi::model()->findByAttributes(array(‘id_user’=>$id));
    $itu->delete();

  15. p-man says:

    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,.

  16. sabitzhabit says:

    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..

  17. p-man says:

    undeclare delete()

    iya , jadi kan user tersebut melakukan banyak transaksi gan.. oh berarti kalau lebih dari satu musti …

    ,,,

  18. sabitzhabit says:

    iya gan, cz hasil variabel agan itu adalah beberapa row, jadi harus di delete 1 per 1..

  19. p-man says:

    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..

  20. sabitzhabit says:

    oh, okeh2..
    ane jga baru tau kalo bisa cara kek gitu gan..
    sama2 gan.. minal aidzin wal faidzinnya..

  21. p-man says:

    gan, ane mau nanya nih, gimana ya cara agar web kita mudah dikenali sama search engine ?.,

  22. sabitzhabit says:

    sori gan baru bales, baru selesai sidang, hehe..
    coba agan googling aja gan SEO, itu salah satu teknik ny gan..

  23. p-man says:

    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.

  24. sabitzhabit says:

    wah, ane jga ga ngerti gan.. SEO aja cuma tau teori nya.. belum prnah main gituan, hehe..

  25. p-man says:

    hmm, gitu ya gan, kira2 agan tau cara lain ga selain itu gan?.,

  26. sabitzhabit says:

    hehe, ga tau juga gan..

  27. p-man says:

    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.

  28. sabitzhabit says:

    hehe, iya gan..
    blog itu emang ga pernah ane sentuh2 lagi..
    itu pun postingannya forward2 an dari yg di blogspot gan..
    hehe..

  29. lukman says:

    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?

  30. sabitzhabit says:

    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,
    ),

  31. Dedy says:

    Dapat Error kayak gini

    Undefined index: aa

    variabel aa didefinisikan sebagai apa yah ?

  32. 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..

  33. zoro says:

    kalo dengan php biasa gmna caranya

  34. wah, saya ga pernah coba juga kalo itu gan..

  35. brightshield says:

    Mas, mau tanya, kalau pake chart tipe stacked column gimana ya?
    Cukup bingung dengan kode yang beda dengan highchart awal hehe..

  36. wah, saya juga ga pernah buat mas..

  37. Fajar says:

    Gan, tanya donk
    punya contoh yang basic line chart ga?
    makasih banyak

  38. pernah buat mas.. tapi udah lupa dimana..

  39. akbar says:

    Gan itu kalo jenis kelamin nya yang di form di buat checkbox kaya gimana. Tolong pencerahan nya gan. Thx

  40. akbar says:

    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.

  41. 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..

  42. yolanda says:

    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?

  43. dikasih field penanda aja gan. Dimana field itu utk menandai barang yg sudah ada, uda terjual, dll..

  44. yolanda says:

    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..

  45. tinggal mbak atur aja query nya, terus hasil dari query (angka2) nya masukin ke dalam variabel utk ke chart nya mbak..

  46. fitrazh says:

    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.🙂

  47. sebelum masuk ke chart nya, coba di print_r array nya keluar ga nilai nya gan? ada ga nilai nya dan udah ssuai belum?

    • fitrazh says:

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

  48. di convert ke integer dulu gan nilainya.. (int)$nilainya

  49. araquilla says:

    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

  50. araquilla says:

    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

  51. mas, buat query nya dulu mas

  52. agus says:

    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

  53. agus says:

    datanya ga muncul di grafik…nilai x dan y nya jadi 0

  54. coba nilai value nya di konvert ke dalam bentuk integer gan. (int)$nama_nilai, dia sering terkendala disana..

  55. dewi says:

    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

  56. riza putri yani says:

    gimana cara nampilin nya di browser mas??

  57. riza putri yani says:

    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…

      • riza putri yani says:

        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..

      • riza putri yani says:

        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..

      • riza putri yani says:

        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..

  58. helmi says:

    categories yg x axis knp cmn muncul angka 0-9 gan?
    bukan data dari databasenya.

  59. harus nya keluar sih gan… coba di print_r nilainya, apa udah benar keluarg tanggal nya mas..

  60. 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..

  61. dewi says:

    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

  62. gan mau tanya kalau bikin char berdasarkan tanggal gi mana yah

  63. amel says:

    gan mau tanya, kalau pada grafiknya ingin dibuat dalam pecahan rupiah, gmn ya caranya..terima kasih

  64. Cepi Bian says:

    gan kok ga muncul ya chartnya

  65. Cepi Bian says:

    wah agan ini bener bener bikin saya berfikir haha, sudah solved gan🙂

  66. yofijuliani says:

    gan ko ga nampil sekali chart nya ,saya ngikutin step dari atas

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: