[Contoh] Cara Mudah Membuat Notasi Data untuk Grafik JQuery JQPlot dengan PHP

Salah satu kelemahan JQPlot dibanding HighChart adalah pembuatan notasi data grafik untuk diplot ke dalam halaman web. Seperti beberapa artikel lalu , HighChart memiliki kemudahan penulisan notasi, karena berjajar notasi sejenis, sesuai dengan arraynya. Berbeda dengan JQPlot. Penulisan notasi JQPlot berupa notasi bersama antara array x dan array y. Contoh: Misal kita memiliki dua array yang akan dijadikan grafik.

 

$r1 = array('1','3','5','7','9','11');

$r2 = array('1','2','1','2','1','2');

 

Pembuatan grafik dengan Highchart akan menggunakan cara seperti ini :

 

.
.
.
xAxis : {

categories : ['1','3','5','7','9','11']

},
.
.
.

series : ['1','2','1','2','1','2'];
.
.
.

 

 

Sedangkan JQPlot memiliki notasi seperti berikut :

$.jqplot('spacegrafik',  [[[1,1],[3,2],[5,1],[7,2],[9,1],[11,2]]]);

Padahal biasanya PHP akan menghasilkan data berasal dari array yang didapat dari MySQL, PostgreSQL, database lainnya, atau memang berupa data array. Untuk itu biasanya pembuatan grafik JQPlot jelas memakan satu langkah lebih banyak daripada penggunaan Highchart. Namun dengan beberapa kelebihan JQPlot, ditambah dengan kesukaan masing-masing developer, maka tidak salah mencoba menyiasati pembuatan notasi grafik ini. Pembuatan notasi Grafik JQPlot akan coba kita jelaskan pada code berikut ini :


 




 

Nah kira kira hasilnya adalah seperti demikian



Nah, selamat mencoba, semoga bermanfaat.

[Contoh] Cara Mengexport Data SQL ke File Excel 2007 ( xlsx ) dari MySQL dengan PHP

Berdasarkan komentar saudara Dahlan di https://blogit.bimosaurus.com/2012/04/09/contoh-3-membuat-laporan-export-data-dari-mysql-ke-excel-terencoding-dengan-php-no-pear, maka saya coba paparkan tentang melakukan export konversi data dari SQL ke Excel 2007 dengan menggunakan PHP. Sehingga data yang berasal dari SQL dapat di download ke dalam bentuk Excel 2007

STRUKTUR XLSX / Excel 2007

Jika kita periksa sebuah file excel 2007 adalah sebuah file berformat kompresi zip. Jika anda rename, mengganti extensi file xlsx dengan zip, dan anda extract ke suatu tempat, maka file tersebut akan berisi beberapa direktori dan file berformat xml. Ya, Microsoft Office 2007 memang merancang format Office menjadi format yang mudah dikembangkan terutama untuk mendukung DotNet dan networking.

Lantas, apakah kita akan gunakan koding PHP bertele-tele untuk membuat aplikasi untuk memodifikasi XML tersebut? Untuk hal itu, kita tidak perlu koding sendiri, hanya perlu belajar dan menggunakan sebuah fungsi dari http://www.phpexcel.net/ atau http://phpexcel.codeplex.com/. Silakan download paket aplikasi fungsi PHP-Excel tersebut, dan extract dalam direktori DocumentRoot yang anda gunakan. Kira-kira struktur data akan berformat seperti demikian :

1.7.6/changelog.txt

1.7.6/Classes/

1.7.6/Documentation/

1.7.6/install.txt

1.7.6/license.txt

1.7.6/Tests/

Kita hanya membutuhkan sesuatu di dalam directori Classes. Untuk kasus yang saya pakai, saya melakukan pengkopian direktori Classes ke aplikasi web yang saya butuhkan menjadi

{direktori_aplikasi}libs/phpexcel/

 

BAGAIMANA MENGEKSPOR DATA KE DALAM XLSX?

Berikut satu script aplikasi PHP untuk melakukan Export ke dalam XLSX

 


