Click here to Skip to main content
15,868,164 members
Articles / Desktop Programming / Windows Forms

A Simple Graph Control

Rate me:
Please Sign up or sign in to vote.
4.87/5 (15 votes)
5 Mar 2010CPOL3 min read 101.5K   11.7K   95   28
A simple control to draw graphs of points as a function of time
GraphControl_src

Introduction

Here's yet another graph control. I had to write it because I did not find any other easy to use Graph control which met my needs. This one may be the one you are looking for. I think the code is quite fast too.

This code is not too heavy, you can easily integrate it into your project. This code can also be used as a separate module that you can link to your own project.

Using the Code

First of all, add the using clause:

C#
using WindowsFormsControlLibrary;

Creating the Control

The first thing to do is to create an instance of the control.

There are three constructors:

  • The default constructor public GraphControl() using Arial fonts, as follows:
  • C#
    _CurveFont = new Font("Arial", 15);
    _CurveLegendFont = new Font("Arial", 10);
    _AxeFont = new Font("Arial", 8);
  • Another constructor allowing to specify your fonts:
  • C#
    public CurveControl(Font TitleFont, Font CurveLegendFont, Font AxeFont)
  • A third constructor allowing to specify your fonts and the format to use on the horizontal axis to display the Date and Time which defaults to "ddd MMM-d hh:mm" in the 2 first constructors and if the provided format is invalid:
  • C#
    public GraphControl(Font TitleFont, Font GraphLegendFont, 
    			Font AxeFont, string DTFormat)

The Graph control can then be created as follows:

C#
//Create a Graph Control
GraphCtrl = new GraphControl(new Font("Arial", 12), 
		new Font("Arial", 10), new Font("Arial", 8));
GraphCtrl.TabIndex = 0;
GraphCtrl.Dock = DockStyle.Fill;
GraphCtrl.Name = "Graph 1";

//Add Graph Control to the form or a panel on the form
GraphPanel.Controls.Add(GraphCtrl);

Adding Series

The Graph control contains three main properties:

  • A dictionary of a series of points
  • The primary axis
  • The secondary axis

It is needed to add (create) the series of points which will be empty at the beginning. To do so, call the AddPointsSerie method:

C#
//Add series
GraphCtrl.AddPointsSerie("Serie1", Axes.VerticalPrimary, "Serie 1", Color.Blue);
GraphCtrl.AddPointsSerie("Serie2", Axes.VerticalPrimary, "Serie 2", Color.Orange);
GraphCtrl.AddPointsSerie("Serie3", Axes.VerticalSecondary, "Serie 3", Color.DarkGreen);

The AddPointsSerie method takes four parameters:

  • A key used to identify the series
  • The vertical axis used to display the series
  • The displayed label of the series
  • The color of the series

The axis is taken from the two vertical axes available in the Axes enum.

Adding Points

It is now needed to populate the series with the points.

To retrieve the series, use the GetPointsSerie method, then call one of the three AddPoint methods:

C#
GraphCtrl.GetPointsSerie("Serie1").AddPointD(dt.AddHours(i), y1);

The three AddPoint methods are:

  • C#
    public void AddPointF(DateTime t, float Y)
  • Add a point whose Y value is a float.

  • C#
    public void AddPointD(DateTime t, double Y)
  • Add a point whose Y value is a double.

  • C#
    public void AddPointS(DateTime t, string Y)
  • Add a point whose Y value is a float provided as a string. If an invalid string is given, the point is ignored.

Updating the Display

If anything is changed like adding points to series, for example, you need to Invalidate the control:

C#
CC.Invalidate();

Changing the Axis of a Series

It may be needed to change the axis a series is associated with. To do so, call the SetSerieAxe method:

C#
CC.SetSerieAxe("Serie2", Axes.VerticalPrimary);

Clearing a Series

C#
CC.GetPointsSerie("Serie2").ClearPointsArray();

Removing a Series

C#
CC.RemovePointsSerie("Serie2");

Printing and Copying to the Clipboard

It is possible to print the Graph or copy the Graph to the clipboard using the new method:

C#
public void DrawGraph(Graphics g, Rectangle bounds)

The method takes 2 parameters:

  • A Graphics object
  • A Rectangle to draw the Graph onto

Using the Method to Print

C#
private void PrintDocument1_PrintPage
	(object sender, System.Drawing.Printing.PrintPageEventArgs e)
{
   GraphCtrl.DrawGraph(e.Graphics, e.MarginBounds);
}

Using the Method to Copy to the Clipboard

C#
private void CopyToolStripMenuItem_Click(object sender, EventArgs e)
{
   Bitmap Bmp = new Bitmap(800, 400); Bmp.SetResolution(100, 100);
   Graphics g = Graphics.FromImage(Bmp);
   g.Clear(Color.White);
   GraphCtrl.DrawGraph(g, new Rectangle(new Point(0, 0), Bmp.Size));
   Clipboard.SetImage(Bmp);
}

Interactivity

Graph Displayed Name

The user has the ability to double click on the Graph displayed name to change it.

Serie Selection

Clicking on or close to a serie selects it.

History

  • February 25, 2010 - Article first published
  • March 3, 2010
    • Added capability to the control to re-draw itself when resized
    • Created a separated Draw function to allow its usage for Painting, Printing, Copying...
    • Changed default format to display dates on the horizontal axis and added a 3rd constructor to specify it if needed
    • Added MajorUnitDateTime in the GraphAxe class, not yet used
    • Renamed everything using Graph instead of Curve

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Other HP
France France
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionImporting the key file Pin
Paul G. Scannell4-Mar-20 5:53
Paul G. Scannell4-Mar-20 5:53 
QuestionGood Work....... Pin
Nirav Chauhan30-Jul-13 3:28
Nirav Chauhan30-Jul-13 3:28 
GeneralMy vote of 5 Pin
neoraltech25-May-13 1:02
neoraltech25-May-13 1:02 
Questionwell done Pin
Member 93476012-Sep-12 23:59
Member 93476012-Sep-12 23:59 
AnswerRe: well done Pin
slelong3-Sep-12 6:50
slelong3-Sep-12 6:50 
GeneralMy vote of 5 Pin
Gmust14-Sep-10 7:36
Gmust14-Sep-10 7:36 
Questionhow does it compare with System.Windows.Forms.DataVisualization.Charting ? Pin
Louis T Klauder Jr2-Mar-10 5:28
professionalLouis T Klauder Jr2-Mar-10 5:28 
AnswerRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? Pin
slelong2-Mar-10 20:06
slelong2-Mar-10 20:06 
GeneralRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? Pin
Louis T Klauder Jr3-Mar-10 3:33
professionalLouis T Klauder Jr3-Mar-10 3:33 
GeneralRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? Pin
slelong3-Mar-10 9:05
slelong3-Mar-10 9:05 
GeneralRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? Pin
Louis T Klauder Jr3-Mar-10 15:55
professionalLouis T Klauder Jr3-Mar-10 15:55 
GeneralRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? Pin
slelong5-Mar-10 6:49
slelong5-Mar-10 6:49 
GeneralEdit Name and selection Pin
slelong26-Feb-10 12:06
slelong26-Feb-10 12:06 
Generalrunable sample Pin
Mr.PoorEnglish26-Feb-10 2:35
Mr.PoorEnglish26-Feb-10 2:35 
GeneralRe: runable sample [modified] Pin
slelong26-Feb-10 6:31
slelong26-Feb-10 6:31 
GeneralRe: runable sample Pin
Mr.PoorEnglish26-Feb-10 9:40
Mr.PoorEnglish26-Feb-10 9:40 
Generalmatrix and graphicspath Pin
Mr.PoorEnglish26-Feb-10 10:28
Mr.PoorEnglish26-Feb-10 10:28 
GeneralRe: matrix and graphicspath Pin
slelong26-Feb-10 11:58
slelong26-Feb-10 11:58 
GeneralRe: runable sample Pin
slelong26-Feb-10 11:54
slelong26-Feb-10 11:54 
GeneralRe: runable sample Pin
Mr.PoorEnglish26-Feb-10 13:05
Mr.PoorEnglish26-Feb-10 13:05 
GeneralRe: runable sample Pin
slelong26-Feb-10 22:01
slelong26-Feb-10 22:01 
GeneralRe: runable sample Pin
Mr.PoorEnglish26-Feb-10 23:45
Mr.PoorEnglish26-Feb-10 23:45 
GeneralRe: runable sample Pin
slelong27-Feb-10 8:13
slelong27-Feb-10 8:13 
GeneralStrange article title man, its a graph Pin
Sacha Barber25-Feb-10 20:11
Sacha Barber25-Feb-10 20:11 
GeneralRe: Strange article title man, its a graph Pin
Xmen Real 26-Feb-10 4:08
professional Xmen Real 26-Feb-10 4:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.