Membuat Chart Menggunakan Extjs, PHP dan Mysql

Kali ini saya akan membuat sedikit contoh untuk membuat Chart menggunakan Extjs dan Mysql sebagai sumber datanya. Chart/Grafik biasanya digunakan untuk menampilkan data-data dalam bentuk gambar, Chart bertujuan untuk mempermudah orang untuk memahami maksud dari data-data yang ditampilkan, karena orang awam cenderung lebih senang melihat gambar dalam bentuk grafik daripada melihat data-data dalam tabel. Dalam Chart standart (batang) ada dua garis/sumbu. yaitu garis X dan garis Y. Garis X atau garis horizontal adalah garis yang menampilkan data dalam satuan periode tertentu, misal bulan, tahun, jam dan lain-lain. Garis Y atau garis vertikal adalah garis yang menampilkan jumlah data dalam satu periode garis X. misal bulan januari terdapat 1000 kali penjualan dan seterusnya.
So gampangnya kalau kita mengumpamakan garis X dan Y dalam tabel adalah X sebagai Kolom dan Y sebagai Baris.

Contoh Tabel Total Penjualan Perbulan mulai Januari sampai April.

Januari	Februari	Maret	April
1400	2000	4000	8000

Permasalahannya data yang disimpan dalam Tabel Mysql bentuk umumnya adalah 2 baris dalam tabel diatas semua dianggap data. karena tidak mungkin nama bulan dijadikan sebuah kolom (karena terlalu banyak) dengan kolom(field) nama bulan dan jumlah total. bingung? saya juga bingung kok maksudnya ngomong apa ini. hehehe. langsung aja contoh realnya dalam tabel Mysql

Bulan	Total Penjualan
Januari	1400
Februari	2000
Maret	4000
April	8000

Terus bagaimana agar data tersebut dijadikan seperti tabel yang pertama agar dapat dipresentasikan dalam bentuk grafik? jawabannya adalah tentu saja dengan perintah Sql. yup perintah SQl. anggap saja field pertama adalah bulan dan field kedua adalah total_penjualan

SELECT bulan, SUM( total_penjualan ) 
FROM penjualan
GROUP BY bulan

Perintah Sql diatas adalah untuk mengelompokkan data bulan dan menjumlah total total_penjualan berdasarkan bulan yang sama. kenapa harus di Sum? ya dikarenakan mungkin ada dua data dengan bulan yang sama misal saja Bulan Januari ada dua data dan seterusnya. tetapi kalau kita menggunakan perintah Sql diatas maka data akan diurutkan berdasarkan nama bulan sesuai abjad. apa maksudnya? ya benar bulan april akan menjadi baris kesatu dan kemudian abjad bulan berikutnya. jadi bagaimana agar nama bulan dimulai bulan januari? ganti saja nama bulan dalam bentuk angka. Januari adalah angka 0 dan seterusnya. kenapa harus angka nol bukan satu? Karena nanti angka-angka tersebut akan dikonversi kebentuk nama bulan menggunakan fungsi Date di Extjs dan itu dimulai dari angka nol

SELECT bulan_angka, SUM( total_penjualan ) 
FROM penjualan
GROUP BY bulan_angka

Setelah anda memahami konsep dasar dalam pembuatan grafik. Saatnya kita membuat Grafiknya dengan Extjs

1. Buat tabel dengan nama penjualan di database test dengan struktur dan data sebagai berikut

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

-- phpMyAdmin SQL Dump -- version 3.2.0.1 -- http://www.phpmyadmin.net -- -- Host: localhost -- Waktu pembuatan: 03. Januari 2010 jam 17:43 -- Versi Server: 5.1.37 -- Versi PHP: 5.3.0   SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";   -- -- Database: `test` --   -- --------------------------------------------------------   -- -- Struktur dari tabel `penjualan` --   CREATE TABLE IF NOT EXISTS `penjualan` ( `bulan_angka` int(11) NOT NULL, `total_penjualan` int(11) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;   -- -- Dumping data untuk tabel `penjualan` --   INSERT INTO `penjualan` (`bulan_angka`, `total_penjualan`) VALUES (0, 1400), (2, 2000), (3, 4000), (4, 8000), (0, 30000), (1, 5000), (5, 14686);

2. Buat file chart.js, disini kita mendefinisikan chart dan data storenya

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

