none
How to Draw A GraphPaper Type Grid Using System.Windows.Forms.DataVisualization.Charting Control in VB.Net RRS feed

  • Question

  • I am using Visual Studio 2017 in VB.Net. I am using code from  another question answered by TnTinMN


     titled "Draw lines on Charts with Mouse Movements in Visual Basic " My idea is to have a graphpaper background that I can add lines with mouse movements to make a rectangle, and add text inside a rectangles I made, Then save everything to a .jpg.  Using his example, I made the graph, added text, added lines started at mouse point.  The problem is that his example makes a graph with just two columns and is graduated. I only want a graph made up of many columns and many rows as on a piece of graph paper.  Is that possible to do? Thank you for your help.   here is the code Is started with ...

    'Add Project Reference to: System.Windows.Forms.DataVisualization
    Imports System.Windows.Forms.DataVisualization.Charting
    
    Public Class Form1
       Dim WithEvents Chart1 As New Chart
       Dim ChartArea1 As New System.Windows.Forms.DataVisualization.Charting.ChartArea()
       Dim Legend1 As New System.Windows.Forms.DataVisualization.Charting.Legend()
       Dim Series1 As New System.Windows.Forms.DataVisualization.Charting.Series()
    
       Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
          With Chart1
             .ChartAreas.Add(ChartArea1)
             .Legends.Add(Legend1)
             .Location = New System.Drawing.Point(5, 5)
             .Name = "Chart1"
             .Series.Add(Series1)
             .Size = New System.Drawing.Size(300, 200)
             .Text = "Chart1"
             .BackColor = Color.Aquamarine
             .Parent = Me
          End With
          With Series1
             .ChartArea = "ChartArea1" : .Legend = "Legend1" : .Name = "Series1"
             .ChartType = SeriesChartType.Point Or SeriesChartType.Line
             .Points.AddXY(0, 0) : .Points.AddXY(3, 3)
             .MarkerStyle = MarkerStyle.Diamond : .MarkerSize = 10
             .XAxisType = AxisType.Primary : .YAxisType = AxisType.Primary
             .XValueType = ChartValueType.Single : .YValueType = ChartValueType.Single
          End With
          ChartArea1.Name = "ChartArea1"
          Legend1.Name = "Legend1"
       End Sub
    
       Private Structure LineEndPoints
          Dim StartPoint As Point
          Dim endPont As Point
       End Structure
    
       Private LinesList As New List(Of LineEndPoints)
       Private FirstPoint As Point
       Private TempPoint As Point
    
       Private Sub Chart1_MouseDown( _
                                   ByVal sender As Object, _
                                   ByVal e As System.Windows.Forms.MouseEventArgs) _
                                   Handles Chart1.MouseDown
    
          FirstPoint = New Point(e.X, e.Y)
          TempPoint = New Point(e.X, e.Y)
       End Sub
    
       Private Sub Chart1_MouseMove( _
                                  ByVal sender As Object, _
                                  ByVal e As System.Windows.Forms.MouseEventArgs) _
                                  Handles Chart1.MouseMove
          If Not FirstPoint = Nothing Then
             Dim g As Graphics = Chart1.CreateGraphics
             Dim ErasePen As Pen = New Pen(Me.BackColor)
             g.DrawLine(ErasePen, FirstPoint, TempPoint)
             TempPoint = New Point(e.X, e.Y)
             Me.Refresh()
          End If
       End Sub
    
       Private Sub Chart1_MouseUp( _
                                  ByVal sender As Object, _
                                  ByVal e As System.Windows.Forms.MouseEventArgs) _
                                  Handles Chart1.MouseUp
          Dim Line As New LineEndPoints With {.StartPoint = FirstPoint, .endPont = New Point(e.X, e.Y)}
          LinesList.Add(Line)
          FirstPoint = Nothing
          Me.Refresh()
       End Sub
    
       Private Sub Chart1_Paint( _
                               ByVal sender As Object, _
                               ByVal e As System.Windows.Forms.PaintEventArgs) _
                               Handles Chart1.Paint
          For Each line As LineEndPoints In LinesList
             e.Graphics.DrawLine(Pens.Black, line.StartPoint, line.endPont)
          Next
          If Not FirstPoint = Nothing Then
             e.Graphics.DrawLine(Pens.Black, FirstPoint, TempPoint)
          End If
       End Sub
    
    End Class


    Saturday, January 18, 2020 3:19 AM

All replies

  • Hi

    I am unsure that I understand your question. It *could* be that you do not actually want to graph anything as such, instead, trying to use a graph to create a grid for drawing on.

    If my understanding is correct, then here is some code to aid in generating a  background Grid. This is just that, a background Grid and has no Snap included (which can be made), and, no rubber band lines (which can be made)

    This code is a stand alone example. Setup the parameters at the top Grid size, Box size and margins top and left. If it suits, then it can easily be incorporated into any other code.

    I suspect that this is not what you want, if so, then just ignore.

    ' blank Form1
    Option Strict On
    Option Explicit On
    Public Class Form1
    	' how many across and down
    	Dim gridsize As New Point(20, 20)
    	' each cell size
    	Dim boxes As New Point(40, 20)
    	' start offsets - across and down
    	Dim start As New Point(60, 120)
    
    	Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles MyBase.Paint
    		For i As Integer = 0 To gridsize.X - 1
    			For j As Integer = 0 To gridsize.Y - 1
    				e.Graphics.DrawRectangle(Pens.Gray, New Rectangle(i * boxes.X + start.X, j * boxes.Y + start.Y, boxes.X, boxes.Y))
    			Next
    		Next
    	End Sub
    End Class


    Regards Les, Livingston, Scotland

    Saturday, January 18, 2020 5:30 AM
  • " have a graphpaper background that I can add lines with mouse movements to make a rectangle, and add text inside a rectangles I made, Then save everything to a .jpg. "

    Show an image of exactly what you need to draw and describe the purpose of application.

    Looking at your example, you dont need the chart control just to draw text and rectangles. In fact, using the chart control for mouse drawing like the example is very hard. Chart control is for showing data charts not drawing with the mouse.

    All you need to do is draw your own image on a picturebox like Les shows. You can make the grid any size and increment. Make the drawing any scale. Zoom in and out. etc. Then you can save that as a .jpg or other format bitmap image.

    Here are some recent interactive mouse drawing examples with a grid you can change how you like.

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/0e94d3d1-1de0-4e1d-a6f2-84cb51df7316/how-i-can-draw-grid-lines-on-picture-box-and-then-draw-by-mouse-lines-between-grids-snap-at?forum=vbgeneral

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/1d916047-e3d3-41da-8f1f-08957b5217ec/zoom-window-in-that-picture-box-by-mouse?forum=vbgeneral


    Saturday, January 18, 2020 8:54 AM
  • PS I added the details of the ChartAreas setup in the form load of your chart example. You can see the grid change in the images below.

    See where I added the With Chart1.ChartAreas(0) code in the form load of your example code below?

    Before the chart control autogrid makes this from your example.

     

    After adding a grid defined from 0 to 10 and 1 unit increment to the chart:

       Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            With Chart1
                .ChartAreas.Add(ChartArea1)
                .Legends.Add(Legend1)
                .Location = New System.Drawing.Point(5, 5)
                .Name = "Chart1"
                .Series.Add(Series1)
                .Size = New System.Drawing.Size(300, 200)
                .Text = "Chart1"
                .BackColor = Color.Aquamarine
                .Parent = Me
    
            End With
    
            With Chart1.ChartAreas(0)
                .AxisX.Interval = 1
                .AxisX.MajorGrid.LineColor = Color.LightGray
                .AxisX.Minimum = 0
                .AxisX.Maximum = 10
                .AxisX.Title = "X Axis"
    
                .AxisY.Interval = 1
                .AxisY.Minimum = 0
                .AxisY.Maximum = 10
                .AxisY.Title = "Y Axis"
            End With
    
    
            With Series1
                .ChartArea = "ChartArea1" : .Legend = "Legend1" : .Name = "Series1"
                .ChartType = SeriesChartType.Point Or SeriesChartType.Line
                .Points.AddXY(0, 0) : .Points.AddXY(3, 3)
                .MarkerStyle = MarkerStyle.Diamond : .MarkerSize = 10
                .XAxisType = AxisType.Primary : .YAxisType = AxisType.Primary
                .XValueType = ChartValueType.Single : .YValueType = ChartValueType.Single
            End With
            ChartArea1.Name = "ChartArea1"
            Legend1.Name = "Legend1"
        End 


    Saturday, January 18, 2020 9:18 AM
  • Hi,

    Did you resolve the issue? If you have resolved the issue then please mark the post or posts that helped you as The Answer using the Mark as Answer link at the bottom of the post. Marking answers will help other community members find solutions in the future.

    Best Regards,

    Julie


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, January 20, 2020 8:23 AM
    Moderator