Membuat Grafik Pada Visual Basic

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 AnginDalam bentuk lain, data dapat disajikan sebagai grafik:Gambar 5.1 Grafik Pengukuran Kecepatan AnginDari 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:

MetodeKeterangan

Circle(x,y), r, warna, awal, akhir, aspekUntuk 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),warnaUntuk membuat sebuah garis dari titik awal (x1,y1) sampai titik akhir (x2,y2) dengan warna

Line(x1,y1)-(x2,y2),warna,BUntuk membuat kotak dari titik (x1,y1) sampai (x2,y2), atau dengan lebar x2-x1 dan panjang y2-y1

Line(x1,y1)-(x2,y2),warna,BFUntuk 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 OutMencetak/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:

NameObjectProperties

Label1Label- 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.


Frame1Frame- 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 SubMSComm 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 number2). Mengatur buffer: InBufferSize dan OutBufferSize3). Membuka koneksi serial, yaitu mengatur properties MSComm.PortOpen = true4). Mengirim data melalui MSComm.Output = DataOut, dan atau5). Menerima data melalui DataIn = MSComm.Input6). 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:


Form1Form- Name: Form1- Width: - Height:- StartUpPosition: 2 CenterScreen

Label1Label- Name: Label1- Caption: Graik Data Pengukuran Kecepatan Angin - Alignment: 2 Center- Width:- Font: Font Style Bold

Picture1PictureBox- Name: Picture1- AutoRedraw: True - BackColor: &H80000008&

Frame1Frame- Name: Frame1- Caption: Data

Label2Label- Name: Label2- Caption: Senin

Label3Label- Name: Label3- Caption: Selasa

Label4Label- Name: Label4- Caption: Rabu

Labe5Label- Name: Label5- Caption: Kamis

Label6Label- Name: Label6- Caption: Jumat

Label7Label- Name: Label7- Caption: Sabtu

Label8Label- Name: Label8- Caption: Minggu

Text1TextBox- Name: Text1- Text: 10







Frame2Frame- Name: Frame2- Caption: Grafik






Label9Label- Name: Label9- Caption: Data

Label10Label- Name: Label10- Caption: X1

Label11Label- Name: Label11- Caption: Y1



Command1CommandButton- Name: Command1- Caption: Gambar

2). Double klik Pada Command1, sehingga akan muncul sisi codePrivate Sub Command1_Click()

End Sub3). 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 BasicGrafik

X = DataX = Data

Y = TitikNolY DataY = Data

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

SeninSelasaRabuKamisJumatSabtuMinggu

Data10121582057

X10123456

Y101012158205

X21234567

Y110121582057

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

SeninSelasaRabuKamisJumatSabtuMinggu

Data10121582057

X10100200300400500600

Y10200028001500220010002500

X2100200300400500600700

Y12000280015002200100025002300

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

titik awal untuk menggambar garis, Titik OX1 = Text9.TextY1 = Text10.Text

titik data yang akan digambar Titik AX2 = Text11.TextY2 = Text12.Text

menggambar garisPicture1.Line (X1 * SkalaX, TitikNolY (Y1 * SkalaY))-(X2 * SkalaX, TitikNolY (Y2 * SkalaY)), vbRed

mengatur nilai untuk titik berikutnyaText9.Text = X2 X1 = X2Text10.Text = Y2 Y1 = Y2Text11.Text = X2 + 1 X2 = X2 + 1Text12.Text = DataEnd SubTulis deklarasi berikut pada bagian paling atas code.Dim X1, X2, Y1, Y2, Data As IntegerDim Step, SkalaX, SkalaY As IntegerDim TitikNolX, TitikNolY As IntegerPada bagian Form_loadPrivate Sub Form_Load() nilai skala dalam menggambar pada VBSkalaX = 500SkalaY = 100

Titik acuan sumbu Y, sebagai titik nol sumbu YTitikNolY = 3000

End SubPada bagian text8_changePrivate Sub Text8_Change()Text12.Text = Text8.TextEnd SubProgram Belajar Menulis dan Menggambar dengan VisualBasic

Program Belajar Menulis dan Menggambar dengan VisualBasic

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 BooleanPrivate Sub cmdhapus_Click()cmdhapus.Enabled = Falsecmdpensil.Enabled = TrueEnd Sub

Private Sub cmdhpsemua_Click()Picture1.ClsEnd Sub

Private Sub cmdpensil_Click()cmdpensil.Enabled = Falsecmdhapus.Enabled = TrueEnd Sub

Private Sub Command1_Click()Unload MeEnd Sub

Private Sub Form_Load()Dim i As IntegerFor i = 0 To 14lblwarna(i).BackColor = QBColor(i)Next iPicture1.ForeColor = QBColor(0)Picture1.BackColor = QBColor(15)End Sub

Private Sub lblwarna_Click(Index As Integer)Picture1.ForeColor = lblwarna(Index).BackColorEnd Sub

Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, x As Single, y As Single)If Button = vbLeftButton Thenpaintnow = TruePicture1.CurrentX = xPicture1.CurrentY = yEnd IfEnd Sub

Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, x As Single, y As Single)If paintnow ThenIf cmdpensil.Enabled = False ThenPicture1.Line -(x, y), Picture1.ForeColorPicture1.MousePointer = 99End IfIf cmdhapus.Enabled = False ThenPicture1.Line -(x, y), RGB(255, 255, 255), BPicture1.MousePointer = 12End IfEnd IfEnd Sub

Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, x As Single, y As Single)If Button = vbLeftButton Thenpaintnow = FalseEnd IfEnd Sub

Documents

Membuat Grafik Pada Visual Basic