Ext.chart.Chart.CHART_URL = '../ext-3.1.0/resources/charts.swf';   Ext.onReady(function(){ Ext.QuickTips.init(); //mengaktifkan QuickTips var store = new Ext.data.JsonStore({ url:'chart.php', root:'data', autoLoad:true, fields: [ { name:'bulan' },{ name:'total1' } ], listeners:{ load: function(){ cstore.refreshData(); } } });   var cstore = new Ext.data.JsonStore({ fields: ['bulan', 'total1'], data: [], refreshData: function(){ var data =[]; for(i=0;i<12;i++){ total1 =0; found = store.findExact('bulan',String(i)); if (found != -1) total1 = Math.floor(store.getAt(found).data.total1); data.push({ bulan: Date.monthNames[i], total1:total1 }); } cstore.loadData(data); } });   new Ext.Panel({ width: 600, height: 400, renderTo: document.body, title: 'Grafik Batang', tbar: [ { text:'Refresh Data', handler:function(){ store.reload(); } } ], items: { xtype: 'columnchart', store: cstore, yField: 'total1', url: '../ext-3.1.0/resources/charts.swf', xField: 'bulan', xAxis: new Ext.chart.CategoryAxis({ title: 'Bulan' }), yAxis: new Ext.chart.NumericAxis({ title: 'Penjualan' }), extraStyle: { xAxis: { labelRotation: -90 } } } }); });

disini kita mendefinisikan dua buah data store. yaitu store dan cstore. Kenapa harus dua? saya juga tidak tahu karena saya coba cuma buat satu ternyata tidak bisa tampil grafiknya. hehehe. Setelah bingung ternyata baru saya sadari data yang dikirim oleh php dalam bentuk json semua tipenya adalah string!. makanya kita harus melakukan konversi ke angka untuk data total penjualan dengan menggunakan fungsi Math.floor. Dari situ kita membutuhkan sebuah wadah lagi yaitu cstore untuk menampung data kita yang baru selelah dikonversi sesuai dengan jenis datanya. Sebenarnya bisa juga anda menambahkan definisi type pada konfigurasi fields di store, tetapi untuk yang satu ini saya belum mencoba bisa tampil apa tidak chartnya Masalah yang lain adalah jika misalnya saya tidak mempunyai data pada bulan Agustus. maka grafiknya akan meloncat pada bulan berikutnya. padahal maunya saya setiap bulan ditampilkan total penjualannya meskipun tidak ada data penjualan pada bulan tersebut (dianggap nol) Tapi dengan sedikit trik kita bisa menampilkan semua bulan tersebut dengan cara
1. Lakukan Looping dari Angka Nol sampai 11 (Angka 0 adalah Januari)
2. Cari Data total di store berdasarkan angka perulangan tadi (0-11), jika ada maka ambil data totalnya dan jika tidak total =0
3. Konversi data total tadi (berbentuk string) kedalam bentuk number
4. Konversi angka bulan kedalam nama bulan menggunakan fungsi Date
5. masukkan data yang telah dikonversi ke dalam variabel sementara
6. Masukkan variabel sementara tersebut dalam cstore
Secara teknisnya anda bisa perhatikan bagian code ini

var data =[]; 
   for(i=0;i<12;i++){
    total1 =0; 
    found = store.findExact('bulan',String(i));
    if (found != -1)
     total1 = Math.floor(store.getAt(found).data.total1); 
    data.push({
     bulan: Date.monthNames[i],
     total1:total1
    }); 
   }
   cstore.loadData(data);

3. Buat file chart.php untuk mengakses data di mysql kita

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$host ="localhost"; $user ="root"; $pass = ""; $db = "test"; $table ="penjualan";   $con = @mysql_connect($host,$user,$pass) or die("tidak bisa terkoneksi ke Mysql"); mysql_select_db($db,$con) or die("tidak bisa memilih database test");   $sql = "select bulan_angka as bulan, sum(total_penjualan) as total1 from $table"; $sql .= " group by bulan_angka "; $rs = mysql_query($sql) or die(mysql_error($con)); $data = array(); while ($row = mysql_fetch_object($rs)){ $data[] = $row; }   $result = new stdClass(); $result->success= true; $result->data = $data; echo json_encode($result); ?>

4. Buat File chart.html sebagai halaman utama

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<html> <head> <title>Chart</title> <link rel="stylesheet" type="text/css" href="../ext-3.1.0/resources/css/ext-all.css"> <script type="text/javascript" src="../ext-3.1.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext-3.1.0/ext-all.js"></script> <script type="text/javascript">Ext.BLANK_IMAGE_URL = "../ext-3.1.0/resources/images/default/s.gif"</script> <script type="text/javascript" src="chart.js"> </script> <style type="text/css"> body { padding:10px; } </style> </head> <body> </body> </html>

5. Jika semua file sudah anda simpan tujukan browser kealamat chart.html (dalam hal ini punya saya di folder latihan1) => http://localhost/latihan1/chart.html
6. Maka anda akan mempunyai tampilan chart seperti ini

Source code lengkap dapat anda download disini