Grafik / chart dengan ChartJs di Yii

Artikel sebelumnya kita telah membuat grafik bar/barang menggunakan ChartJs. Kali ini kita akan menggunakan ChartJs dan digabungkan dengan framework PHP yang cukup terkenal. Kita akan membuat sebuah crontroller untuk mengambil data kemudian menampilkannya dalam view yang berisi tampilan untuk menampilkan grafik.

Langkah-langkah untuk membuat grafil dengan ChartJs di Yii adalah

1. Silahkan download scriptnya di http://www.chartjs.org/ .
2. Silahkan ekstrak pada suatu folder pada YII jerja anda anda, misalnya ./chartjs
3. Buat suatu controller berisi data misalnya seperti  berikut ini:
       public function actionTampilBar()
       {
           
           $databar[‘Senin’]=10;
           $databar[‘Selasa’]=30;
           $databar[‘Rabu’]=90;
           $databar[‘Kamis’]=70;
           $databar[‘Jumat’]=80;
           
           $this->render(‘tampil_bar’,array(‘databar’=>$databar));
       }
4. Kemudian untuk view tampil_bar.php nya misalnya :
   <script src=”./chartjs/Chart.js”></script>
   <canvas id=”kanvasku” height=”450″ width=”600″></canvas>
   <script>
   var labelku = new Array();
   var dataku = new Array();;
   <?php
   $i=0;
   foreach ($databar as $key=>$value)
   {
       echo “\nlabelku[$i]=’$key’; dataku[$i]=$value;”;
       $i++;
   }
   ?>

           var barData = {
               labels : labelku,
               datasets : [
                   {
                       fillColor : “rgba(220,220,220,0.5)”,
                       strokeColor : “rgba(220,220,220,1)”,
                       data : dataku
                   },
               ]
               
           }

       var barKu = new Chart(document.getElementById(“kanvasku”).getContext(“2d”)).Bar(barData);
       
   </script>

5. Jalankan Yii anda dan hasilnya dapat dilihat di http://aris.proweb.asia/yii01/index.php?r=site/tampilBar dengan tampilan akan seperti berikut ini:
   

Informasi lebih lanjut silahkan mengunjungi:
1. http://www.chartjs.org/
2. http://www.chartjs.org/docs/

Kunjungi www.proweb.co.id untuk menambah wawasan anda.