Creating a GDI+ Line Chart Application in VB.NET

In this article I will explain how to create a line chart in GDI+.
  • 3879

As promised, the examples in this article not only show the use of GDI+, but also encourage you to use GDI+ practices in real-world applications. We will create one more real-world application, a line chart application. In this example we will use all the functionality we have discussed so far. Our line chart application will draw lines when a user clicks on a form.

We create a Windows application and add a check box and a button. Then we change the Text properties of the button and the check box to call them Clear All and Rectangle, repetitively. Then we add code to draw two lines and some numbers (using the DrawString method). The initial screen of the line chart application looks like figure 3.9.

fig3_9.gif

FIGURE 3.9: The line chart application.

When you click on the form, the application draws a line. The first line starts from the bottom left corner, where the values of our x- and y-axes are both 0. After a few clicks, the chart looks like Figure 3.10. Every time you click on the form, the application draws a line from the previous point to the current point and draws a small ellipse representing the current point.

The Clear All button removes the lines and initializes the first point to (0, 0). Now if you check the Rectangle box and click on the form, the chart looks like Figure 3.11. When you click the left mouse button for the first time, the application draws a line from point (0, 0) to the point where you clicked the button.

Now let's see the code. First we declare starting and ending points. These points will be used to draw a line when you click the left mouse button. The default values of both points are shown in the following code fragment, which represents position (0, 0) on the screen:


        Private startPoint As New Point(50, 217)
        Private endPoint As New Point(50, 217)

fig3_10.gif

FIGURE 3.10: The line chart application with a chart

fig3_11.gif

FIGURE 3.11: The line chart with rectangles to mark point

The next step is to draw vertical and horizontal axis lines with index numbers. We do this on the form's paint event handler with the help of the DrawString method. Listing 3.8 provides code for the form-paint event handler. As the listing shows, we simply draw a vertical line, a horizontal line, and the marks on these lines.

LISTING 3.8: Drawing lines and marks


  Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
 
        Dim g As Graphics = e.Graphics
        Dim vertFont As New Font("Verdana", 10, FontStyle.Bold)
        Dim horzFont As New Font("Verdana", 10, FontStyle.Bold)
        Dim vertBrush As New SolidBrush(Color.Black)
        Dim horzBrush As New SolidBrush(Color.Blue)
        Dim blackPen As New Pen(Color.Black)
        Dim bluePen As New Pen(Color.Blue)

        ' Drawing a vertical and a horizontal line
        g.DrawLine(blackPen, 50, 220, 50, 25)
        g.DrawLine(bluePen, 50, 220, 250, 220)
        ' x-axis drawing
        g.DrawString("0", horzFont, horzBrush, 30, 220)
        g.DrawString("1", horzFont, horzBrush, 50, 220)
        g.DrawString("2", horzFont, horzBrush, 70, 220)
        g.DrawString("3", horzFont, horzBrush, 90, 220)
        g.DrawString("4", horzFont, horzBrush, 110, 220)
        g.DrawString("5", horzFont, horzBrush, 130, 220)
        g.DrawString("6", horzFont, horzBrush, 150, 220)
        g.DrawString("7", horzFont, horzBrush, 170, 220)
        g.DrawString("8", horzFont, horzBrush, 190, 220)
        g.DrawString("9", horzFont, horzBrush, 210, 220)
        g.DrawString("10", horzFont, horzBrush, 230, 220)

        'Draw vertical strings
        Dim vertStrFormat As New StringFormat()
        vertStrFormat.FormatFlags = StringFormatFlags.DirectionVertical
        g.DrawString("-", horzFont, horzBrush, 50, 212, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 70, 212, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 90, 212, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 110, 212, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 130, 212, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 150, 212, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 170, 212, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 190, 212, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 210, 212, vertStrFormat)
        g.DrawString("-", horzFont, horzBrush, 230, 212, vertStrFormat)

        ' y-axis drawing
        g.DrawString("100 -", vertFont, vertBrush, 20, 20)
        g.DrawString("90 -", vertFont, vertBrush, 25, 40)
        g.DrawString("80 -", vertFont, vertBrush, 25, 60)
        g.DrawString("70 -", vertFont, vertBrush, 25, 80)
        g.DrawString("60 -", vertFont, vertBrush, 25, 100)
        g.DrawString("50 -", vertFont, vertBrush, 25, 120)
        g.DrawString("40 -", vertFont, vertBrush, 25, 140)
        g.DrawString("30 -", vertFont, vertBrush, 25, 160)
        g.DrawString("20 -", vertFont, vertBrush, 25, 180)
        g.DrawString("10 -", vertFont, vertBrush, 25, 200)

        ' Dispose of objects
        vertFont.Dispose()
        horzFont.Dispose()
        vertBrush.Dispose()
        horzBrush.Dispose()
        blackPen.Dispose()
        bluePen.Dispose()

    End Sub

Note:

The idea in Listing 3.8 is to show an extensive use of the DrawString method. Alternatively and preferably, you could replace DrawString with the DrawLine and / or DrawLines method.

Now on the mouse-down event handler, we draw a line from the starting point (0, 0) to the first mouse click. We store the mouse click position as the starting point for the next line. When we click again, the new line will be drawn from the current starting position to the point where the mouse was clicked. Listing 3.9 shows the mouse-down click event handler. We create a new Graphics object using the CreateGraphics method. After that we create two Pen objects. We store the previous point as the starting point and the current point as the ending point. The x and y properties of MouseEventArgs return the x- and y-values of the point where the mouse was clicked.

Now we check to see if the Rectangle check box is checked. If so, we draw a rectangle to mark the connecting point to the two lines. If not, we draw an ellipse as the connecting point.

LISTING 3.9: The mouse-down event handler

    Private Sub Form1_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseDown
        If e.Button = MouseButtons.Left Then
            'Create a Graphics object
            Dim g1 As Graphics = Me.CreateGraphics()

            ' Create two pens
            Dim linePen As New Pen(Color.Green, 1)
            Dim ellipsePen As New Pen(Color.Red, 1)
            startPoint = endPoint
            endPoint = New Point(e.X, e.Y)

            ' Draw the line from the current point
            ' to the new point

           g1.DrawLine(linePen, startPoint, endPoint)

             ' If rectangle check box is checked,
            ' draw a rectangle to represent the point
            If checkBox1.Checked Then
                g1.DrawRectangle(ellipsePen, e.X - 2, e.Y - 2, 4, 4)
            Else

                ' Draw a circle to represent the point
                g1.DrawEllipse(ellipsePen, e.X - 2, e.Y - 2, 4, 4)
            End If

            'Dispose of objects
            linePen.Dispose()
            ellipsePen.Dispose()
            g1.Dispose()
        End If
    End Sub
 

The Clear All button removes all the lines by invalidating the form's client are and sets the starting and ending points back to their initial values. Code for the Clear All button click handler is given in Listing 3.10.

LISTING 3.10: The Clear All button click event handler


    Private Sub button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        startPoint.X = 50
        startPoint.Y = 217
        endPoint.X = 50
        endPoint.Y = 217
        Me.Invalidate(Me.ClientRectangle)
    End Sub

Conclusion

Hope the article would have helped you in understanding how to draw a line chart in GDI+. Read other articles on GDI+ on the website.

Categories

More Articles

© 2018 DotNetHeaven. All rights reserved.