NF Computer

nurulfikri November 23, 2017 Artikel

Salah satu staf pengajar NF COMPUTER menulis tentang berbagi cara menggunakan highchart pada Yii2, yang di tulis di blog oprekerit.wordpress.com highchart adalah salah satu extension untuk menampilkan data secara grafis, sehingga dapat menarik ketika dilihat data tersebut. Extension yang saya gunakan kali ini adalah dari 2amigos, biasanya banyak orang yang menggunakan extension ini dari miloschuman.

Penggunaan Highchart pada Yii2 menggunakan database MySQL

Berikut ini langkah-langkah penggunaan highchart pada Yii2 :

  1. silahkan buka ini https://github.com/2amigos/yii2-highcharts-widget
  2. jalankan perintah ini pada console 
    composer require 2amigos/yii2-highcharts-widget:~1.0

    atau tambahkan pada composer

    "2amigos/yii2-highcharts-widget" : "~1.0"
  3. sebagai contoh dasar, buat file pada view, misal grafik1.php dengan code sebagai berikut: 
    <?=
\dosamigos\highcharts\HighCharts::widget([
   'clientOptions' => [
      'chart' => [
         'type' => 'bar'
      ],
      'title' => [
         'text' => 'Nama Buah'
      ],
      'xAxis' => [
         'categories' => [
            'Apel',
            'Pisang',
            'Jeruk'
         ]
      ],
      'yAxis' => [
         'title' => [
             'text' => 'Buah yang dimakan'
         ]
      ],
      'series' => [
         ['name' => 'Rohman', 'data' => [1, 6, 4]],
         ['name' => 'Rohim', 'data' => [5, 7, 3]]
      ]
   ]
]);
?>

    Penggunaan Highchart pada Yii2 menggunakan database MySQL

contoh diatas jika anda menggunakan data yang statis, lalu bagaimana cara menggunakan highchart yang datanya Anda ingin mengambil dari database. Berikut ini contoh cara penggunaannya.

  1. Pada controller tambahkan untuk mengambil data dari database. 
    {
   $data = Yii::$app->db->createCommand('select 
   nama,
   sum(jumlah) as jml
   from pelatihan 
   group by nama')->queryAll();
   return $this->render('grafik', [
   'dgrafik' => $data
   ]);
}
  2. Pada views untuk menampilkan grafik 
    <?php
 
   use dosamigos\highcharts\HighCharts;

   //use miloschuman\highcharts\Highcharts;
   /* @var $this yii\web\View */

   $this->title = 'Data Pelatihan';

   foreach($dgrafik as $values){
      $a[0]= ($values['nama']);
      $c[]= ($values['nama']);
      $b[]= array('type'=> 'column', 'name' =>$values['nama'], 'data' => array((int)$values['jml']));
   }
   echo
   Highcharts::widget([
      'clientOptions' => [
         'chart'=>[
            'type'=>'bar'
         ],
         'title' => ['text' => 'Data Pelatihan'],
         'xAxis' => [
            'categories' => ['Jumlah']
         ],
         'yAxis' => [
            'title' => ['text' => 'Jumlah Peserta']
         ],
         'series' => $b
      ]
   ]);

    Penggunaan Highchart pada Yii2 menggunakan database MySQL

sumber: OprekerIT

 

Materi training di NF COMPUTER Training Center:

 

Untuk informasi atau belajar tentang yii Framework langsung hubungi kami atau datang langsung di :

021-7874223, 7874224 atau ke 0851.0218.5441 dan 0812.9642.1595

NF COMPUTER Training Center, Jl. Lenteng Agung Raya No. 20-21, Srengseng Sawah – Jagakarsa, Jakarta Selatan