Aug 092009
 

Assalamu’alaikum wr wb

Minggu lalu saya sedang ada pekerjaan untuk membuat report dengan banyak sekali model grafik – grafik. Yang membuat agak sedikit kerepotan adalah report ini jalan di browser bukan pada program desktop, juga masalahnya bukan juga dengan java, kenapa kalo di java kan ada Ireport, nah di php kira – kira apa yang di pakai ya. Saya teringat beberapa tahun yang lalu saya pernah iseng buat report di php dengan grafik dengan memanfaatkan Flass, alias parsing ke flas dengan data xml. Tapi saya saya lupa nama programnya apa. Karena lupa ya jalan terakhir tanya sama mbah google. dengan jawabannya adalah XML/SWF Charts yang beralamatkan di http://www.maani.us ok segera explorasi dua hari saya berexplorasi dengan nih chart. dengan keputusan ya mungkin ini kurang cocok atau saya yang kurang merasa puas karena harus create xml baru bisa di baca oleh char. Lama merenung akhirnya teringat dengan ExtJs kalo ngak salah ada chart di ExtJs, ok langsung buka ExtJs dan hasilnya betul ada. ok cerita selesai sampai disini ya mulai explorasinya.

Pertama yang dibutuhkan adalah Library ExtJS yang bisa di Download di http://www.extjs.com, dan juga

CodeIgniter.
Copykan Library ExtJS ke folder di CodeIgniter misal kita buat folder sendiri

1.Langkah pertama konfigurasi database pada CodeIgniter anda.
2.Buat table pada database anda
misal :

