How do I draw a grid in Visual Basic 2008 Express Edition and plot line with points?

I would like to be able to draw a sqaure grid that I could plot points of a line using a mouse.

The line will be drawn from the leftmost part of the grid to the rightmost point of the grid at anytime there is 2 or more points. If there is more than 2 points drawn the line will follow straight paths to each point from left to right until it connects to the rightmost point.

I would like to limit the points to be able to be placed ONLY on the intercection of the gridlines AND one point PER VERTICAL COLUMN (If a point is attempted to be created on the same column the old point will disapper and the new one will take its place on the column).

I will award 500 points for the best answer that works.

I have included a sample of a grid I would like to be able to match (except I would like the gridlines to be spaced equally - vertically as well as horizontally - so that the grid is squared)

LVL 21
NerdsOfTechTechnology ScientistAsked:
Who is Participating?
Mike TomlinsonConnect With a Mentor Middle School Assistant TeacherCommented:
Here is the "core" of can use Labels or seperate PictureBoxes for the X/Y axis labels.
Imports System.Drawing.Drawing2D
Public Class Form1
    Private GridDist As Integer = 25
    Private Points As New SortedList(Of Integer, Integer)
    Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        Dim x As Integer = Math.Round(e.X / GridDist) * GridDist
        Points(x) = Math.Round(e.Y / GridDist) * GridDist
    End Sub
    Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
        Dim gp As New GraphicsPath
        Dim pts As New List(Of Point)
        For Each pair In Points
            Dim pt As Point = New Point(pair.Key, pair.Value)
            Dim rc As New Rectangle(pt.X, pt.Y, 1, 1)
            rc.Inflate(3, 3)
        For x As Integer = GridDist To PictureBox1.Width Step GridDist
            e.Graphics.DrawLine(Pens.Black, x, 0, x, PictureBox1.Height)
        For y As Integer = GridDist To PictureBox1.Height Step GridDist
            e.Graphics.DrawLine(Pens.Black, 0, y, PictureBox1.Width, y)
        If Points.Count >= 2 Then
            e.Graphics.DrawLines(Pens.Red, pts.ToArray)
        End If
        e.Graphics.FillPath(Brushes.Red, gp)
        e.Graphics.DrawPath(Pens.Black, gp)
    End Sub
End Class

Open in new window

NerdsOfTechTechnology ScientistAuthor Commented:
Absolutely brilliant! Thank you so much. Full points award.

I will post another question and CONNECT it to here -- on how to make the grid confined to a certain amount of x-axis and y-axis range as well as output the VALUES of Y for the points.
Bob LearnedCommented:
I wonder if it would be better to generate the GraphicsPath once, and then re-use, instead of generating on every Paint event.
Mike TomlinsonMiddle School Assistant TeacherCommented:
There is certainly lots of room for improvement Bob!  In his follow-on questions, other experts have already suggested using a Class to hold the data so he can specify different types of "markers", colors, labels, data, etc.

This solution was really limited but I think it demonstrated some new concepts to the author...
NerdsOfTechTechnology ScientistAuthor Commented:
Thanks guys. I am learning and would love to see how a class works instead in the future. Maybe another question can answer that.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.