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


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(); ?>
Okeh, selesai.. Silahkan anda coba dan modifikasi dengan kebutuhan anda…

Selamat mencoba..
Semoga membantu…