5

Menampilkan Data dalam bentuk Grafik dengan VB.NET




Tampilan data dengan grafik akan memvisualisasikan secara jelas data suatu kasus dari database. Tutorial berikut ini adalah tentang bagaimana cara kita menampilkan data dari database dalam bentuk grafik sederhana. 
 


Langkah 1 : Jalankan aplikasi Visual Basic.NET

Langkah 2 : Buat Project baru dan desain Form1 seperti gambar dibawah ini.

 
Langkah 3 : Atur properties control yang ada di form1 seperti table berikut.
No.
Kontrol
Properties
1.
Label
Name : Label1
Text : Timoresse Grafik Data
2.
Label
Name : Label2
Text : Kupang
3.
Label
Name : Label3
Text : SoE
4.
Label
Name : Label4
Text : Kefamenanu
5.
Label
Name : Label5
Text : Atambua
6.
Label
Name : Label6
Text : Malaka
7.
TextBox
Name : TextBox1
Text : 6500
8.
TextBox
Name : TextBox2
Text : 5000
9.
TextBox
Name : TextBox3
Text : 4500
10.
TextBox
Name : TextBox4
Text : 6000
11.
TextBox
Name : TextBox5
Text : 3000
12.
Button
Name : Button1
Text : Buat Grafik
  

Langkah 4 : Masukan Script kode berikut ini ke halaman code program dari form tersebut.

Public Class Form1
    Inherits System.Windows.Forms.Form

    Dim graphDrawingArea As Graphics
    Dim bmpDrawingArea As Bitmap
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        bmpDrawingArea = New Bitmap(Width, Height)
        graphDrawingArea = Graphics.FromImage(bmpDrawingArea)
    End Sub

    Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        e.Graphics.DrawImage(bmpDrawingArea, 0, 0)
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim monday As Integer = CInt(Me.TextBox1.Text) / 100
        Dim tuesday As Integer = CInt(Me.TextBox2.Text) / 100
        Dim wednesday As Integer = CInt(Me.TextBox3.Text) / 100
        Dim thursday As Integer = CInt(Me.TextBox4.Text) / 100
        Dim friday As Integer = CInt(Me.TextBox5.Text) / 100

        graphDrawingArea.Clear(Me.BackColor)

        graphDrawingArea.FillRectangle(New SolidBrush(Color.Red), Me.TextBox1.Left + 5, 280 - monday, 40, monday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.TextBox1.Left + 5, 280 - monday, 40, monday)
        graphDrawingArea.FillRectangle(New SolidBrush(Color.Blue), Me.TextBox2.Left + 5, 280 - tuesday, 40, tuesday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.TextBox2.Left + 5, 280 - tuesday, 40, tuesday)
        graphDrawingArea.FillRectangle(New SolidBrush(Color.Fuchsia), Me.TextBox3.Left + 5, 280 - wednesday, 40, wednesday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.TextBox3.Left + 5, 280 - wednesday, 40, wednesday)
        graphDrawingArea.FillRectangle(New SolidBrush(Color.Brown), Me.TextBox4.Left + 5, 280 - thursday, 40, thursday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.TextBox4.Left + 5, 280 - thursday, 40, thursday)
        graphDrawingArea.FillRectangle(New SolidBrush(Color.Turquoise), Me.TextBox5.Left + 5, 280 - friday, 40, friday)
        graphDrawingArea.DrawRectangle(New Pen(Color.Black), Me.TextBox5.Left + 5, 280 - friday, 40, friday)

        graphDrawingArea.DrawRectangle(New Pen(Color.Black), 10, 280, Width - 30, 1)
        Invalidate()
    End Sub
End Class

Langkah 5 : Tekan F5 untuk running dan testing program. Tekan tombol Buat Grafik maka akan tampil grafik seperti gambar dibawah.


Demikian tutorial singkat membuat grafik dengan visual basic.net
Semoga bermanfaat,
Terima kasih,



 Download tutorial versi PDF klik disini


Artikel Terkait


5 Comments


Gan kalo datanya diambil dari database sql server gmna gan ?


Select data dr db trus simpan di variabel kemudian ganti textboxt1/2/3 dgn variabel tsb.


gimana ya kalau jumlah inputannya dibatasi jadi 100 aja


Iwan : bisa tambahkan code ini di dalam sub Button1_Click

if textboxt1.text > Cint(100) then
Message.show("Inputan tidak boleh lebih besar dari 100.")
end if


MessageBox.show("Inputan tidak boleh lebih besar dari 100.")

Posting Komentar

Copyright © 2014 Love Timor All rights reserved. | Bloggerized by Tri Selan.

Read more: http://cintapriawanita.blogspot.com/2012/01/cara-membuat-navigasi-paging-halaman.html#ixzz39mPuDUrh