Home > Java, Programming, Tips > Menggambar Grafik pada Java GUI

Menggambar Grafik pada Java GUI

Berhubung beberapa waktu yang lalu saya sempet diminta tolong untuk bikin grafik pake bahasa Java. Waktu saya yang emang belum bisa bikin, tentunya google adalah senjata yang paling sakti, setelah cari mencari, ternyata susah juga, mungkin karena saya yang masih lemah ilmu google-nya entah emang link yang didapatkan gak ada yang cocok dengan keinginan saya, saya mencari contoh program yang membuat grafik beserta penjelasannya. Walaupun begitu ada beberapa link yang sedikit sesuai dengan keinginan saya. Untungnya saya install netbeans yang ternyata sangat membantu saya sehingga saya berhasil membuat grafik dengan auto-completion-nya sehingga mengenali method2 yang bisa digunakan. Saat membuat grafik ada baiknya kita membuat class tersendiri yang memang bekerja sebagai penampil grafik, karena pada kelas tersebut, kita turunkan dari class JPanel. Pada class JPanel terdapat method paintComponent yang akan kita override, method ini mempunyai input class Graphics.

Daripada kita terlalu pusing dengan class2 yang saya sebut tadi, lebih baik kita belajar dari contoh. Setelah melakukan import package yang dibutuhkan seperti awt dan swing untuk tampilan GUI, kita buat class misal disini saya beri nama TutorGrafik yang merupakan turunan dari class JPanel

class TutorGrafik extends JPanel {

Untuk konstruktor class ini sendiri saya mempunyai input berupa array 2 dimensi, di contoh ini berisi integer dengan ukuran 2 x 20. Untuk ukuran keduanya yang disini 20, bisa diganti dan dan tidak harus 20, bisa saja 30 atau 35 atau lebih besar lagi. Ukuran array dimensi pertama yaitu 2 sendiri dimaksudkan untuk “Nilai 1” dan “Nilai 2”. Pada konstruktor wajib bagi kita untuk menentukan ukurannya bila kita menggunakan scrollpane, jika tidak, scrollpane tidak bisa membuat scroller yang seharusnya ada. Contoh kali ini saya menentukan ukuran dari JPanel ini dari besar dimensi/ukuran kedua dari array input yaitu data kemudian dikalikan dengan 25 px (entah saya gak tau satuannya apa, anggap saja px alias pixel yak :D), untuk lebarnya saya kasih ukuran 160 px. Hasil konstruktornya adalah sebagai berikut

public TutorGrafik(int[][] data) {
    this.data = data;
    setPreferredSize(new Dimension(data[0].length*25+100, 160));
}

Komponen penting di class ini bukan pada konstruktornya, tapi di method yang di-override yaitu method paintComponent, di method ini kita memiliki input dari class Graphics, yang nantinya akan di jalankan beberapa method seperti setColor, drawLine, drawstring, drawRect, fillRect dan sebagainya. Kebanyakan method tersebut menerima input berupa integer, sehingga dibutuhkan casting ke integer terlebih dahulu, atau mungkin butuh package tambahan sehingga kita bisa menggunakan method yang menerima input float. Mungkin untuk lebih jelasnya bisa dibaca kodingan berikut ini:

//import package yang dibutuhkan
import javax.swing.*;
import java.awt.*;

class TutorGrafik extends JPanel {
	//array angka yang akan ditampilkan di grafik
	private int[][] data;

	public TutorGrafik(int[][] data) {
		this.data = data;
		//membuat ukuran dari panel yang akan dibuat, penting untuk
		//memperkirakan lebar dari grafik yang akan dibuat
		//disini diberi ukuran panjang = 25 x lebar data, lebar = 160 px
		setPreferredSize(new Dimension(data[0].length*25+100, 160));
	}

