sdInteractiveChartPlugin : Plugin Grafik di Symfony


Chart Interactive
sdInteractiveChartPlugin, Awesome!!

Ini dia Plugin yang cukup membantu pekerjaan kita dalam membuat grafik Symfony. sdInteractiveChartPlugin relatif mudah dalam instalasi dan penggunaan. Data yang akan disajikan dalam format Array, sehingga mudah untuk memanipulasinya. Untuk keterangan lengkap dan contoh2 nya dapat dilihat di dokumentasi plugin symfony atau lansung di situs resmi sdInteractiveChartPlugin. Silahkan dibaca dengan cermat, dan perhatikan pola penggunaan source nya. Tidak rumit kok.

Cara Install?

Untuk meng-install plugin ini sangat mudah, Anda cukup mengikuti langkah2 yang ada di dokumentasi Plugin Symfony. Bisa menggunakan cara online atau offline, tapi tetap disarankan menggunakan command symfony.

Selain itu penggunaan plugin ini juga memerlukan source JQuery yang harus anda download sendiri di jquery.com. Anda bisa mendownload minimal versi 1.4 sampai versi terbaru. Misalnya kita menggunakan versi terbaru yaitu jquery-1.7.1.min.js. Tahap selanjutnya setelah mendownload source jquery tersebut, maka copy source itu ke direktori web/js yang ada di symfony kita. Jangan lupa untuk mendaftarkan source ini ke settingan file view.yml yang ada di config level application, tambahkan pada bagian javascript.

javascripts:    [jquery-1.7.2.min.js]

Oks, tahap instalasi selesai, jangan lupa lakukan clear:cache (cc) untuk memastikan perubahan settingan.

Bagaimana membuat Chart/Grafik?

Khusus untuk plugin ini, si pembuat nya telah menyediakan banyak sample di website nya. Silahkan Anda baca dan langsung bisa digunakan. Coba pilih salah satu, copy-paste ke template action Anda. Misal saya menggunakan contoh Grafik Pie,

<?php use_helper('sdInteractiveChart'); ?>

<?php
    $chart = InteractiveChart::newPieChart();
    $chart->setWidthAndHeight('600', '450');
    $chart->setDataColors(array(
      '#4FB0FF','#F43350','#13F444','#F4AD13','#08DDDD','#F927E4'));
    $chart->setOption('title', 'Visits By Browser');
    $chart->inlineGraph(array(
     'Downloads' => array(1831,1038,322,247,106,29)),
      array('Firefox', 'Chrome', 'IE','Safari','Opera','Mozilla'),
      'chart_div');
    $chart->render();
?>

<div id="chart_div"></div>

Dan silahkan lihat hasil nya! manarik kan… 🙂

Silahkan diperhatikan source diatas. Selalu diawali dengan deklarasi Helper. Kita bisa melihat ada Parameter untuk title dari Chart, ada property warna dari tiap data dalam bentuk Array, ada nilai dari data yang berbentu array juga, dan nama data yang dalam bentuk array juga (firefox, chrome, dsb). Kemudian Chart itu akan dimunculkan di dalam element (div) “chart_div”. Kita juga bisa mengatur ukuran (setWidthAndHeight) dari Chart ini. Mudah kan…

Untuk modifikasi selanjutnya, Anda bisa mengganti data nilai dan nama data, dengan mengambil nya dari database yang telah ada. Misalnya untuk membuat grafik laporan penjualan. Jangan lupa setelah melakukan Query dengan Doctrine, ubah result query ke dalam bentuk array yang sederhana sesuai format yang diinginkan diatas.

Selamat Mencoba! 😀

 


2 responses to “sdInteractiveChartPlugin : Plugin Grafik di Symfony”

  1. maaf pak saya sudah mencoba sesuai petunjuk di atas… teteapi kenapa tidak muncul y pak chart nya…

    terimakasih

Leave a Reply

Your email address will not be published. Required fields are marked *