grafik

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

Posted on by bimosaurus

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.

Artikel terkait

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

Posted on by bimosaurus

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

Artikel terkait

[Contoh] Cara Membuat Grafik Dasar Web Dengan JQuery HighChart

Posted on by bimosaurus

Jika posting lalu telah dikenalkan dasar pembuatan Grafik dengan menggunakan JQuery JQPlot, maka sekarang dikenalkan dengan competitor JQuery Graphing Web juga. Tools berbasis JQuery itu adalah : HighChart. HighChart ini sama saja sebenarnya dengan JQPlot. Hanya saja menurut saya, HighChart ini lebih enak dalam dasar penulisan notasi data yang perlu dituliskan. JQPlot memiliki notasi penulisan data seri yang akan berpotensi lebih bertele (ribet) daripada HighChart.

Contoh adalah jika kita tuliskan pada JQPlot seperti demikian:

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

dan pada HighChart adalah:


xAxis: {
                categories: [1,3,5,7,9,11]
},


.
.
.
.

series: [{
                name: 'Nama Data',
                data: [1,2,1,2,1,2]
            },

Sedangkan biasanya data dari PHP akan berupa array dari data sejenis. Contoh adalah :


$datax = mysql_fetch_array( $query_x ); //berupa array data sejenis

$datay = mysql_fetch_array( $query_y ); //berupa array data sejenis

Namun tidak menutup kemungkinan bahwa data yang tersedia akan lebih nyaman menggunakan JQPlot. Pemilihan Tools akhirnya tergantung pada selera dan kebutuhan. Pembuatan grafik JPGraph pun akan memiliki kelebihan sendiri. Antara lain jika penggunaan grafik sekaligus akan dibentuk Gambar JPEG/PNG. Meskipun Highchart juga dapat membentuk JPG, namun terdapat satu keunggulan JPGraph dalam masalah pembuatan image.

Penggunaan Highchart

Source HighChart dapat diambil di http://www.highcharts.com/ demo dan contoh serta docs terletak lengkap disana. Extract Highchart tersebut dalam satu folder tertentu. Dalam contoh di sini digunakan Highchart pada https://blogit.bimosaurus.com/demo/highchart/

Selanjutnya untuk dasar penggunaan Grafik Line, akan digunakan seperti berikut langkahnya

  • Include script JQuery
  • Membuat script dengan diarahkannya grafik pada elemen yang dikehendaki
  • Melakukan penyisipan script Highchart
  • Menentukan letak elemen tujuan

Kira-kira akan seperti berikut ini script untuk membuat baris:

Kira-kira grafik yang akan dibentuk adalah seperti demikian.

Nah, selamat mencoba babak pertama JQPlot VS HighChart ini.. Selanjutnya akan kita buat sebuah contoh pembuatan grafik dengan JQPlot dan Highchart yang datanya diambil dari dalam database

Selamat Mencoba..

Artikel terkait

[Contoh] Cara Membuat Grafik Dasar Web dengan JQuery JQPlot

Posted on by bimosaurus

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

Artikel terkait

[TIPS] Contoh Cara Membuat Grafik Standard HTML Sederhana

Posted on by bimosaurus

Pembuatan grafik ternyata tidak harus rumit dengan tools tertentu. Grafik masih bisa disiasati dengan menggunakan kombinasi teknik CSS dan HTML. Tentu saja tidak semua grafik dapat dibentuk, karena keterbatasan CSS dan HTML. Disini kita pelajari grafik yang mudah seperti grafik batang/bar, dimana seluruh value akan dibentuk dengan menggunakan Bar. Lihat contoh dibawah ini:

 

Calon 1
Calon 2
Calon 3
Calon 4
Calon 5

 

 

Contoh Grafik Pemilihan Kepala Desa

Pembuatan grafik ini ternyata tidak sulit. Yaitu hanya dengan melakukan pembuatan elemen DIV yang diberi warna tertentu, dan diberi panjang tertentu, yang tentu saja panjangnya nanti akan menyesuaikan dari dalam tabel asal.

Sebagai contoh, apa yang terjadi apa bila kita membuat sintaks seperti demikian:





Calon 1


Calon 2


Calon 3


Calon 4


Calon 5

Hasilnya tentu saja akan langsung seperti tabel di atas. Panjangnya batang akan mengikuti aturan width pada div yang bersangkutan. Grafik tersebut juga dapat kita kombinasikan dengan link href. Grafik tersebut dibuat dengan cara menempatkan sebuah elemen div yang berukuran panjang yang diatur dari database. Div tersebut juga harus rata kiri untuk dapat dibaca dengan jelas

Kita pun dapat membuat grafik dalam posisi vertikal. Hanya saja, karena tabel html memiliki karakter standard rata vertikal tengah, maka kita harus menambahkan valign=bottom

Sebagai contoh adalah sebagai berikut



















Calon 1Calon 2Calon 3Calon 4Calon 5

Hasilnya akan menjadi seperti ini:
Calon 1 Calon 2 Calon 3 Calon 4 Calon 5

Nah ternyata cukup sederhana. Tinggal kita akhirnya dapat melakukan manipulasi angka tersebut dengan menggunakan PHP dan mengambil dari database server MySQL.

Untuk grafik lanjut berbasis image, dapat dilihat di :

https://blogit.bimosaurus.com/2012/04/21/contoh-cara-membuat-grafik-dengan-jpgraph-dengan-php-dan-mysql dan
https://blogit.bimosaurus.com/2012/04/19/contoh-1-dasar-membuat-grafik-dengan-jpgraph-di-php

Artikel terkait

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

Posted on by bimosaurus

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!

Artikel terkait

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

Posted on by bimosaurus

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

Artikel terkait