MEMBUAT GRAFIK PADA VISUAL BASIC (VB)

Bab ini :

• Menjelaskan Tentang Konsep Membuat Grafik
• Menjelaskan Komponen Untuk Membuat Grafik pada VB
• Menjelaskan Langkah Membuat Grafik pada VB dari Data yang disediakan

KONSEP GRAFIK

Pada dasarnya sebuah grafik adalah gambaran beberapa buah data pada minimal dua buah koordinat dari satu titik acuan awal (titik nol). Dengan kata lain, kita dapat menampilkan beberapa nilai data menjadi sebuah grafik yang mewakili sebuah interpretasi terhadap posisi tertentu.
Misalnya kita memiliki data sebagai berikut: Setelah dilakukan pengukuran terhadap kecepatan angin di titik Q selama tujuh hari, maka didapatkan data sebagai berikut, Hari:{Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu}; Kecepatan rata-rata: {10, 12, 15, 8, 20, 5, 7}meter/detik.
Dari data pengukuran kecepatan angin selama satu minggu di atas, maka kita dapat menyajikan data dalam bentuk grafik sebagai berikut:
Tabel 5.1 Hasil Pengukuran Kecepatan Angin
Dalam bentuk lain, data dapat disajikan sebagai grafik:
Gambar 5.1 Grafik Pengukuran Kecepatan Angin
Dari grafik di atas, kita dapat membuat sebuah grafik dengan langkah:
1). Membuat sumbu Y (sampai batas maksimal data) dan Sumbu X (sejumlah data)
2). Membuat sebuah garis dari titik 0 (0,0) yaitu satu langkah x dan 10 langkah y menuju titik A(1,10)
3). Membuat sebuah garis dari titik A(1,10) yaitu satu langkah x dan 12 langkah y menuju titik B(2,12)
4). Membuat sebuah garis dari titik B(2,12) yaitu satu langkah x dan 15 langkah y menuju titik C(3,15)
5). Membuat sebuah garis dari titik C(3,15) yaitu satu langkah x dan 8 langkah y menuju titik D(4,8)
6). Membuat sebuah garis dari titik D(4,8) yaitu satu langkah x dan 20 langkah y menuju titik E(5,20)
7). Membuat sebuah garis dari titik E(5,20) yaitu satu langkah x dan 5 langkah y menuju titik F(6,5)
8). Membuat sebuah garis dari titik F(6,5) yaitu satu langkah x dan 7 langkah y menuju titik G(7,7)
Setelah langkah di atas selesai, maka akan tersaji sebuah grafik data seperti Gambar 5.1.

KOMPONEN DALAM VISUAL BASIC

PictureBox
Visual basic menyediakan beberapa komponen yang dapat digunakan untuk membuat sebuah grafik di atas. Komponen yang dapat digunakan adalah PictureBox.
PictureBox dapat digunakan sebagai kontainer untuk menampung objek lainnya, misalnya sebuah image/file gambar, sebuah textbox, ataupun yang lainnya. Selain itu, PictureBox juga memiliki beberapa metode khusus yang dapat digunakan untuk menggolah gambar, diantaranya:

Metode	Keterangan
Circle(x,y), r, warna, awal, akhir, aspek	Untuk menggambar sebuah lingkaran dengan titik pusat (x,y) sebesar nilai radius r, dengan warna , dimulai dari sudut awal sampai akhir dengan nilai perbandingan tinggi dan lebar sebesar aspek
Line(x1,y1)-(x2,y2),warna	Untuk membuat sebuah garis dari titik awal (x1,y1) sampai titik akhir (x2,y2) dengan warna
Line(x1,y1)-(x2,y2),warna,B	Untuk membuat kotak dari titik (x1,y1) sampai (x2,y2), atau dengan lebar x2-x1 dan panjang y2-y1
Line(x1,y1)-(x2,y2),warna,BF	Untuk menggambar kotak yang diisi warna dari titik (x1,y1) sampai (x2,y2)
Pset(x,y)	Untuk membuat sebuah titik pada koordinat (x,y)
Point(x,y)	Mendapatkan nilai warna pada sebuah titik koordinat (x,y)
CurrentXCurrentY Print Out	Mencetak/menampilkan teks Out pada koordinat (X,Y)

Label
Sebuah tampilan biasanya memerlukan beberapa keterangan kepada pengguna untuk menjelaskan maksud dari tampilan tersebut. Dalam Visual Basic, sebuah keterangan dalam desain software dapat diberikan menggunakan komponen Label dengan menuliskan pada properties Caption. Misalnya, kita akan menuliskan keterangan “Grafik Data Pengukuran Kecepatan Angin” pada grafik yang kita sajikan. Maka kita dapat membuat pada Visual Basic:

Name	Object	Properties
Label1	Label	- Name: Label1- Caption: Grafik Data Pengukuran Kecepatan Angin - Alignment: 2 – Center

Frame
Dalam desain software terkadang dibutuhkan untuk mengelompokkan keterangan maupun control menjadi kategori yang sama. Dalam Visual Basic kita dapat melakukan dengan meletakkan komponen yang bersesuaian kategori dalam sebuah kontainer Frame. Misalnya, kita akan membuat kategori data Hari:{Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu}; Kecepatan rata-rata: {10, 12, 15, 8, 20, 5, 7}meter/detik. Nama kategori yang dikehendaki dituliskan pada properties Caption dari frame tersebut.

Name	Object	Properties
Frame1	Frame	- Name: Frame1- Caption: Data

CommandButton
Pastinya sebuah software membutuhkan masukan/aksi dari pengguna, misalnya memasukkan data, melakukan keputusan operasi, ataupun yang lainnya. Dalam Visual Basic input dari pengguna berupa eksekusi suatu proses dilakukan dengan memberikan sebuah button/tombol, yaitu melalui CommandButton. Dimana sebuah operasi akan dilakukan jika pengguna menekan sebuah button tertentu. Perintah yang akan dieksekusi diletakkan diantara:
Private Sub Command1_Click()
‘ perintah eksekusi ditulis di sini

End Sub
MSComm
MsComm merupakan sebuah gerbang yang menghubungkan antara dunia luar hardware/rangkaian elektronik dengan software Visual Basic yang akan dibuat. Data dari pengukuran sistem hardware dikirim ke komputer melalui sebuah protokol komunikasi serial RS232. Untuk dapat berkomunikasi, MSComm harus diatur sesuai dengan konfigurasi yang sama pada sisi hardware. Konfigurasi yang harus diatur meliputi: baudrate, parity, databit, stop bit dan port number.
Untuk dapat menggunakan MSComm, Anda harus melakukan prosedur berikut secara berurutan:
1). Mengatur konfigurasi: baudrate, parity, databit, stop bit, port number
2). Mengatur buffer: InBufferSize dan OutBufferSize
3). Membuka koneksi serial, yaitu mengatur properties MSComm.PortOpen = true
4). Mengirim data melalui MSComm.Output = DataOut, dan atau
5). Menerima data melalui DataIn = MSComm.Input
6). Menutup koneksi serial, yaitu mengatur properties MSComm.PortOpen = false

LANGKAH MEMBUAT GRAFIK PADA VB

Selanjutnya Anda dapat melanjutkan untuk membuat grafik secara langsung di Visual Basic. Untuk dapat membuat grafik di Visual Basic, Anda harus melakukan langkah-langkah berikut ini:
1). Buka Visual Basic dari Start à All Programs à Microsoft Visual Basic 6.0 à Microsoft Visual Basic 6.0

2). Selanjutnya Anda akan menemui tampilan berikut

Klik OK.
3). Buatlah tampilan seperti berikut:

Name	Object	Properties
Form1	Form	- Name: Form1- Width: - Height: - StartUpPosition: 2 – CenterScreen
Label1	Label	- Name: Label1- Caption: Graik Data Pengukuran Kecepatan Angin - Alignment: 2 – Center - Width: - Font: Font Style à Bold
Picture1	PictureBox	- Name: Picture1- AutoRedraw: True - BackColor: &H80000008&
Frame1	Frame	- Name: Frame1- Caption: Data
Label2	Label	- Name: Label2- Caption: Senin
Label3	Label	- Name: Label3- Caption: Selasa
Label4	Label	- Name: Label4- Caption: Rabu
Labe5	Label	- Name: Label5- Caption: Kamis
Label6	Label	- Name: Label6- Caption: Jumat
Label7	Label	- Name: Label7- Caption: Sabtu
Label8	Label	- Name: Label8- Caption: Minggu
Text1	TextBox	- Name: Text1- Text: 10
Text2	TextBox	- Name: Text2- Text: 12
Text3	TextBox	- Name: Text3- Text: 15
Text4	TextBox	- Name: Text4- Text: 8
Text5	TextBox	- Name: Text5- Text: 20
Text6	TextBox	- Name: Text6- Text: 5
Text7	TextBox	- Name: Text7- Text: 7
Frame2	Frame	- Name: Frame2- Caption: Grafik
Text8	TextBox	- Name: Text8- Text: 0
Text9	TextBox	- Name: Text9- Text: 0
Text10	TextBox	- Name: Text10- Text: 0
Text11	TextBox	- Name: Text11- Text: 0
Text12	TextBox	- Name: Text12- Text: 0
Label9	Label	- Name: Label9- Caption: Data
Label10	Label	- Name: Label10- Caption: X1
Label11	Label	- Name: Label11- Caption: Y1
Label12	Label	- Name: Label12- Caption: X2
Label13	Label	- Name: Label13- Caption: X2
Command1	CommandButton	- Name: Command1- Caption: Gambar