CREATE TABLE <code>tbl_grafik</code> (
    <code>keterangan</code> varchar(50) NOT NULL,
    <code>tahun</code> int(11) NOT NULL,
    <code>bulan</code> int(11) NOT NULL,
    <code>nilai</code> float(9,3) DEFAULT '0.000',
    PRIMARY KEY (<code>keterangan</code>)
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
  Insert into tbl_grafik values('Pembelian',2009,1,200);
  Insert into tbl_grafik values('Pembelian',2009,2,245);
  Insert into tbl_grafik values('Penjualan',2009,1,150);
  Insert into tbl_grafik values('Penjualan',2009,2,300);

3.Buat Controller dengan nama printController.php

Tulis Coding Di bawah ini :

<?php
/* 
 * Desain by Sugik Puja Kusuma, S.Kom
 * email   : sugik@do-event.com
 * website : http://www.sugik.do-event.com
 * ===============================================================
 *      Semua sorce dalam program ini dibawah license [GPL]
 *      Silakan Untuk mengembangkan dan memperbanyak source ini
 *      Dengan tidak menghilangkan nama pembuat
 * ===============================================================
 */

/**
 * Description of printController
 *
 * @author mbahsomo
 */
class printController extends Controller{
    //put your code here
    function __construct() {
        parent::Controller();
    }
    function index(){
        $this->load->helper('asset');
	$this->load->view('chartView');
    }

    function array2json($arr) {
        $parts = array();
        $is_list = false;

        $keys = array_keys($arr);
        $max_length = count($arr)-1;
        if(($keys[0] == 0) and ($keys[$max_length] == $max_length)) {
            $is_list = true;
            for($i=0; $i<count($keys); $i++) { 
                if($i != $keys[$i]) { 
                    $is_list = false; 
                    break;
                }
            }
        }

        foreach($arr as $key=>$value) {
            if(is_array($value)) { 
                if($is_list) $parts[] = $this->array2json($value); 
                else $parts[] = '"' . $key . '":' . $this->array2json($value); 
            } else {
                $str = '';
                if(!$is_list) $str = '"' . $key . '":';
                if(is_numeric($value)) $str .= $value; 
                elseif($value === false) $str .= 'false'; 
                elseif($value === true) $str .= 'true';
                else $str .= '"' . addslashes($value) . '"'; 
                $parts[] = $str;
            }
        }
        $json = implode(',',$parts);

        if($is_list) return '[' . $json . ']';
        return '{' . $json . '}';
    }    
	
    function getJsOn(){
	$sql = " select concat('Bln ' ,bulan,' tahun ', tahun), " ;
	$sql.= " cast((select sum(b.nilai) from tbl_grafik as b " ;
        $sql.= " where and b.bulan=a.bulan " ;
        $sql.= " and b.tahun=a.tahun and b.keterangan='Penjualan' )as UNSIGNED)as Penjualan, " ;
	$sql.= " cast((select sum(b.nilai) from tbl_grafik as b " ;
        $sql.= " where and b.bulan=a.bulan " ;
        $sql.= " and b.tahun=a.tahun and b.keterangan='Pembelian' )as UNSIGNED)as Pembelian " ;
	$sql.= " from tbl_grafik as a";
        $query = $this->db->query($sql);
        $result = $query->result_array();
	echo $this->array2json($result);
    }
}

4.Buat View dengan nama chartView.php

<?php
/* 
 * Desain by Sugik Puja Kusuma, S.Kom
 * email   : sugik@do-event.com
 * website : http://www.sugik.do-event.com
 * ===============================================================
 *      Semua sorce dalam program ini dibawah license [GPL]
 *      Silakan Untuk mengembangkan dan memperbanyak source ini
 *      Dengan tidak menghilangkan nama pembuat
 * ===============================================================
 */
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
    <title>Main menu</title>
    <link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css" />
    <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
	<!--Theme-->
	<link rel="stylesheet" type="text/css" href="js/resources/css/xtheme-olive.css" />
    <style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
        .empty .x-panel-body {
            padding-top:20px;
            text-align:center;
            font-style:italic;
            color: gray;
            font-size:11px;
        }
    </style>    
    <script language="javascript">
        Ext.chart.Chart.CHART_URL = 'resource/charts.swf';
        Ext.onReady(function(){
            var storeGrafik = new Ext.data.JsonStore({
                url:'index.php?c=printController&m=getJsOn',
                autoLoad: true,
                root:'response',
                totalProperty:'jumlah',
                id:'bulan',
                fields: ['bulan', 'Penjualan', 'Pembelian']
            });
            
            new Ext.Panel({
                width: 600,
                height: 400,
                renderTo: 'container',
                title: 'Distribusi kunjungan kesehatan',
                items: {
                    xtype: 'linechart',
                    store: storeGrafik,
                    xField: 'bulan',
                    series: [{
                        yField: 'Penjualan',
                        displayName: 'Penjualan'
                    },{
                        yField: 'Pembelian',
                        displayName: 'Pembelian'
                    }],
                    extraStyle:
                    {
                        legend:
                        {
                            display: 'buttom',
                            padding: 5,
                            font:
                            {
                                family: 'Tahoma',
                                size: 13
                            }
                        }
                    }
                }
            });
        });
    </script>    
</head>
<body>
<div align="center">
<div id="container"/>
</div>
</body>
</html>

Pembahasan
-pada langkah ke 2 digunakan untuk membuat table pada database
-Pada langkah ke 3 kita buat sebuah Controller untuk memanggil view, di sini kenapa saya tidak langsung menggunakan json_encode langsung kenapa harus membuat sebuah function array2json, ini berguna untuk membedakan antara integer dan string, karena pada chart setelah saya coba menggunakan json_encode ternyata formatnya ada yang kurang tepat buat char tersebut yaitu pada saat nilai berlinai numeric di json tetap tertulis
Misal : ‘nilai’:’123′ padahal yang dibutuhkan adalah ‘nilai’:123
-Pada langkah ke 4 itu adalah tampilan view yang akan tampil pda browser.ok selamat mencoba dan silakan berexplorasi

Wassalamu’alaikum wr wb

Facebook Comments

  16 Responses to “Chart with CodeIgniter and ExtJS”

  1. Jiaaahh ke disekan… aku g gawe… extjs, nemu neng phpclasses heee….. extjs tas mancek kang..

  2. Walah lawong samepan iku luwih pinter kok, pasti luwih ngerti 😀

  3. kok ada model di controller kang 😀 ..
    matur suwun tutorialnya, tak cobain dulu..

  4. @mazhel ah masak sih pren.
    ok silakan di explorasi

  5. numpang lewat n tanya..
    kok ExtJs nya harus purchase ya 🙁

  6. Ada yang versi beli ada yang versi gratis

  7. John Cow has a cow…LOL

  8. Ini pake Extjs brp mas?

    Klo Ext2 bisa gag ya?

  9. Brooo, mau tanya nih, kan aq pake ext js version 3.0.0.. bisa ga kira2 library js nya aq replace dgn punyannya 3.1++ ??

    apakah bisa chart ini di gunakan pada ext js version 3.0.0??

    mohon petunjuknya ya..

    trims before 😀

  10. @ hypo:
    Bisa mas ngak masalah

  11. Maksudnya line index.php?c=printController&m=getJsOn apa mas???

    Koq data chart q g tertampil??

  12. esraldi wrote:

    Maksudnya line index.php?c=printController&m=getJsOn apa mas???
    Koq data chart q g tertampil??

    Itu adalah perintah untuk menjalakan class printController dan function getJson

  13. Maturity is a bright but not dazzling glory, a mellow sound but not greasy ears, a need for others detect facial expressions of calm, one finally stopped the prayer of the complaint to the surrounding atmosphere, a disregard Hongnao smile, a wash of extreme indifference, a not quiet thick, one is not steep height.

  14. mas koq grafiknya gak tampil, http://localhost/CodeIgniter/chartview.php, yg tampil hanya sebuah window dgn judul “Distribusi kunjungan kesehatan”, apa yg harus saya ubah/setting, trimakasih…

  15. Gan kalo untuk implementasi Ext JS 6.0.1 gimana ya? soalnya direktori js sama css nya beda. tks

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)