Plot a Graph in C# using ZedGraph

In today’s tutorial, I would like to show you how to plot a graph in Windows Form (C#) using the ZedGraph Library.
One of the many reasons why i like the ZedGraph is because of its support for .Net 2.0. With Support for .Net 2.0, you are sure your graph app would work on virtually any PC running Windows XP or Later. Also, as you would see in this tutorial, the ZedGraph library is really simple and fast to work with.

Firstly, download the dll (i used version 5.0.9 in this tutorial) from here, and unzip the contents. Basically, you need two files fromo the unzipped folder,

  1. ZedGraph.dll
  2. ZedGraph.Web.dll

Secondly, Create an empty Windows Form project in Visual Studio (i use 2013) in this tutorial, upon successful creation, Right-Click on the empty space under the General Tab in the Toolbox view and select “Choose Items”.

Choose Items in Visual Studio 2013

Choose Items in Visual Studio 2013

If you can’t find the Toolbox view, Enable it by clicking “View” from the top menu and selecting “Toolbox View”. Once the “Choose Toolbox Items” pops up, Click “Browse”, and navigate to the zedgraph.dll file. Once this file is added, you should see a ZedGraphControl option in the toolbox as shown in this image.
toolbox view showing newly added ZedGraphControl

toolbox view showing newly added ZedGraphControl


Drag the “ZedGraphControl” to the form. You can readjust as you please, but we would still set the size from the C# code. Feel free to rename the control, but take note of the name.
Now that we have our control on our form, we need to add a reference to the two dll files earlier mentioned in our project – ZedGraph.dll and ZedGraph.Web.dll
Having added that, we can code away..
As imagined, our graph would need one or more data sources, depending on the type of graph you want to plot. For the sake of this tutorial, lets say we are comparing two teams A and B, and we would like to plot the number of goals (on the Y-Axis) against the number of active years (on the X-Axis). As you would assume, both sets of data would be an array of integers, below is the code to populate the sample data set.

private int[] buildTeamAData()
        {
            int[] goalsScored = new int[10];
            for (int i = 0; i < 10; i++)
            {
                goalsScored[i] = (i + 1)*10;
            }
            return goalsScored;
        }

        private int[] buildTeamBData()
        {
            int[] goalsScored = new int[10];
            for (int i = 0; i < 10; i++)
            {
                goalsScored[i] = (i + 10) * 11;
            }
            return goalsScored;
        }

Now that we have our data set, we proceed to actually plot our graph to display the data sets created from the code above.
We would need to give the graph a title and label the axis, below is the code to do that

 GraphPane myPane = zedGraphControl1.GraphPane;
myPane.Title.Text = "Team A vs Team B Goal Analysis for 2014/2015 Season";
myPane.XAxis.Title.Text = "Year";
myPane.YAxis.Title.Text = "No of Goals";

Notice we made reference to a GraphPane class. This class is responsible for displaying the elements associated with an individual graph. Every visual item created to be displayed is attached to the GraphPane class, in our case, it is named myPane.
We proceed to create a PointPairList that would hold our two data sets. The PointPairList tells the GraphPane where the points of the graph are to appear in terms of the X and Y coordinates (it does technically more than that, but lets keep is simple).

PointPairList teamAPairList = new PointPairList();
            PointPairList teamBPairList = new PointPairList();
            int[] teamAData = buildTeamAData();
            int[] teamBData = buildTeamBData();
            for (int i = 0; i < 10; i++)
            {
                teamAPairList.Add(i, teamAData[i]);
                teamBPairList.Add(i, teamBData[i]);
            }

You would see that the add method of the PointPairList Class takes two parameters (Double data type) which is the X and Y coordinates.
Then we create our LineItem for each of the data set and add it to our pane. As you guessed, our LineItem actually displays the “curve” that connects the points in our data set.

 LineItem teamACurve = myPane.AddCurve("Team A",
                  teamAPairList, Color.Red, SymbolType.Diamond);

            LineItem teamBCurve = myPane.AddCurve("Team B",
                  teamBPairList, Color.Blue, SymbolType.Circle);

The SymbolType argument of the AddCurve is of the enum type with the following elements:
Square, Diamond, Triangle, Circle, XCross, Plus, Star, TriangleDown, HDash, VDash, Default, None.
We then call the AxisChange() method of the control which is only intended to handle auto scaling operations.

zedGraphControl1.AxisChange();

Remember i said earlier in this tutorial that we would set the size of the graph control from our code, here is a method to do that:

private void SetSize()
        {
            zedGraphControl1.Location = new Point(0, 0);
            zedGraphControl1.IsShowPointValues = true;
            // Leave a small margin around the outside of the control
            zedGraphControl1.Size = new Size(this.ClientRectangle.Width - 20, this.ClientRectangle.Height - 50);

        }

The IsShowPointValues attribute of the graph control in the code above allows the graph to render the point values in real time when you hover over a point in the graph.

We want to make sure that the size and aspect ration is maintained even when the form is re-sized, to achieve that, we need to call the SetSize() method when the form is re-sized.
And with that, we are done. Here is a screenshot of the output of the graph from this tutorial:

 Team A vs. Team B Graph

Team A vs. Team B Graph


Kindly note that ZedGraph provides a lot more functionalities to create a range of Graphs.
Find below the full code used in this tutorial.

using System;
using System.Drawing;
using System.Windows.Forms;
using ZedGraph;

namespace ZedGraphBlog
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            plotGraph();
            SetSize();
        }

        private int[] buildTeamAData()
        {
            int[] goalsScored = new int[10];
            for (int i = 0; i < 10; i++)
            {
                goalsScored[i] = (i + 1)*10;
            }
            return goalsScored;
        }

        private int[] buildTeamBData()
        {
            int[] goalsScored = new int[10];
            for (int i = 0; i < 10; i++)
            {
                goalsScored[i] = (i + 10) * 11;
            }
            return goalsScored;
        }

        private void plotGraph()
        {
            GraphPane myPane = zedGraphControl1.GraphPane;

            // Set the Titles
            myPane.Title.Text = "Team A vs Team B Goal Analysis for 2014/2015 Season";
            myPane.XAxis.Title.Text = "Year";
            myPane.YAxis.Title.Text = "No of Goals";
           /* myPane.XAxis.Scale.MajorStep = 50;
            myPane.YAxis.Scale.Mag = 0;
            myPane.XAxis.Scale.Max = 1000;*/

           PointPairList teamAPairList = new PointPairList();
            PointPairList teamBPairList = new PointPairList();
            int[] teamAData = buildTeamAData();
            int[] teamBData = buildTeamBData();
            for (int i = 0; i < 10; i++)
            {
                teamAPairList.Add(i, teamAData[i]);
                teamBPairList.Add(i, teamBData[i]);
            }
            
           LineItem teamACurve = myPane.AddCurve("Team A",
                  teamAPairList, Color.Red, SymbolType.Diamond);

            LineItem teamBCurve = myPane.AddCurve("Team B",
                  teamBPairList, Color.Blue, SymbolType.Circle);

            zedGraphControl1.AxisChange();
        }

        private void SetSize()
        {
            zedGraphControl1.Location = new Point(0, 0);
            zedGraphControl1.IsShowPointValues = true;           
            zedGraphControl1.Size = new Size(this.ClientRectangle.Width - 20, this.ClientRectangle.Height - 50);

        }

        private void Form1_Resize(object sender, EventArgs e)
        {
            SetSize();
        }
    }
}

Drop a comment if you encounter any problem with this tutorial.

  • enslaved46

    thanks myan.. it helped!!

  • Josh Anthony

    Thanks man! Official tutorial seems to be down, but this was enough to get me started!