getProperties()->setCreator("Bimosaurus");
$excel->getProperties()->setLastModifiedBy("Bimosaurus");
$excel->getProperties()->setTitle("Coba");
$excel->removeSheetByIndex(0);


$sheet = $excel->createSheet();
$sheet->setTitle('sheet_1');
 $sheet->setCellValue("A1", "Kolom Satu");
 $sheet->setCellValue("B1", "Kolom Dua");
 $sheet->setCellValue("C1", "Kolom Tiga");
 $sheet->setCellValue("D1", "Kolom Empat");
 $sheet->setCellValue("E1", "Kolom Lima");
 $sheet->setCellValue("F1", "Kolom Enam");

 $sheet->setCellValue("A2", "Isi Satu");
 $sheet->setCellValue("B2", "Isi Dua");  
 $sheet->setCellValue("C2", "Isi Tiga");
 $sheet->setCellValue("D2", "Isi Empat"); 
 $sheet->setCellValue("E2", "Isi Lima"); 
 $sheet->setCellValue("F2", "Isi Enam");
 
 $writer = new PHPExcel_Writer_Excel2007($excel);
 $writer->save("excel.xlsx");
 
 
?>
Your File in : Here

Cobalah anda lakukan dalam percobaan anda. Nah, sekarang bagaimana apabila kita akan melakukan pengambilan data dari MySQL Server dengan PHP dan direstore ke dalam XLSX?

Berikut satu contoh programnya di bawah ini. Saya masih menggunakan table lama saya yaitu tabel pegawai dari database kepegawaian.

nip nama honor status_ambil
10001 Susanto Rp. 1000000 Belum
10002 Susanti Rp. 1000000 Sudah
10003 Marwoto Rp. 2000000 Sudah
10004 Gunadi Rp. 1500000 Belum
10005 Nur Eko Rp. 1000000 Belum

getProperties()->setCreator("Bimosaurus");
$excel->getProperties()->setLastModifiedBy("Bimosaurus");
$excel->getProperties()->setTitle("Data Pegawai PT Anu");
$excel->removeSheetByIndex(0);


$sheet = $excel->createSheet();
$sheet->setTitle('sheet_1');
 $sheet->setCellValue("A1", "NIP");
 $sheet->setCellValue("B1", "Nama");
 $sheet->setCellValue("C1", "Honor");
 $sheet->setCellValue("D1", "Status Ambil");


$sql = "SELECT * FROM `pegawai`";
$q = mysql_query( $sql );
$i = 2; //Dimulai dengan baris ke dua, baris pertama digunakan oleh titel kolom
while( $r = mysql_fetch_array( $q ) ){
   $sheet->setCellValue( "A" . $i, $r['nip'] );
   $sheet->setCellValue( "B" . $i, $r['nama'] );
   $sheet->setCellValue( "C" . $i, $r['honor'] );
   $sheet->setCellValue( "D" . $i, $r['status_ambil'] );
   $i++;
}


 $writer = new PHPExcel_Writer_Excel2007($excel);
 $writer->save("$datetime.xlsx");
 
 
?>
Your File in : Here

Nah bandingkan juga penulisan format export ke kolom excel, dengan artikel lalu https://blogit.bimosaurus.com/2012/04/09/contoh-3-membuat-laporan-export-data-dari-mysql-ke-excel-terencoding-dengan-php-no-pear. Pastikan juga bahwa direktori tujuan Export file tersebut, writeable untuk Webserver anda.

Selamat mencoba, silakan melakukan respon jika perlu direspon. Saya siapkan juga satu artikel untuk pembacaan file excel 2007 untuk diupload ke dalam webserver dan akan terkonversi menjadi SQL database. Segera.

[Contoh] Cara Membuat Grafik Multi Line / Banyak Garis dengan PHP, MySQL, dan JQuery HighChart

Berikut dalam posting ini akan dipaparkan contoh pembuatan grafik Multiline dengan Highchart. Saya juga menyiapkan dua artikel untuk keperluan Grafik dengan JQPLot dan JPGraph untuk kasus yang sama. Dalam contoh ini digunakan contoh dengan dua tabel, dimana satu tabel adalah tabel negara, dan tabel lainnya adalah tabel angka_kelahiran. Kira-kira SQL nya adalah seperti berikut:

