Mar11

MEMBUAT GRAFIK PADA VISUAL BASIC (VB)

by rohmadi on March 11, 2011 at 4:18 PM
Posted In: VB 6.0

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)
CurrentXCurrentYPrint 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()

[sourcecode]
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
[/sourcecode]

6).     Hasilnya akan seperti berikut:

Isikan data yang akan digambar pada Y2, secara otomatis data ke 2 yang akan digambar akan terhubung.

Download Code

Untuk source code grafik lainnya silakan download di Grafik Dinamik

└ Tags: , , , , , , , ,