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
Matlab, seperti halnya software development lainya juga meyediakan fitur untuk membuat aplikasi yang user friendly. Yaitu suatu tampilan yang dapat memudahkan pengguna aplikasi dalam mengoperasikannya. Dalam Matlab, kita bisa menggunakan fitur Guide untuk membuat tampilan berbasi grafis.
