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

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

  1. maaf mau tanya kalo caranya saat titik2 atau point2 datanya bisa diklik trs muncul page buat liat histori datanya tu caranya gimana master? mohon bantuannya…
    misal disitu kan terlihat malaysia jul 66 kelahiran nah itu maunya muncul pada saat diklik ada page buat historinya malaysia. mohon bantuannya…

  2. saya mau bertanya..,
    misal:
    database : “aws”
    tabel : “avg_harian”
    kolom : “hari_ke”,”site”,”pains_hpa”,”aerodrome”,…..
    saya hanya ingin menampilkan data yang ada pada “hari_ke” dan “pains_hpa” saja dalam bentuk diagram spt diatas.
    jumlah data ada 31 baris.
    Bagaimana caranya?
    mohon bimbingannya..
    terima kasih

  3. Mas, kalau yang mas buat di IE muncul ngak mas? Di punya saya ngak pernah muncul di IE mas, kira2 masalahnya apa ya mas? Help me 🙁

  4. itu kok chartnya ga keluar garisnya ya? ane pake firefox 21.0 support ga? masalahnya ane juga sama, ane masukin script php di highcharts tapi kaga mau jalan phpnya.

    1. Sejauh ini saya pakai, javascriptnya support di browser Firefox 3.x dan setelahnya, begitu juga dengan chrome. Untuk script PHPnya, apakah mas Jack menggunakan file HTML atau JS untuk memanggil PHP, atau sebaliknya. File PHP tidak akan jalan di script yang berekstensi bukan PHP. CMIIW

  5. mau tanya kalau kita mau buat grafik tapi manggilnya id. dari tabel lain. misalnya aku punya tabel gaji, fieldnya : id_gaji,kode_gaji,id_karyawan,gaji. Nah kalau saya pengen buat grafik tapi grafiknya itu per id_keryawan gmana ya ? mohon pencerahannya. makasih sebelumnya.

    1. Terimakasih sodara Niam atas pertanyaannya. Berarti itu adalah masalah penempatan field ya, dan kemungkinan jika saya tidak salah terka, disini digunakan untuk melihat siapa sudah gajian dengan kode_gaji berapa. Mohon maaf, untuk tabel itu apakah berlaku untuk hanya satu bulan atau bagaimana? Sependek pengetahuan saya biasanya gaji itu berkaitan dengan bulan ke sekian. Namun jika memang kita tinggalkan bulannya dulu, maka masalahnya akan kita urai di SQL nya.

      $sql = "SELECT id_karyawan, id_gaji, kode_gaji, gaji FROM gaji ORDER BY id_karyawan";
      

      Mungkin demikian? Saya kurang paham dengan tabel tersebut. Mungkin bisa dijelaskan lanjut? Semoga saya bisa membantu dengan cara yang singkat 🙂

  6. begini. saya tu punya punya tabel id_kms,kode_lyanan,id_balita,penimbangan, umur. saya ingin membuat sebuah grafik garis dimana garis X itu umur dan penimbangan Y. Lalu saya ingin membuat grafik tersebut dibuat per id_balita. Dengan kata lain setiap id_balita dapat dilihat data penimbangan dan umur sebagai grafik kms. secara berkala. Mohon bantuannya, terima kasih sebelumnya.

  7. kalau untuk dibuat realtime agar data yang masuk database bisa langsung di plot gimana caranya? mohon bantuannya

  8. Mas mau tanya jika kita mau membuat grafik misalnya sumbu x itu waktu (tapi dibatasi 40 data saja) dan sumbu y adalah nilai kecepatan. Nah itu semua secara realtime bagaimana ya mas?
    Bisa minta tolong tutorialnya mas.
    Terimakasih.

  9. makasih banyak gan , sebelumnya tidak berhasil dan yg muncul hanya titik tiga , dan sekrg punya saya sudah berhasil,untuk diagram pie apa agan punya postingannya?

Leave a Reply

Your email address will not be published. Required fields are marked *