[Yii Framework] Membuat Chart dengan Highchart

Sebelumnya saya pernah memaparkan step-step menampilkan chart dengan menggunakan extension Yii Openflashchart. Kali ini saya akan memaparkan step-step menampilkan chart dengan menggunakan extension highchart yang menurut saya pribadi lebih bagus dari openflashchart.

Kenapa saya katakan lebih bagus?

  • Dari sisi coding, openflashchart jauh lebih mudah, tapi saya cukup kesulitan untuk membuat chart dengan tampilan yang spesifik.
  • Ukuran extension highchart yang lebih ringan, hehe..
  • Highchart punya fitur print dan save chart ke dalam image.
  • Lagi-lagi pendapat saya pribadi, tampilan highchart lebih bagus.
Btw, saya nggak bermaksud menjelek-jelekan openflashchart ya,.. itu hanya pendapat pribadi😀..
Tapi yang harus diperhatikan bahwa highchart adalah library BERBAYAR untuk sebuah project komersil. Tapi GRATIS untuk project non komersil http://www.highcharts.com/license.
Okeh, langsung saja ke step cara penggunaannya. Pertama download lah extension highchart disini. Jika sudah, extract dan pindahkan ke dalam folder project Yii anda,tepatnya di protected/extensions. Berikut contoh code untuk menampilkan chart nya:
Menampilkan Pie Chart:
$this->widget('application.extensions.highcharts.HighchartsWidget', array(
   'options'=>array(
      'title' => array('text' => 'Masukkan Judulnya Disini'),
      'series' => array(
         array('type'=>'pie',
               'data' => array(array('nama1',4),array('nama2',5),array('nama3',2),)
              )
      ),
      '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),
   )
));

 

Menampilkan Bar Chart:

$this->widget('application.extensions.highcharts.HighchartsWidget', array(
   'options'=>array(
     'chart'=> array('defaultSeriesType'=>'column',),
      'title' => array('text' => 'Proporsi Jumlah Publikasi Berdasarkan Jenisnya'),
      'legend'=>array('enabled'=>false),
      'xAxis'=>array('categories'=>array('nama1','nama2','nama3'),),
      'yAxis'=> array(
            'min'=> 0,
            'title'=> array(
            'text'=>'Jumlah'
            ),
        ),
      'series' => array(
         array('data' => array(4,6,2))
      ),
      '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),
   )
));

yah, cukup panjang bukan coding nya dibanding dengan openflashchart.. Tapi lebih enak untuk melakukan modifikasi pada tampilan chart nya..

Untuk melihat demo lebih lengkap biar ga dikira beli kucing dalam karung, anda bisa lihat disini..

 

Selesai…. Selamat mencoba…

Semoga membantu…😀

7 Responses to [Yii Framework] Membuat Chart dengan Highchart

  1. Pingback: [Yii Framework] Integrasi Chart dan Database dengan Highchart « Sabitlabscode

  2. abu said says:

    terimakasih atas tutorialnya, sangat membantu

  3. Yudha says:

    Mas Sabit,

    misalnya saya mau buat line chart dari tabel “anggaran”, di tabel tersebut ada dua field yang mau saya tampilkan di chart, yaitu field “tahun” dan “dana”.

    Mohon Pencerahannya

  4. Yudha says:

    Sudah coba dengan code ini tapi datanya belum keluar, masih agak ngawang konsep arraynya

    $this->Widget(‘ext.highcharts.HighchartsWidget’, array(
    ‘options’=>array(
    ‘title’ => array(‘text’ => ‘Grafik Anggaran’),
    ‘xAxis’ => array(
    ‘categories’ => array($model->tahun)
    ),
    ‘yAxis’ => array(
    ‘title’ => array(‘text’ => ‘Dana’)
    ),
    ‘series’ => array(
    array(‘name’ => ‘Dana’, ‘data’ => array($model->dana))
    )
    )));

  5. itu $model->tahun dan $model->dana data nya seperti apa mas?

  6. Yudha says:

    tipe datanya varchar, isinya misal: tahun=2011,2012 | dana=5000,10000

  7. itu tipe data nya harus array sesuai dngan punya saya tadi mas..

    Kunjungi Juga Farifam.com untuk tutorial dan forum Yii Framework yang direspon lebih cepat dari di blog ini..

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: