INPUT LISTBOX Vs PLOTTING (X,Y) Vs PICTUREBOX

Tertanggal 4-Mei-2010, Salah satu pengunjung Blog saya menanyakan bagaimana membuat Chart menggunakan VB 2008 dengan masukan dari 2 Data X dan Y yang di masukkan ke Listbox. Saya berharap aplikasi yang saya buat dapat memvisualisasikan pertanyaannya, dan membantu masalah yang dihadapinya.

Hasil tampilannya, perhatikan gambar paling atas. ToolBox yang akan kita gunakan, perhatikan table di bawah ini:

ToolBox	Properties
1 UserForm	Name: UserForm1 Caption: V. Hutabalian's Blog INPUT LISTBOX Vs PLOTTING (X,Y) Vs PICTUREBOX
2 CommandButton	Name:CommandButton 1-2 Caption CommandButton 1:Entry Data Caption CommandButton 2:View Grafik
3 ListBox	Name:ListBox 1-3
1 PictureBox	Name:PBLineChart
4 Label	Name: Label 1-4 Caption Label1: Data X Caption Label2: Data Y Caption Label3: Inputkan Data Caption Label4: Pilih Posisi Coordinat Data
1 TextBox	Name: TextBox1

Desain Form dari ToolBox di atas perhatikan gambar di bawah ini.



Setelah Anda mendesain Form di atas dengan mengatur setiap properties yang di miliki oleh setiap object ToolBox. Ketikkan source program di bawah ini dengan mengarahkan kursor pada design Form, Klik kanan lalu pilih View Code.
Source Program:

'+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++'
' V. Hutabalian's Blog INPUT LISTBOX Vs PLOTTING (X,Y) Vs PICTUREBOX '
'======================================================================='
' Entry Data Pada ListBox dengan 2 masukan X dan Y '
' Berbagi ilmu Sensasi Kepuasan Tersendiri '
' Programming by: Verynandus Hutabalian '
' Publish to V. Hutabalian's Blog 7 Mei 2010 '
'+++++++++++++++++++++++========================++++++++++++++++++++++++'
Imports System.Drawing.Drawing2D
Public Class Form1
Dim LeftMargin As Integer = 35
Dim RightMargin As Integer = 15
Dim BaseMargin As Integer = 35
Dim TopMargin As Integer = 10
Dim VertLineLength As Integer
Dim BaseLineLength As Integer
Dim LineWidth As Double
Dim g As Graphics
Dim bmap As Bitmap
Private Sub TextBox1_Validated(ByVal sender As Object, ByVal e As System.EventArgs)
If IsNumeric(TextBox1.Text) = False Then
MsgBox("Harus Karakter Angaka", MsgBoxStyle.Exclamation)

End If
End Sub
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
If ListBox3.Text = "" Then
MsgBox("Pilih Data Yang Terlebih dulu di Inputkan", MsgBoxStyle.Exclamation)

End If
If ListBox3.Text = "Data X" Then
If TextBox1.Text = "" Then
MsgBox("Masukkan Data X")
Else
ListBox1.Items.Add(TextBox1.Text)
TextBox1.Focus()
End If

End If
If ListBox3.Text = "Data Y" Then
If TextBox1.Text = "" Then
MsgBox("Masukkan Data Y")
Else
ListBox2.Items.Add(TextBox1.Text)
TextBox1.Focus()
End If
End If

End Sub


Private Sub DrawOutline()
bmap = New Bitmap(PBLineChart.Width, PBLineChart.Height, PBLineChart.CreateGraphics)
g = Graphics.FromImage(bmap)
Dim StartPoint As New Point(LeftMargin, PBLineChart.Height - BaseMargin)
Dim EndPoint As New Point(LeftMargin, TopMargin)
Dim LinePen As New Pen(Color.Red, 2)
g.DrawLine(LinePen, StartPoint, EndPoint)
Dim VertLineLength As Integer = PBLineChart.Height - (BaseMargin + TopMargin)
Dim VertGap As Integer = CInt(VertLineLength / 10)
Dim TickSP As New Point(LeftMargin - 5, StartPoint.Y - VertGap)
Dim TickEP As New Point(LeftMargin, StartPoint.Y - VertGap)
Dim ValueFont As New Font("Arial", 8, FontStyle.Regular)
For i As Integer = 1 To 10
g.DrawLine(New Pen(Color.Black), TickSP, TickEP)
g.DrawString(CStr(i * 10), ValueFont, Brushes.Red, 2, TickSP.Y - 5)
TickSP.Y -= VertGap
TickEP.Y -= VertGap
Next
g.DrawLine(LinePen, LeftMargin, PBLineChart.Height - BaseMargin, PBLineChart.Width - RightMargin, PBLineChart.Height - BaseMargin)
End Sub
Private Sub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
DrawOutline()
DrawHorizontalLines()
DrawVerticalGridLines()
DrawTheLine()
ShowMonths()
FinalDisplay()
End Sub
Private Sub DrawTheLine()
Dim MyPath As New GraphicsPath
Dim MyPen As Pen = New Pen(Color.Blue, 3)
g.DrawPath(MyPen, MyPath)
Dim VertScale As Double
Dim VertLineLength As Integer = PBLineChart.Height - (BaseMargin + TopMargin)
Dim XPosStart As Integer = CInt(LeftMargin + 30)
VertScale = VertLineLength / 100

Dim XPosEnd As Integer = CInt(XPosStart + LineWidth)

Dim s(ListBox2.Items.Count) As String
Dim al As New ArrayList

ListBox2.Items.CopyTo(s, 0)

al = New ArrayList(s)

Me.ListBox2.DataSource = al
Dim YPosStart As Integer = CInt(s(0) * VertScale)
Dim YPosEnd As Integer = CInt(s(1) * VertScale)
MyPath.AddEllipse(XPosStart - 2, YPosStart - 2, 4, 4)
MyPath.AddLine(XPosStart, YPosStart, XPosEnd, YPosEnd)
For i As Integer = 1 To UBound(s) - 2
XPosStart = XPosEnd
XPosEnd = CInt(XPosStart + LineWidth)
YPosStart = YPosEnd
YPosEnd = CInt(s(i + 1) * VertScale)

MyPath.AddEllipse(XPosStart - 2, YPosStart - 2, 4, 4)
MyPath.AddLine(XPosStart, YPosStart, XPosEnd, YPosEnd)
Next


MyPath.AddEllipse(XPosEnd - 2, YPosEnd - 2, 4, 4)
g.RotateTransform(180)
g.ScaleTransform(-1, 1)
g.TranslateTransform(0, VertLineLength + 10, MatrixOrder.Append)
g.DrawPath(MyPen, MyPath)
g.ResetTransform()
End Sub
Private Sub FinalDisplay()
PBLineChart.Image = bmap
g.Dispose()
End Sub
Private Sub ShowMonths()
Dim TextStartX As Integer = CInt(LeftMargin + 18)
Dim TextBrsh As Brush = New SolidBrush(Color.Red)
Dim TextFont As New Font("Arial", 10, FontStyle.Regular)
Dim s1(ListBox1.Items.Count) As String
Dim a2 As New ArrayList

ListBox1.Items.CopyTo(s1, 0)

a2 = New ArrayList(s1)

Me.ListBox1.DataSource = a2

For i As Integer = 1 To s1.Length- 1

g.DrawString(s1(i - 1), TextFont, TextBrsh, TextStartX, _
CInt(PBLineChart.Height - (BaseMargin - 4)))
TextStartX += CInt(LineWidth)
Next
End Sub
Private Sub DrawVerticalGridLines()

Dim ThinPen As New Pen(Color.LightGreen, 2)
Dim StartPoint As New Point(LeftMargin, PBLineChart.Height - BaseMargin)
Dim EndPoint As New Point(LeftMargin, TopMargin)
Dim LinePen As New Pen(Color.Red, 2)
Dim s(ListBox2.Items.Count) As String
Dim s1(ListBox1.Items.Count) As String

Dim al As New ArrayList
Dim a2 As New ArrayList

ListBox2.Items.CopyTo(s, 0)
ListBox1.Items.CopyTo(s1, 0)