Tabel negara

CREATE TABLE `negara` (
  `id` int(23) NOT NULL AUTO_INCREMENT,
  `negara` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

/*Data for the table `negara` */

insert  into `negara`(`id`,`negara`) values (1,'Indonesia'),(2,'Singapura'),(3,'Malaysia'),(4,'Jepang');

 

Tabel angka_kelahiran

CREATE TABLE `angka_kelahiran` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `negaraId` int(3) DEFAULT NULL,
  `bulan` varchar(10) DEFAULT NULL,
  `kelahiran` int(23) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=49 DEFAULT CHARSET=latin1;

/*Data for the table `angka_kelahiran` */

insert  into `angka_kelahiran`(`id`,`negaraId`,`bulan`,`kelahiran`) values (1,1,'Jan',100),(2,1,'Feb',120),(3,1,'Mar',130),(4,1,'Apr',110),(5,1,'Mei',90),(6,1,'Jun',100),(7,1,'Jul',95),(8,1,'Agt',115),(9,1,'Sep',98),(10,1,'Okt',120),(11,1,'Nov',110),(12,1,'Des',151),(13,2,'Jan',110),(14,2,'Feb',100),(15,2,'Mar',111),(16,2,'Apr',80),(17,2,'Mei',90),(18,2,'Jun',87),(19,2,'Jul',89),(20,2,'Agt',87),(21,2,'Sep',77),(22,2,'Okt',78),(23,2,'Nov',89),(24,2,'Des',90),(25,3,'Jan',67),(26,3,'Feb',65),(27,3,'Mar',68),(28,3,'Apr',98),(29,3,'Mei',76),(30,3,'Jun',89),(31,3,'Jul',66),(32,3,'Agt',54),(33,3,'Sep',43),(34,3,'Okt',78),(35,3,'Nov',98),(36,3,'Des',123),(37,4,'Jan',65),(38,4,'Feb',65),(39,4,'Mar',65),(40,4,'Apr',65),(41,4,'Mei',65),(42,4,'Jun',69),(43,4,'Jul',98),(44,4,'Agt',90),(45,4,'Sep',87),(46,4,'Okt',77),(47,4,'Nov',89),(48,4,'Des',100);

Kemudian secara visual, tabelnya adalah seperti ini :

Tabel Negara:

id negara
1 Indonesia
2 Singapura
3 Malaysia
4 Jepang

Tabel Angka Kelahiran (sebagian)

id negaraId bulan kelahiran
1 1 Jan 100
2 1 Feb 120
3 1 Mar 130
4 1 Apr 110

 

Jika server yang anda gunakan terhubung dengan koneksi internet, saya sarankan untuk mengambil include script jquery dan highcart secara online saja, hal ini akan menghemat space disk anda, terutama jika anda menggunakan hosting. Disamping itu akan lebih menghemat bandwidth quota. Namun jika server web yang anda offline, maka asumsi saya adalah menggunakan hardisk, sehingga tidak begitu memberatkan space dan quota, maka gunakan saja file jquery secara offline.

Untuk server online, maka gunakan script ini pada include script anda:


.
.
.


 

 

Untuk server offline, maka gunakan ini, atau sesuaikan dengan lokasi yang anda gunakan


.
.
.


 

Untuk kasus pembuatan grafik angka kelahiran, saya melakukan query untuk mendapatkan array kota terlebih dahulu. Script lengkap pembuatan grafiknya adalah sebagai berikut:





	
		
		Angka Kelahiran Tiap Negara

		
		
	

	



Nah kira-kira hasil dari perbuatan script anda adalah seperti berikut :

Nah, selamat mencoba, semoga berguna, dan sampaikan terimakasih pada developer Highcart yang telah membuat tools yang mempermudah bagi para developer ini. 🙂

Anda perlu bantuan membuat tabel, dapat berkonsultasi dengan team kami secara gratis. Selama dapat dibantu diselesaikan, akan dibantu..

[Contoh] Cara Membuat Grafik Dasar Web dengan JQuery JQPlot

Selain dengan mode HTML biasa dan JPGraph, ada cara yang sekarang lebih populer dalam pengembangan grafik, yaitu dengan memanfaatkan turunan JQuery. Dengan JQuery dan Ajax, maka kemampuan browser dapat dimaksimalkan untuk keperluan pembuatan grafik yang lebih dinamis dan siap untuk detail tidak sekedar image. Memang pada akhirnya antara Grafik HTML, Grafik JPGraph dan Grafik JQuery, tetap memiliki kelebihan dan kekurangan sendiri-sendiri.

Pembuatan grafik dengan JQuery banyak sekali macam yang ditawarkan dari berbagai free-vendor berbasis opensource. Beberapa diantaranya adalah JQPlot, HighChart, AjaxGraph dan lain sebagainya. Di posting kali ini akan dicoba membuat grafik dengan memanfaatkan JQuery JQPlot. JQPlot dapat diambil source di situs aslinya yaitu http://www.jqplot.com/. Bisa di dowload dan di extract dalam folder httpdocs anda. Setelah itu dapat anda pelajari, hanya saja beberapa source jquery mengambil source dari link external, namun tidak masalah, dapat diambil secara manual. Example dan documentasi dapat juga diambil di http://www.jqplot.com/tests/ dan http://www.jqplot.com/docs/. JQPlot menyediakan banyak macam grafik, antara line, bar, pie, blok, dan lain sebagainya, dengan skala yang bervariasi dan dapat diperbesar (zoom) dengan melakukan select block pada grafik tersebut.

Berikut beberapa langkah cara proses pengambilan data dan pembentukan grafik yang dapat dillakukan dengan menggunakan JQuery JQPlot.

  1. Penyisipan kode dan style
  2. Pendefinisian elemen yang akan digunakan sebagai area grafik
  3. Plot Grafik

Penyisipan kode standard antara lain dilakukan dengan cara menambahkan baris berikut:





PERHATIAN:
Lakukan penulisan script dan sesuaikan dengan path yang ada pada script anda. Pada contoh, saya menggunakan path https://blogit.bimosaurus.com/demo/

Penentuan area dapat dilakukan dengan contoh di bawah ini. Perhatikan, anda berhak membuat ID div sendiri. ID ini yang nanti akan dipanggil dalam script PLOT :

Lantas lakukan plottingnya:

Dengan angka depan terletak di sumbu x dan angka belakang terletak di sumbu y. Perlu diperhatikan bahwa untuk kondisi standard, kita hanya bisa menggunakan jenis grafik dengan sumbu x adalah angka, dan sumbu y juga angka.

Kira-kira, kode utuh akan seperti ini:

Kemudian grafiknya akan seperti ini:



Nah, selamat mencoba lebih dahulu, posting selanjutnya akan berkisar pembuatan grafik dengan JQPlot lebih lanjut, tentu digabung dengan data dari MySQL dan pengambilan data oleh PHP

[Contoh] Cara Membuat Grafik dengan JPGraph dengan PHP dan MySQL

Pada posting lalu https://blogit.bimosaurus.com/2012/04/19/contoh-1-dasar-membuat-grafik-dengan-jpgraph-di-php telah coba kita pelajari bagaimana membuat Grafik dengan JPGraph, dengan bahasa PHP dan mengambil data dari MySQL. Diharapkan pada posting tersebut diketahui dasar-dasar untuk membuat grafik sebelum lebih rumit mengambil database. Lantas, bagaimana jika grafik itu harus diambil dari database MySQL? Kuncinya adalah, data yang diambil dari database diambil ke dalam array untuk value sumbu x dan sumbu y. Secara dasar, sama dengan posting lalu, hanya bagaimana mengambil value MySQL dijadikan data x dan y.
Jika kemarin kita punya program macam ini

 

SetScale("textlin");



$graph->title->Set('Jumlah Orang Edan Karesidenan Kedu');


$graph->yaxis->HideZeroLabel();
$graph->yaxis->HideLine(false);


$graph->xgrid->Show();
$graph->xgrid->SetLineStyle("solid");
$graph->xaxis->SetTickLabels($data_x);
$graph->xgrid->SetColor('#E3E3E3');




$garis = new LinePlot($data_y);
$graph->Add($garis);
$garis->SetColor("#6495ED");
$garis->SetLegend('Tingkat Edan');


$graph->Stroke();


?>

Maka kita coba untuk membuat grafik dengan mengambil database dari database server MySQL. Data yang ita gunakan adalah data pertama yang dulu pernah kita buat. Maaf saya hanya mengambil lima (5) data pertama karena ternyata berisi data percobaan dari teman-teman yang mencoba mengisi database dengan excel

Database yang saya pakai adalah database kepegawaian. Tabelnya adalah tabel pegawai.

nip nama honor status_ambil
10001 Susanto Rp. 1000000 Belum
10002 Susanti Rp. 1000000 Sudah
10003 Marwoto Rp. 2000000 Sudah
10004 Gunadi Rp. 1500000 Belum
10005 Nur Eko Rp. 1000000 Belum

Misal saya akan membuat sebuah grafik dengan sumbu X adalah berisi nama orang dan sumbu Y menunjukkan banyaknya Rupiah yang diterima, maka berikut langkah yang dapat diambil:

  1. Tampilkan hasil Query untuk kelima record tersebut
  2. Ubah terlebih dahulu value yang terdapat dalam kolom honor menjadi numerik
  3. Tentukan data_x adalah nama orang dan data_y adalah besarnya honor, dengan melakukan kombinasi hasil query, explode dan array

Kira kira menjadi seperti demikian :


SetScale("textlin");



$graph->title->Set('Grafik jumlah honor');


$graph->yaxis->HideZeroLabel();
$graph->yaxis->HideLine(false);


$graph->xgrid->Show();
$graph->xgrid->SetLineStyle("solid");
$graph->xaxis->SetTickLabels($data_x);
$graph->xgrid->SetColor('#E3E3E3');




$garis = new LinePlot($data_y);
$graph->Add($garis);
$garis->SetColor("#6495ED");
$garis->SetLegend('Rupiah');


$graph->Stroke();



?>

Grafik yang dihasilkan seperti ini kira kira

Selamat Mencoba, semoga sukses.. Silakan bertanya jika terdapat kesalahan disini atau perlu ditanyakan, siap saya jawab. Gratis kok!

[First Aid] JPGraph Error 25128: The function imageantialias() is not available in your PHP installation

Pesan ini sering muncul ketika kita koding grafik: JPGraph Error 25128: The function imageantialias() is not available in your PHP installation. Use the GD version that comes with PHP and not the standalone version

Pesan ini cukup jelas. Yaitu fungsi imageantialias() yang terdapat pada JPGraph tidak berfungsi dengan benar. Dalam pesan error juga telah dijelaskan : Silakan gunakan GD Version bawaan PHP dan bukan berbeda versi dengan bawaan PHP.
Langkah paling bagus ya, kita remove GD dan PHP, lantas kita install ulang secara bersama. Hal ini akan sangat enak jika kita menggunakan Linux jenis Debian/Ubuntu/Mint atau Fedora/RedHat/Centos. Karena mereka telah mendukung dependencies installation dengan apt-get dan yum

PERTOLONGAN PERTAMA / FIRST AID

Ada cara cepat untuk menyelesaikan error ini yaitu dengan melakukan editing file gd_image.inc.php. Lho apakah masalah hilang? Tidak, sebenarnya ketika dipandang versi gd dan php kurang pas, maka jika dipandang beresiko error, akan ditutup dengan pesan error tersebut oleh JPGraph. Kita akan bongkar hal itu. Buka file gd_image.inc.php yang terdapat dalam direktori src dalam jpgraph anda. Lantas editlah bagian ini:


function SetAntiAliasing($aFlg=true) {
        $this->use_anti_aliasing = $aFlg;
        if( function_exists('imageantialias') ) {
            imageantialias($this->img,$aFlg);
        }
        else {
            JpGraphError::RaiseL(25128);//('The function imageantialias() is not available in your PHP installation. Use the GD version that comes with PHP and not the standalone version.')
        }
    }


Tutuplah dengan tanda // pada baris ke 110, yaitu bagian :

//JpGraphError::RaiseL(25128);//('The function imageantialias() is not available in your PHP installation. Use the GD version that comes with PHP and not the standalone version.')

Sehingga menjadi seperti berikut


function SetAntiAliasing($aFlg=true) {
        $this->use_anti_aliasing = $aFlg;
        if( function_exists('imageantialias') ) {
            imageantialias($this->img,$aFlg);
        }
        else {
//            JpGraphError::RaiseL(25128);//('The function imageantialias() is not available in your PHP installation. Use the GD version that comes with PHP and not the standalone version.')
        }
    }


Bukalah Grafik anda… Sim Salabim

[Contoh 1] Dasar Membuat Grafik dengan JPGraph di PHP

Salah satu fitur penting dalam pembuatan sistem informasi berbasis web adalah pembuatan grafik. Pembuatan grafik terdapat beberapa cara antara lain dengan standard HTML, JavaScript/JQuery, dan yang paling banyak digunakan adalah dengan menggunakan fitur pembuat image JPGraph. Dalam kasus diambil di sini, akan diambil pembuatan grafik dengan JPGraph. JPGraph sendiri adalah merupakan tools berbasis PHP untuk membuat image/gambar dengan menggunakan kode-kode PHP. Tidak hanya grafik berbasis gambar, namun kita juga bisa memanfaatkan untuk keperluan Human Code Verification/CAPTCHA, pembuatan konten berbasis Image dan juga watermark untuk keperluan gambar anda.

Untuk JPGraph sendiri, dapat anda download di http://jpgraph.net/. Jika tidak salah, saat ini telah mencapai versi jpgraph-3.5.0b1. Penggunaannya adalah dengan cara melakukan include jpgraph.php yang ada pada direktori src, dan melakukan include jenis grafik yang akan digunakan. Misal akan digunakan tipe line ya tentu akan diload jpgraph_line.php. Selanjutnya, data yang akan dibuat grafik dikemas dalam variabel array, dengan memanggil fungsi-fungsi tertentu yang sudah ditentukan oleh JPGraph. Tentang fungsi-fungsi tersebut dapat dilihat dalam directori docs. Kira-kira susunan direktorinya adalah seperti berikut

 

jpgraph-3.5.0b1/

   src/

      Example

      fonts

      lang

      theme

      barcode

   docs/

 

Kali ini saya akan mencoba membuat satu contoh pembuatan grafik yang outputnya adalah image/gambar yang menampilkan grafik berformat garis/line. Untuk itu saya menggunakan include jpgraph.php dan jpgraph_line.php

Kira-kira seperti berikut:


SetScale("textlin"); //menentukan jenis grafik



$graph->title->Set('Jumlah Orang Edan Karesidenan Kedu'); //membuat judul atas


$graph->yaxis->HideZeroLabel(); //menyembunyikan nilai 0
$graph->yaxis->HideLine(false); //menampakkan garis

$graph->xgrid->Show(); //perintah tampilkan grid sumbu x
$graph->xgrid->SetLineStyle("solid"); // jenis garis solid, atau dot atau yang lain
$graph->xaxis->SetTickLabels($data_x); //data diambil dari
$graph->xgrid->SetColor('#E3E3E3'); //warna




$garis = new LinePlot($data_y); //mulai mengeplot
$graph->Add($garis); 
$garis->SetColor("#6495ED");
$garis->SetLegend('Tingkat Edan');


$graph->Stroke(); 


?>

 

Kira-kira bentuk akhirnya adalah seperti berikut url ini : https://blogit.bimosaurus.com/demo/grafik_garis.php

Kira kira akan berbentuk seperti ini :

Semoga bermanfaat. Posting selanjutnya adalah menggunakan Theme, mengenali Error dan melibatkan MySQL untuk mengambil data.