Click here to Skip to main content
Click here to Skip to main content

A Simple Graph Control

, 5 Mar 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
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:

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:
  • _CurveFont = new Font("Arial", 15);
    _CurveLegendFont = new Font("Arial", 10);
    _AxeFont = new Font("Arial", 8);
  • Another constructor allowing to specify your fonts:
  • 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:
  • public GraphControl(Font TitleFont, Font GraphLegendFont, 
    			Font AxeFont, string DTFormat)

The Graph control can then be created as follows:

//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:

//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:

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

The three AddPoint methods are:

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

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

  • 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:

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:

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

Clearing a Series

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

Removing a Series

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:

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

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

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)

Share

About the Author

slelong
Other HP
France France
No Biography provided

Comments and Discussions

 
QuestionGood Work....... PinmemberNirav Chauhan30-Jul-13 4:28 
GeneralMy vote of 5 Pinmemberneoraltech25-May-13 2:02 
Questionwell done PinmemberMember 93476013-Sep-12 0:59 
AnswerRe: well done Pinmemberslelong3-Sep-12 7:50 
GeneralMy vote of 5 PinmemberGmust14-Sep-10 8:36 
Questionhow does it compare with System.Windows.Forms.DataVisualization.Charting ? PinmemberLouis T Klauder Jr2-Mar-10 6:28 
AnswerRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? Pinmemberslelong2-Mar-10 21:06 
GeneralRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? PinmemberLouis T Klauder Jr3-Mar-10 4:33 
GeneralRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? Pinmemberslelong3-Mar-10 10:05 
GeneralRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? PinmemberLouis T Klauder Jr3-Mar-10 16:55 
GeneralRe: how does it compare with System.Windows.Forms.DataVisualization.Charting ? Pinmemberslelong5-Mar-10 7:49 
GeneralEdit Name and selection Pinmemberslelong26-Feb-10 13:06 
Generalrunable sample PinmemberMr.PoorEnglish26-Feb-10 3:35 
GeneralRe: runable sample [modified] Pinmemberslelong26-Feb-10 7:31 
GeneralRe: runable sample PinmemberMr.PoorEnglish26-Feb-10 10:40 
Generalmatrix and graphicspath PinmemberMr.PoorEnglish26-Feb-10 11:28 
GeneralRe: matrix and graphicspath Pinmemberslelong26-Feb-10 12:58 
GeneralRe: runable sample Pinmemberslelong26-Feb-10 12:54 
GeneralRe: runable sample PinmemberMr.PoorEnglish26-Feb-10 14:05 
GeneralRe: runable sample Pinmemberslelong26-Feb-10 23:01 
GeneralRe: runable sample PinmemberMr.PoorEnglish27-Feb-10 0:45 
GeneralRe: runable sample Pinmemberslelong27-Feb-10 9:13 
GeneralStrange article title man, its a graph PinmvpSacha Barber25-Feb-10 21:11 
GeneralRe: Strange article title man, its a graph [modified] PinmemberXmen W.K.26-Feb-10 5:08 
GeneralRe: Strange article title man, its a graph Pinmemberslelong26-Feb-10 7:33 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141220.1 | Last Updated 5 Mar 2010
Article Copyright 2010 by slelong
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid