C# How to draw a graph

C# How to draw a graph

Drawing and painting in C# are interesting areas that I am currently exploring (and having a lot of fun doing so) – below is a fairly basic example of C# code that simply draws a plain line graph with random values onto your form. This is useful to beginners as they can see how the graphics in C# is used and how it can be manipulated.

For the example below, I am using a panel called panel_Graphics where the graph can be drawn/painted on. You will need to create a panel with the same name for the below code to work, or you can update all of the references to the panel in the code. I broke the panel_Graphics_Paint() function into smaller functions so you can see what happens when you break the graph down into smaller objects (gridlines and value plotting).

I will revisit this project later to include more features such as making the graph responsive, using bitmaps, writing labels and shading of value areas.

Screenshots:

graph1

graph2

graph3

Code:

public partial class Form1 : Form
{
  int panelH, panelW; 

  // List to store random values
  List<int> values = new List<int>();

  // Grid Options
  Color gridColour = ColorTranslator.FromHtml("#cccccc");
  int gridWidth = 15;

  // Line Options
  Color lineColour = ColorTranslator.FromHtml("#000000"); 
  int lineWidth = 1;
   
  public Form1()
  {
    InitializeComponent();

    // Get values of the panel dimensions
    panelH = panel_Graphics.Height; 
    panelW = panel_Graphics.Width;  

    // Populate random values to be plotted on the graph
    populateRandomValues();
  }
   
  private void populateRandomValues()
  {
    Random rnd = new Random();
    for (int a = 0; a < panelW + gridWidth; a += gridWidth) 
    {
      values.Add(rnd.Next(0, panelH));
    }
  }

  private void drawGridLines()
  {
    using (Graphics g = this.panel_Graphics.CreateGraphics())
    {
      Pen grid = new Pen(gridColour);
      grid.Width = lineWidth;

      // Draw X gridlines (horizontal) 
      for (int a = 0; a < panelH; a += gridWidth)
      {
        Point point1 = new Point(0, a);
        Point point2 = new Point(panelW, a);
        g.DrawLine(grid, point1, point2);
      }

      // Draw Y gridlines (vertical)
      for (int a = 0; a < panelW; a += gridWidth)
      {
        Point point1 = new Point(a, 0); 
        Point point2 = new Point(a, panelH);
        g.DrawLine(grid, point1, point2);
      }

      grid.Dispose();
    } 
  }

  private void drawValueLines()
  {
    using (Graphics g = this.panel_Graphics.CreateGraphics())
    {
      Pen line = new Pen(lineColour);
      line.Width = lineWidth;

      // Draw value lines on graph
      int currentPos = 0; 
      for (int a = 0; a < values.Count; a++)
      {
        Point point1;
        Point point2;

        if (a == 0) // If first value then plot @ 0
        { 
          point1 = new Point(0, 0); // x, y 
          point2 = new Point(0, 0);
        }
        else // Plot last point and draw line to new point
        {
          point1 = new Point(currentPos - gridWidth, panelH - (values[a - 1]));  
          point2 = new Point(currentPos, panelH - values[a]);
        }

        g.DrawLine(line, point1, point2);
        currentPos += gridWidth;
      }
      line.Dispose();
    } 
  }

  private void panel_Graphics_Paint(object sender, PaintEventArgs e)
  {
    drawGridLines();
    drawValueLines();
  }

}

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>