4). Double klik Pada Command1, sehingga akan muncul sisi code
Private Sub Command1_Click()

End Sub
5). Sebelum membuat garis pada Visual Basic, Anda harus memahami dasar berikut dalam Visual Basic:
Titik awal nilai x=0 dan y=0 adalah dari kiri atas bagian PictureBox, sehingga untuk menggambar sebuah grafik yang dalam grafik dimulai dari bagian kiri bawah, maka titik Y adalah kebalikan dari nilai yang akan digambar.

Visual Basic	Grafik
X = Data	X = Data
Y = TitikNolY – Data	Y = Data

Sehingga untuk menggambar garis dengan nilai A(1,10), maka yang harus dilakukan:
ü Menentukan titik awal sumbu X1 (TitikNolX), Misal 0
ü Menentukan titik awal sumbu Y1 (TitikNolY), misal 2000
ü Menentukan nilai sumbu Y2 = TitikNolY – 10
ü Menentukan Nilai sumbu X2 = 1
ü Menentukan nilai skala satuan yang mewakili satu nilai, misal 1 satuan= 100 skala
ü Menggambar garis dengan Picture1.Line (TitikNolX,TitikNolY) – (X2*skala,Y2*skala), warna
Picture1.Line(0,2000)-(1*100,2000-(10*100)),warna
Dalam bentuk tabel, tahap menggambar grafik data adalah:

	Senin	Selasa	Rabu	Kamis	Jumat	Sabtu	Minggu
Data	10	12	15	8	20	5	7
X1	0	1	2	3	4	5	6
Y1	0	10	12	15	8	20	5
X2	1	2	3	4	5	6	7
Y1	10	12	15	8	20	5	7

Untuk Menggambar pada Visual Basic:
skala=100
TitikNolY = 3000
X2 = X1 + (1*skala)
Y2 = TitikNolY – (Data*skala)

	Senin	Selasa	Rabu	Kamis	Jumat	Sabtu	Minggu
Data	10	12	15	8	20	5	7
X1	0	100	200	300	400	500	600
Y1	0	2000	2800	1500	2200	1000	2500
X2	100	200	300	400	500	600	700
Y1	2000	2800	1500	2200	1000	2500	2300

Isikan code berikut pada Private Sub Command1_Click()
Private Sub Command1_Click()
‘ data yang akan digambar
Data = Text8.Text

‘ titik awal untuk menggambar garis, Titik O
X1 = Text9.Text
Y1 = Text10.Text

‘ titik data yang akan digambar Titik A
X2 = Text11.Text
Y2 = Text12.Text

‘ menggambar garis
Picture1.Line (X1 * SkalaX, TitikNolY – (Y1 * SkalaY))-(X2 * SkalaX, TitikNolY – (Y2 * SkalaY)), vbRed

‘ mengatur nilai untuk titik berikutnya
Text9.Text = X2 ‘ X1 = X2
Text10.Text = Y2 ‘ Y1 = Y2
Text11.Text = X2 + 1 ‘ X2 = X2 + 1
Text12.Text = Data
End Sub
Tulis deklarasi berikut pada bagian paling atas code.
Dim X1, X2, Y1, Y2, Data As Integer
Dim Step, SkalaX, SkalaY As Integer
Dim TitikNolX, TitikNolY As Integer
Pada bagian Form_load
Private Sub Form_Load()
‘ nilai skala dalam menggambar pada VB
SkalaX = 500
SkalaY = 100

‘ Titik acuan sumbu Y, sebagai titik nol sumbu Y
TitikNolY = 3000

End Sub
Pada bagian text8_change
Private Sub Text8_Change()
Text12.Text = Text8.Text
End Sub
6). Hasilnya akan seperti berikut:
Isikan data yang akan digambar pada Y2, secara otomatis data ke 2 yang akan digambar akan terhubung.

Download Code

-->