Graph GDI Data Plot VB 2008

Tips kali ini membuat Grafik Plotting Data Random. Tampilan visualnya seperti gambar di atas.

Ikuti langkah-langkah di bawah ini. ToolBox yang digunakan sebagai berikut:

Design Form dari ToolBox di atas seperti gambar di bawah ini:

Ketikkan source program di bawah ini dengan mengarahkan kursor pada design Form, Klik kanan lalu pilih View Code.

Source Program:

Public Class GdiGraphExample

REM Grafik akan langsung Loading
Private Sub GdiGraphExample_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

REM Nilai pada X-axis
REM Nilai dalam bentuk text as string
Dim rpmRange() As String = New String() {"0", "3", "6", "9", "12", "15", "18", "21", "24", "27"}

REM Nilai pada Y-Axis
REM Dictionary sebagai String dan Double-Array
Dim captureData As New Dictionary(Of String, Double())

REM Load data dari values untuk di plot codenya sebagai berikut
captureData.Add("6", New Double() {0.0, 0.2, 0.6, 1.4, 2.5, 3.9, 5.7, 7.7, 10.1, 12.8})
captureData.Add("9", New Double() {0.0, 0.3, 1.0, 2.3, 4.0, 6.3, 9.1, 12.4, 16.1, 20.4})
captureData.Add("12", New Double() {0.0, 0.3, 1.4, 3.1, 5.5, 8.7, 12.5, 17.0, 22.2, 28.1})
captureData.Add("15", New Double() {0.0, 0.4, 1.8, 4.0, 7.1, 11.0, 15.9, 21.6, 28.2, 35.7})
captureData.Add("18", New Double() {0.0, 0.5, 2.1, 4.8, 8.6, 13.4, 19.3, 26.2, 34.3, 43.4})
captureData.Add("21", New Double() {0.0, 0.6, 2.5, 5.7, 10.1, 15.8, 22.7, 30.9, 40.3, 51.0})
captureData.Add("24", New Double() {0.0, 0.7, 2.9, 6.5, 11.6, 18.1, 26.1, 35.5, 46.4, 58.7})

REM membuat array warna pada graph line
Dim lineColors() As Color = New Color() {Color.LightSkyBlue, Color.ForestGreen, Color.Red, _
Color.Navy, Color.Orange, Color.SlateBlue, Color.Orchid}

REM membuat brapa besar kanvas graph linenya
Dim graphImage As New Bitmap(400, 300, Imaging.PixelFormat.Format32bppRgb)

ClientSize = graphImage.Size
CenterToScreen()

RenderGraph(graphImage, rpmRange, captureData, Me.Font, 0.0, 60.0, 10.0, "HP-Electric", "RPM (x1000)", Color.LightGray, lineColors)

BackgroundImageLayout = ImageLayout.Center
BackgroundImage = graphImage

End Sub

Private Sub RenderGraph(ByVal destImage As Image, ByVal xAxisCaptions() As String, _
ByVal yAxisDatum As Dictionary(Of String, Double()), ByVal textFont As Font, _
ByVal yAxisMin As Double, ByVal yAxisMax As Double, ByVal yAxisIncrement As Double, _
ByVal yAxisTitle As String, ByVal xAxisTitle As String, _
ByVal chartColor As Color, ByVal lineColors() As Color)

Dim gfx As Graphics = Graphics.FromImage(destImage)

Dim canRenderGraph As Boolean = False

REM plot pada sumbu X- axis
If xAxisCaptions.Count > 0 Then
REM plot pada sumbu Y- axis
If yAxisDatum.Count > 0 Then

For Each datum() As Double In yAxisDatum.Values
If Not xAxisCaptions.Count = datum.Length Then
canRenderGraph = False
Exit For
End If
Next

canRenderGraph = True
End If
End If

If canRenderGraph Then

Dim blackBrush As New SolidBrush(Color.Black)
Dim blackPen As New Pen(Color.Black)

gfx.Clear(Color.White)

Dim yCaptionMax As SizeF = gfx.MeasureString(yAxisMax.ToString("N1"), textFont)

Dim yTitleSize As SizeF = gfx.MeasureString(yAxisTitle, textFont)

Dim yTickLength As Integer = 10


Dim xCaptionLast As SizeF = gfx.MeasureString(xAxisCaptions(xAxisCaptions.Length - 1), textFont)

Dim xTitleSize As SizeF = gfx.MeasureString(xAxisTitle, textFont)

Dim xTickLength As Integer = 8


Dim graphOffsetX As Integer = CInt(yTitleSize.Height + yCaptionMax.Width + yTickLength + 1)
Dim graphOffsetY As Integer = CInt(Math.Ceiling(yCaptionMax.Height / 2))
Dim graphOffsetHeight As Integer = CInt(xTitleSize.Height + xCaptionLast.Height + xTickLength + 1)
Dim graphOffsetWidth As Integer = CInt(Math.Ceiling(xCaptionLast.Width / 2))


gfx.TranslateTransform(0, destImage.Height)
gfx.RotateTransform(270)


Dim yTitleX As Integer = CInt(Math.Round((destImage.Height / 2) - (yTitleSize.Width / 2)))
gfx.DrawString(yAxisTitle, textFont, blackBrush, yTitleX, 0)


gfx.DrawLine(blackPen, graphOffsetHeight - 1, graphOffsetX - 1, destImage.Height - graphOffsetY, graphOffsetX - 1)

Dim yTickCount As Integer = CInt((yAxisMax - yAxisMin) / yAxisIncrement)
Dim yTickGap As Double = Math.Ceiling((destImage.Height - graphOffsetY - graphOffsetHeight) / yTickCount)

For i As Integer = 0 To yTickCount
Dim ix As Integer = CInt((yTickGap * i) + graphOffsetHeight - 1)
gfx.DrawLine(blackPen, ix, CInt(graphOffsetX - 1 - yAxisIncrement), ix, graphOffsetX - 1)
Next


gfx.ResetTransform()


Dim cnt As Integer = 0
For i As Double = yAxisMax To 0.0 Step (yAxisIncrement * -1)
gfx.DrawString(i.ToString("N1"), textFont, blackBrush, yTitleSize.Height, CSng(cnt * yTickGap))
cnt += 1
Next


Dim xTitleX As Integer = CInt(Math.Round((destImage.Width / 2) - (xTitleSize.Width / 2)))
gfx.DrawString(xAxisTitle, textFont, blackBrush, xTitleX, CSng(destImage.Height - xTitleSize.Height))


Dim xAxisY As Integer = CInt(destImage.Height - graphOffsetHeight + 1)
Dim xAxisWidth As Integer = CInt(destImage.Width - graphOffsetX - (graphOffsetWidth * 2))
Dim yAxisHeight As Integer = CInt(destImage.Height - graphOffsetY - graphOffsetHeight - 1)


gfx.DrawLine(blackPen, graphOffsetX, xAxisY, graphOffsetX + xAxisWidth + CInt(graphOffsetWidth / 2), xAxisY)

Dim xTickGap As Double = Math.Ceiling(xAxisWidth / (xAxisCaptions.Length - 1))

For i As Double = 0 To xAxisCaptions.Count - 1
Dim ix As Integer = CInt(Math.Floor(xTickGap * i) + graphOffsetX - 1)
gfx.DrawLine(blackPen, ix, xAxisY, ix, xAxisY + xTickLength)
Next


For i As Integer = 0 To xAxisCaptions.Count - 1
Dim capStr As String = xAxisCaptions(i)
Dim capSize As SizeF = gfx.MeasureString(capStr, textFont)
gfx.DrawString(capStr, textFont, blackBrush, CSng((graphOffsetX - (capSize.Width / 2)) + (i * xTickGap)), xAxisY + xTickLength)
Next


Dim graphBrush As New SolidBrush(chartColor)
gfx.FillRectangle(graphBrush, New Rectangle(graphOffsetX, graphOffsetY - 1, CInt(xAxisWidth + (graphOffsetWidth / 2)), yAxisHeight + 3))
graphBrush.Dispose()


gfx.TranslateTransform(graphOffsetX, destImage.Height - graphOffsetHeight)
cnt = 0
For Each datum() As Double In yAxisDatum.Values
Dim dstPoints As New List(Of PointF)
For i As Integer = 0 To datum.Length - 1

dstPoints.Add(New PointF(CSng(i * xTickGap), CSng((datum(i) / yAxisMax) * yAxisHeight * -1)))
Next

Dim linePen As New Pen(lineColors(cnt), 2)
cnt += 1

Dim pth As New System.Drawing.Drawing2D.GraphicsPath
pth.AddLines(dstPoints.ToArray)
gfx.DrawPath(linePen, pth)
linePen.Dispose()
Next


gfx.ResetTransform()
blackBrush.Dispose()
blackPen.Dispose()
Else
Dim errMsg As String = "Grafik tidak dapat menampilkan data."
Dim errFont As New Font("Verdana", 14, FontStyle.Bold)
Dim msgSize As SizeF = gfx.MeasureString(errMsg, errFont, destImage.Width)
Dim msgX As Single = CSng(Math.Round((destImage.Width / 2) - (msgSize.Width / 2)))
Dim msgY As Single = CSng(Math.Round((destImage.Height / 2) - (msgSize.Height / 2)))

gfx.DrawString(errMsg, errFont, Brushes.Red, New RectangleF(msgX, msgY, msgSize.Width, msgSize.Height))
End If

gfx.Dispose()
End Sub

End Class

Setelah mengetikkan listing dari source program diatas tekan F5, maka hasil tampilan visualnya paling atas.

Artikel Yang berkaitan tentang Dynamic Line Klik di bawah ini:
Grafik 2D PictureBox V Basic 2008

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