Pada kesempatan kali ini saya ingin berbagi cara menggunakan highchart pada Yii2, 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.

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]]
          ]
       ]
    ]);
    ?>

    1

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
          ]
       ]);

    2

(yusron junaedi)

Iklan