[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 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!

[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.

[Contoh] Menyiasati Paging dengan JQuery JCarousel

Paging adalah cara memisahkan banyaknya data dalam halaman-halaman tertentu dengan satu halaman berisi sejumlah data. Paging sering menjadi masalah tersendiri bagi para developer pemula. Dalam beberapa posting lalu, kita telah mempelajari Simple Advanced Paging PHP yaitu di posting https://blogit.bimosaurus.com/2011/09/13/simple-advanced-paging-php/. Namun saya mendapatkan request beberapa hal tentang bagaimana agar paging dapat disederhanakan lagi. Maka terbayanglah sebuah simple paging dengan menyiasati menggunakan JQuery JCarousel. Paging ini dapat menggunakan teknik PHP murni, dapat juga diakali dengan menggunakan Jquery Jcarousel.

JCarousel memiliki fungsi untuk membuat tampilan bergeser muncul satu demi satu seperti pada contoh disini: https://blogit.bimosaurus.com/demo/paging_jq.php.

Mudah saja, dengan demikian kita bisa mengkreasikan paging dengan JCarousel ini. Kita akan memilih JCarousel model Lite yang ringan, dengan JQuery Minimal juga. Silakan dapat di download di http://www.gmarwaha.com/jquery/jcarousellite/#download, dan http://docs.jquery.com/Downloading_jQuery.

Saya memilih : jquery-1.7.1.min.js dan jcarousellite_0.4.0.min.js. Selanjutnya, anda dapat membuat script tampilan paging seperti berikut ini:

 

Nip Nama Honor Status Ambil





Or Go To :

Saya masih memilih setia menggunakan database lama saya yang saya gunakan untuk contoh-contoh lalu, database kepegawaian. Dengan tabel pegawai seperti berikut:

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

Nah, selamat mencoba, semoga sukses dan semoga bermanfaat

[Contoh] Input Database MySQL dari File Berformat Excel dengan Excel Reader (no-pear)

Jika pada tiga posting yang lalu ( ini dan ini ) telah dipost tentang tutorial penggunaan PHP untuk keperluan export data ke file berformat Excel, maka kini sebaliknya. Kita akan coba lakukan import data dari Excel ke dalam tabel MySQL. Cara lama yang biasa digunakan untuk melakukan import data dari excel ke dalam MySQL adalah dengan menyimpan file excel tersebut sebagai file berformat CSV ( Comma Separated Value ). Namun diyakini bahwa format CSV ini tidak akan valid karena batas antar sel dan batas antar baris masih menggunakan karakter huruf alfabet. Semisal, ditentukan sebuah cara bahwa batas sel adalah dengan tanda koma, maka jika dalam konten sel terdapat koma, maka akan terjadi kesalahan dalam pembacaan jumlah sel.

Cara paling baik yaitu membiarkan saja dalam bentuk XLS file yang dibuka encoding datanya, dan kemudian direstore dalam bentuk text yang bisa dibaca dengan normal oleh PHP. Untuk membuka encoding data ini telah disediakan sebuah tools yang terkenal yang dinamakan Excel Reader. Biasanya filenya bernama excel_reader2.php. Disini dapat di download di : https://blogit.bimosaurus.com/demo/excel_reader2.php.zip. Silakan di download dan letakkan dalam direktori libs anda. Di dalam excel reader ini telah terdapat class dan fungsi-fungsi untuk melakukan pembacaan file excel sehingga data yang kita upload akan langsung diparsing konversi ke bentuk excel. Kita selaku developer tinggal menggunakan. Bagaimana contoh penggunaan dan penjelasannya?

Langkah pertama adalah biasanya kita perlu bantuan sebuah form yang berfungsi sebagai upload data. Misal kita buat sebuah file bernama : import.php, kira-kira berisi :

 



NipNamaHonorStatus Ambil



MasterFile Disini

Selanjutnya,dibuat juga file tujuan uploadnya yang pada form di atas diarahkan ke file : import-do.php. File tersebut akan berisi : menangkap file,dan memparsing data yang ada di dalamnya dengan tools excel_reader2.php, dan melakukan restore data dalam database MySQL.

Saya masih menggunakan tabel yang telah digunakan dalam posting sebelumnya yaitu 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

Selanjutnya saya mempersiapkan sebuah master file excel seperti berikut ini : https://blogit.bimosaurus.com/demo/master_excel.xls. Master file ini berfungsi untuk panduan user penginput data dalam melakukan inputing data. Sedangkan file import-do.php berisi demikian :

rowcount($sheet_index=0);
 
$i = 2; // dimulai dari ke dua karena baris pertama berisi title
while( $i<=$jumlah ){
 
   //$cell->val( baris,kolom )
 
   $nip  = $cell->val( $i,1 );
   $nama = $cell->val( $i,2 );
   $honor= $cell->val( $i,3 );
   $status_ambil = $cell->val( $i,4 );
 
$sql ="INSERT INTO `pegawai` (`nip`,`nama`,`honor`,`status_ambil`) VALUES ('$nip','$nama','$honor','$status_ambil')";
mysql_query( $sql );
   $i++;
}
 
}
header("Location:https://blogit.bimosaurus.com/demo/import.php");
?>

Penjelasannya adalah sebagai berikut, file yang diupload hanya akan diletakkan dalam direktori temporary, dan mulai dibaca. Sheet_index merupakan nomer worksheet yang dibaca. 0 adalah worksheet pertama. Selanjutnya pembacaan baris dimulai dari nomer 2 (dua) karena baris pertama berisi header kolom. Pembacaan akan dimulai dengan proses looping yang dimulai dengan angka dua dan berakhir pada jumlah baris excel yang terbaca oleh php. Urutannya adalah $cell->val( baris,kolom ); Data diinisiasi dalam variabel masing-masing, dan dimasukkan dalam query, dan dieksekusi.

Nah file ini dapat dilihat di https://blogit.bimosaurus.com/demo/import.php. Kemudian perhatikan juga dalam posting sebelumnya, tentunya dalam demo terjadi perubahan, karena saya dalam hal ini menggunakan tabel yang sama. Dua script ini bisa saja disatukan jadi satu, dengan catatan bahwa form html diletakkan di bagian bawah dari aksi uploading, dan tentunya pengubahan arah form action. Permasalahan yang sering terjadi dalam proses uploading adalam masalah format cell, yang biasanya dapat bervariasi sekitar Text, Numeric, dan lain sebagainya. Oleh karena itu user perlu diarahkan untuk menggunakan format cell dengan benar.

Sebenarnya masih terdapat satu hal terkait excel ini, yaitu penggunaan PEAR. Dimana dalam PEAR telah lengkap untu segala library termasuk upload download excel. Namun tutorial ini berguna untuk semua server tanpa PEAR ataupun ada PEAR. Karena tidak selalu server berinstalkan PEAR.

Selamat Mencoba, semoga berguna