	public void paintComponent(Graphics g) {
		// Bagian yang berwarna hitam
		g.setColor(Color.BLACK);
		//membuat sumbu y
		//membuat garis dari koordinat (50,40) sampai (50,145)
		g.drawLine(50,40,50,145);
		//membuat sumbu x
		//lebar dari setiap index array adalah 25 px
		//membuat garis dari koordinat (45,140) sampai lebar data dikali 25 px + 50 px
		//sebagai batas kiri
		g.drawLine(45,140,50+data[0].length*25,140);
		//membuat skala angka untuk sumbu y
		//tiap satu digit angka mempunyai jarak 10 px
		g.drawString("0", 35, 145);
		g.drawString("2", 35, 125);
		g.drawString("4", 35, 105);
		g.drawString("6", 35, 85);
		g.drawString("8", 35, 65);
		g.drawString("10", 32, 45);
		//membuat legenda dari warna grafik yang akan dibuat, dituliskan di atas grafik
		//di koordinat (75,30)
		g.drawString("Nilai 1", 75, 30);
		//di koordinat (200,30)
		g.drawString("Nilai 2", 200, 30);
		// Bagian yang berwarna abu2
		g.setColor(Color.LIGHT_GRAY);
		//membuat garis yang menjadi skala sumbu x
		//asumsi untuk isi dari data[0] dan data[1] lebarnya sama, sehingga menggunakan data[0]
		//atau data[1] sama saja hasilnya
		for (int i=1;i<=data[0].length;i++) {
			g.drawLine(50+25*i,40,50+25*i,145);
		}
		//membuat garis yang menjadi skala sumbu y
		//untuk tiap digit mempunyai jarak 10 px dan asumsi bahwa nilai maksimal sumbu y adalah 10
		for (int i=1;i<=10;i++) {
			g.drawLine(45,30+i*10,50+data[0].length*25,30+i*10);
		}
		// Bagian yang berwarna biru
		g.setColor(Color.BLUE);
		//membuat kotak yang akan diletakkan disamping string "Nilai 1"
		g.drawRect(50, 20, 20, 10);
		g.fillRect(50, 20, 20, 10);
		//membuat garis2 grafik, silahkan dipahami sendiri yak :p
		for (int i=0;i<(data[0].length-1);i++) {
			g.drawLine(50+i*25,140-data[0][i]*10,50+i*25+25,140-data[0][i+1]*10);
		}
		// Bagian yang berwarna merah
		g.setColor(Color.RED);
		//membuat kotak yang akan diletakkan disamping string "Nilai 2"
		g.drawRect(175, 20, 20, 10);
		g.fillRect(175, 20, 20, 10);
		//membuat garis2 grafik, silahkan dipahami sendiri yak :p
		for (int i=0;i<(data[0].length-1);i++) {
			g.drawLine(50+i*25,140-data[1][i]*10,50+i*25+25,140-data[1][i+1]*10);
		}
	}

	//method utama yang akan menampilkan frame yang berisi grafik
	public static void main(String[] args) {
		//membuat data yang ditampilkan grafiknya
		int[][] data = {{3,4,6,2,4,5,3,5,2,4,3,4,6,2,4,5,3,5,2,4},{6,1,9,7,2,7,9,8,5,5,6,1,9,7,2,7,9,8,5,5}};
		//membuat object grafik, dan memasukkan data yang dibuat sebelumnya menjadi input class TutorGrafik
		TutorGrafik grafik = new TutorGrafik(data);
		//membuat scroll jika gambar masih kurang lebar, melebihi lebar dari scrollpane yang ditentukan di bawah
		//yaitu 600 x 180
		JScrollPane scroll = new JScrollPane(grafik,
			ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED,
			ScrollPaneConstants.HORIZONTAL_SCROLLBAR_AS_NEEDED);
		scroll.setLocation(10,10);
		scroll.setSize(600,180);
		//membuat frame yang menjadi tampilan utama GUI
		JFrame.setDefaultLookAndFeelDecorated(false);
		JFrame frameG = new JFrame("Grafik");
		frameG.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frameG.setLayout(null);
		frameG.getContentPane().add(scroll);
		frameG.setBounds(0,0,650,250);
		frameG.setLocationRelativeTo(null);
		frameG.setVisible(true);
	}
}

Yah jadinya malah saya cuman ngasih contoh doank dan jarang penjelasan, tapi semoga bisa dipahami dan bermanfaat, silahkan jika ada pertanyaan😀

Categories: Java, Programming, Tips
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: