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,
Untuk menggambar sebuah
akhir, aspek
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
Mencetak/menampilkan teks
Print Out
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). Buatlah tampilan seperti berikut:

Name

Object

Properties

Form1

Form

Label1

Label

Picture1

PictureBox

Frame1
Label2
Label3
Label4
Labe5
Label6
Label7
Label8

Frame
Label
Label
Label
Label
Label
Label
Label

Text1
Text2
Text3
Text4
Text5
Text6
Text7
Frame2
Text8
Text9
Text10
Text11
Text12
Label9
Label10
Label11
Label12
Label13
Command1

TextBox
TextBox
TextBox
TextBox
TextBox
TextBox
TextBox
Frame
TextBox
TextBox
TextBox
TextBox
TextBox
Label
Label
Label
Label
Label
CommandButton

- Name: Form1- Width:

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

2). Double klik Pada Command1, sehingga akan muncul sisi code
Private Sub Command1_Click()
End Sub
3). 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:
1. Menentukan titik awal sumbu X1 (TitikNolX), Misal 0
2. Menentukan titik awal sumbu Y1 (TitikNolY), misal 2000
3. Menentukan nilai sumbu Y2 = TitikNolY 10
4. Menentukan Nilai sumbu X2 = 1
5. Menentukan nilai skala satuan yang mewakili satu nilai, misal 1 satuan= 100 skala
6. 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

Program Belajar Menulis dan Menggambar dengan

Visual Basic
Program Belajar Menulis dan Menggambar dengan Visual Basic

Langkah pertama adalah membuat sebuah project dengan sebuah form menggunakan objek
label, button, picture box dan frame dengan desain seperti ini:

Langkah selanjutnya adalah melakukan pengaturan properties sehingga tampilan didapat

seperti pada gambar diatas.
Langkah terakhir adalah memberikan listing program untuk form tersebut sebagai berikut:
Dim paintnow As Boolean
Private Sub cmdhapus_Click()

cmdhapus.Enabled = False
cmdpensil.Enabled = True
End Sub
Private Sub cmdhpsemua_Click()
Picture1.Cls
End Sub
Private Sub cmdpensil_Click()
cmdpensil.Enabled = False
cmdhapus.Enabled = True
End Sub
Private Sub Command1_Click()
Unload Me
End Sub
Private Sub Form_Load()
Dim i As Integer
For i = 0 To 14
lblwarna(i).BackColor = QBColor(i)
Next i
Picture1.ForeColor = QBColor(0)
Picture1.BackColor = QBColor(15)
End Sub
Private Sub lblwarna_Click(Index As Integer)
Picture1.ForeColor = lblwarna(Index).BackColor
End Sub
Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, x As Single, y As
Single)
If Button = vbLeftButton Then
paintnow = True
Picture1.CurrentX = x
Picture1.CurrentY = y
End If
End Sub
Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, x As Single, y As
Single)
If paintnow Then
If cmdpensil.Enabled = False Then
Picture1.Line -(x, y), Picture1.ForeColor
Picture1.MousePointer = 99
End If
If cmdhapus.Enabled = False Then
Picture1.Line -(x, y), RGB(255, 255, 255), B
Picture1.MousePointer = 12
End If

End If
End Sub
Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, x As Single, y As Single)
If Button = vbLeftButton Then
paintnow = False
End If
End Sub