al = New ArrayList(s)
a2 = New ArrayList(s1)
Me.ListBox2.DataSource = al
Me.ListBox1.DataSource = a2


g.DrawLine(LinePen, StartPoint, EndPoint)
BaseLineLength = PBLineChart.Width - (LeftMargin + RightMargin)
LineWidth = (BaseLineLength / s.Length - 1)
Dim LineStartX As Integer = CInt(LeftMargin + 30)
For i As Integer = 1 To s1.Length - 1
g.DrawLine(ThinPen, LineStartX, TopMargin, LineStartX, PBLineChart.Height - (BaseMargin + 4))
LineStartX += CInt(LineWidth)
Next
ThinPen.Dispose()
End Sub
Private Sub DrawHorizontalLines()
Dim VertLineLength As Integer = PBLineChart.Height - (BaseMargin + TopMargin)
Dim VertGap As Integer = CInt(VertLineLength / 10)
Dim StartPoint As New Point(LeftMargin + 3, PBLineChart.Height - BaseMargin)
Dim EndPoint As New Point(PBLineChart.Width, PBLineChart.Height - BaseMargin)
Dim LineStart As New Point(StartPoint.X, StartPoint.Y - VertGap)
Dim LineEnd As New Point(EndPoint.X, StartPoint.Y - VertGap)
Dim ThinPen As New Pen(Color.LightGreen, 3)
For i As Integer = 1 To 10
g.DrawLine(ThinPen, LineStart, LineEnd)
LineStart.Y -= VertGap
LineEnd.Y -= VertGap
Next
ThinPen.Dispose()
End Sub

Private Sub PBLineChart_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PBLineChart.Paint
Dim ix As Integer = PBLineChart.Width
Dim iy As Integer = PBLineChart.Height
e.Graphics.DrawString("Coordinat-Y", New Font("Lucida Handwriting", 10, FontStyle.Regular), Brushes.Goldenrod, iy - 360, 6)
e.Graphics.DrawString("Coordinat-X", New Font("Lucida Handwriting", 10, FontStyle.Regular), Brushes.Goldenrod, iy + 20, 370)

e.Graphics.DrawString("V. HUTABALIAN'S Blog", New Font("Lucida Handwriting", 10, FontStyle.Regular), Brushes.Goldenrod, iy - 40, 6)
e.Graphics.DrawString("7 Mei 2010", New Font("Lucida Handwriting", 10, FontStyle.Regular), Brushes.Goldenrod, iy - 35, 20)


End Sub
End Class

Setelah Anda mengetikkan listing source program diatas tekan F5, maka hasil tampilan visualnya seperti gambar di bawah ini.


Entry Data di Coordinat Data X dan Y denga jumlah data yang sama, kemudian tekan tombol View Grafik tampilannya seperti gambar paling atas.

Artikel terkait mengenai Tips ini:
Grafik Dynamic Line Visual Basic 2008===>>Klik disini
ThreadGraph Dynamic Line Visual Basic 2008===>>Klik disini
Dynamic Line Plotting Data Random Visual Basic 2008===>>Klik disini
Grafik 2D PictureBox Visual Basic 2008===>>Klik disini

Aplikasi yang saya buat masih memiliki kelemahan antaralain:
1. Lebar grid pada Coordinat-X akan selalu sama, walaupun nantinya Anda menginput data dengan rentang yang berbeda-beda.
2. Data inputan pada Coordinat X tidak berurut dan akan di plotting pada pengulangan data yang sama.
3. Ketika Anda mengentery data yang baru, saya tidak menyediakan refresh pada Plotting grafik dan listbox sehingga Anda harus meng-close dan membuka kembali program untuk data entery baru.
4. Perlu pengembangan lebih lanjut dan saya berharap juga masukan dan kreasi dari teman-teman.

Walaupun aplikasi di atas memiliki beberapa kelemahan, namun aplikasi ini sudah dapat menunjukan bagaimana Plotting data pada Coordinat X terhadap Coordinat Y. Pengembangan lebih lanjut, disesuaikan dengan kebutuhan variasi data inputan Anda.

Selamat mencoba Guys! Nantikan Tips Aplikasi Cantik Lainnya by Verynandus Hutabalian.