Click here to Skip to main content
14,487,277 members

A simple C# library for graph plotting

Rate this:
4.90 (246 votes)
Please Sign up or sign in to vote.
4.90 (246 votes)
4 Sep 2014CPOL
An easy to use C# library for quick and simple graph plotting.

Introduction

In our application, we had to display the output of a multichannel ECG (Electro Cardiograph) device. I had a look at some commercial libraries, but none of them met by demands. So, I decided to design a simple solution by myself.

This is my attempt to design a flexible, easy to use library for drawing graphs.

The library is capable of displaying multiple graphs in different layouts. Right now, five modes of display are possible:

  • Normal: means that all data sources are displayed in one graph window, with separate ordinates.
  • Stacked: means that all data sources are displayed in one graph window, stacked vertically, with shared ordinate and shared abscissa.
  • Vertical aligned: means that the graph windows are displayed vertically aligned, with separate ordinates and shared abscissa.
  • Tiled horizontal: means that the data sources are displayed in tiled windows (preferred alignment direction is horizontal).
  • Tiled vertically: means that the data sources are displayed in tiled windows (preferred alignment direction is vertical).

Graphs can be displayed unscaled or auto-scaled. In the auto-scale mode, the visible graph is automatically fit to the visible area.

The following images show examples for the different display modes:

Normal:

GraphPlotting/graph_normal.png

Stacked:

GraphPlotting/graph_stacked.png

Tiled horizontal:

GraphPlotting/graph_tiled_horizontal.png

Tiled vertical:

GraphPlotting/graph_tiled_vertically.png

Vertical aligned:

GraphPlotting/graph_vertically_aligned.png

Autoscaled X-Axis

GraphPlotting/graph_fixed_x_range.png

The following images show a sample of an ECG application, where eight data sources are displayed vertically tiled and auto-scaled.

GraphPlotting/sample_2.jpg

Using the Code

The control is very simple to use. Just have a look at the sample application. The following code shows how the part in the demo application where the graphs for the different examples are generated:

protected void CalcDataGraphs()
{

    this.SuspendLayout();

    display.DataSources.Clear();
    display.SetDisplayRangeX(0, 400);

    for (int j = 0; j < NumGraphs; j++)
    {
        display.DataSources.Add(new DataSource());
        display.DataSources[j].Name = "Graph " + (j + 1);
        display.DataSources[j].OnRenderXAxisLabel += RenderXLabel;

        switch (CurExample)
        {
            case  "NORMAL":
                this.Text = "Normal Graph";
                display.DataSources[j].Length = 5800;
                display.PanelLayout = PlotterGraphPaneEx.LayoutMode.NORMAL;
                display.DataSources[j].AutoScaleY = false;
                display.DataSources[j].SetDisplayRangeY(-300, 300);
                display.DataSources[j].SetGridDistanceY(100);
                display.DataSources[j].OnRenderYAxisLabel = RenderYLabel;
                CalcSinusFunction_0(display.DataSources[j], j);
                break;

            case "NORMAL_AUTO":
                this.Text = "Normal Graph Autoscaled";
                display.DataSources[j].Length = 5800;
                display.PanelLayout = PlotterGraphPaneEx.LayoutMode.NORMAL;
                display.DataSources[j].AutoScaleY = true;
                display.DataSources[j].SetDisplayRangeY(-300, 300);
                display.DataSources[j].SetGridDistanceY(100);
                display.DataSources[j].OnRenderYAxisLabel = RenderYLabel;
                CalcSinusFunction_0(display.DataSources[j], j);
                break;

            case "STACKED":
                this.Text = "Stacked Graph";
                display.PanelLayout = PlotterGraphPaneEx.LayoutMode.STACKED;
                display.DataSources[j].Length = 5800;
                display.DataSources[j].AutoScaleY = false;
                display.DataSources[j].SetDisplayRangeY(-250, 250);
                display.DataSources[j].SetGridDistanceY(100);
                CalcSinusFunction_1(display.DataSources[j], j);
                break;

            case "VERTICAL_ALIGNED":
                this.Text = "Vertical aligned Graph";
                display.PanelLayout =
                    PlotterGraphPaneEx.LayoutMode.VERTICAL_ARRANGED;
                display.DataSources[j].Length = 5800;
                display.DataSources[j].AutoScaleY = false;
                display.DataSources[j].SetDisplayRangeY(-300, 300);
                display.DataSources[j].SetGridDistanceY(100);
                CalcSinusFunction_2(display.DataSources[j], j);
                break;

            case "VERTICAL_ALIGNED_AUTO":
                this.Text = "Vertical aligned Graph autoscaled";
                display.PanelLayout =
                    PlotterGraphPaneEx.LayoutMode.VERTICAL_ARRANGED;
                display.DataSources[j].Length = 5800;
                display.DataSources[j].AutoScaleY = true;
                display.DataSources[j].SetDisplayRangeY(-300, 300);
                display.DataSources[j].SetGridDistanceY(100);
                CalcSinusFunction_2(display.DataSources[j], j);
                break;

            case "TILED_VERTICAL":
                this.Text = "Tiled Graphs (vertical prefered)";
                display.PanelLayout = PlotterGraphPaneEx.LayoutMode.TILES_VER;
                display.DataSources[j].Length = 5800;
                display.DataSources[j].AutoScaleY = false;
                display.DataSources[j].SetDisplayRangeY(-300, 600);
                display.DataSources[j].SetGridDistanceY(100);
                CalcSinusFunction_2(display.DataSources[j], j);
                break;

            case "TILED_VERTICAL_AUTO":
                this.Text = "Tiled Graphs (vertical prefered) autoscaled";
                display.PanelLayout = PlotterGraphPaneEx.LayoutMode.TILES_VER;
                display.DataSources[j].Length = 5800;
                display.DataSources[j].AutoScaleY = true;
                display.DataSources[j].SetDisplayRangeY(-300, 600);
                display.DataSources[j].SetGridDistanceY(100);
                CalcSinusFunction_2(display.DataSources[j], j);
                break;

            case "TILED_HORIZONTAL":
                this.Text = "Tiled Graphs (horizontal prefered)";
                display.PanelLayout = PlotterGraphPaneEx.LayoutMode.TILES_HOR;
                display.DataSources[j].Length = 5800;
                display.DataSources[j].AutoScaleY = false;
                display.DataSources[j].SetDisplayRangeY(-300, 600);
                display.DataSources[j].SetGridDistanceY(100);
                CalcSinusFunction_2(display.DataSources[j], j);
                break;

            case "TILED_HORIZONTAL_AUTO":
                this.Text = "Tiled Graphs (horizontal prefered) autoscaled";
                display.PanelLayout = PlotterGraphPaneEx.LayoutMode.TILES_HOR;
                display.DataSources[j].Length = 5800;
                display.DataSources[j].AutoScaleY = true;
                display.DataSources[j].SetDisplayRangeY(-300, 600);
                display.DataSources[j].SetGridDistanceY(100);
                CalcSinusFunction_2(display.DataSources[j], j);
                break;

            case "ANIMATED_AUTO":

                this.Text = "Animated graphs fixed x range";
                display.PanelLayout = PlotterGraphPaneEx.LayoutMode.TILES_HOR;
                display.DataSources[j].Length = 402;
                display.DataSources[j].AutoScaleY = false;
                display.DataSources[j].AutoScaleX = true;
                display.DataSources[j].SetDisplayRangeY(-300, 500);
                display.DataSources[j].SetGridDistanceY(100);
                display.DataSources[j].XAutoScaleOffset = 50;
                CalcSinusFunction_3(display.DataSources[j], j, 0);
                display.DataSources[j].OnRenderYAxisLabel = RenderYLabel;
                break;
        }
    }

    ApplyColorSchema();

    this.ResumeLayout();
    display.Refresh();

}

The functions CalcSinusFunction_0 CalcSinusFunction_1 and CalcSinusFunction_2 are used to calculate the different sinus functions for the graphs:

protected void CalcSinusFunction_0(DataSource src, int idx)
{
    for (int i = 0; i  < src.Length; i++)
    {
        src.Samples[i].x = i;
        src.Samples[i].y = (float)(((float)200 * Math.Sin((idx + 1) *(
            i + 1.0) * 48 / src.Length)));
    }    
}

The functions RenderYLabel and RenderXLabel are used to render the X and Y legends of the graph.

private String RenderXLabel(DataSource s, int idx)
{
    if (s.AutoScaleX)
    {         
        int Value = (int)(s.Samples[idx].x );
        return "" + Value;     
    }
    else
    {
        int Value = (int)(s.Samples[idx].x / 200);
        String Label = "" + Value + "\"";
        return Label;
    }    
}

private String RenderYLabel(DataSource s, float value)
{ 
    return String.Format("{0:0.0}", value);
}

Summary

There are lots of parameters that can be twisted which are not explained here - just look at the code. This library is far from being finished, but it is a good point to start from. The code is simple and self-explaining. From here, it will be simple to adopt the code for your needs.

I got so much inputs from here, and I wanted to give something back. So, here is my first article on The Code Project. I hope you like it.

To Do

  • code clean ups.

Version History

  • 04.09.2014 - First update in 4 years. Found back into my code ;-) Upgraded solution to VS 2013 Express.  Cleaned up some magic numbers. More to follow soon ;-)
  • 12.07.2009 - Updated article.
  • 12.02.2009 - Implemented x autoscaling.
  • 28.01.2009 - Some more cleanups. Implemented Print Form.
  • 27.01.2009 - New display mode, some cleanups.
  • 25.01.2009 - Initial release.

License

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

Share

About the Author

Zimmermann Stephan
Software Developer (Senior)
Austria Austria
I have started programming at the age of 13 on the commodore 64.

Ever since then I have been programming on many systems in many languages.

During the last 12 years I have been working as professional programmer in different companies and different areas.

Now I am working as freelancer programmer / consultant

Comments and Discussions

 
QuestionECG Graph Pin
kash1235-Dec-09 3:41
Memberkash1235-Dec-09 3:41 
QuestionError in Main Form (designer) within source Pin
thomas7524-Nov-09 23:39
Memberthomas7524-Nov-09 23:39 
GeneralGraph Library Source Pin
thomas7524-Nov-09 23:32
Memberthomas7524-Nov-09 23:32 
QuestionReal-time data receiving problem [modified] Pin
MustafaCan6-Nov-09 2:00
MemberMustafaCan6-Nov-09 2:00 
QuestionMath. formula(s) for ECG emulation? Pin
WilfredoWilly14-Oct-09 8:38
MemberWilfredoWilly14-Oct-09 8:38 
AnswerRe: Math. formula(s) for ECG emulation? Pin
Dr. Neuron19-Oct-09 2:24
MemberDr. Neuron19-Oct-09 2:24 
AnswerRe: Math. formula(s) for ECG emulation? Pin
majongan29-Mar-12 23:50
Membermajongan29-Mar-12 23:50 
GeneralECG Plot for Windows Mobile Pin
Gregory Chandran11-Oct-09 15:43
MemberGregory Chandran11-Oct-09 15:43 
Hi there Sir, I am also doing a similar project on ECG display. Im using alive technology bluetooth sensor and windows mobile. I am currently trying to display the ECG waveform on the mobile. Problem is as the values are read in bytes (format is 8-bit unsigned in) and represent a -2.66 to 2.66 mv range.

I have read in the ECG data from the bluetooth sensor into a byte array. Secondly as they are 8-bit unsigned, what calculation could i use to scale the values to represent a -2.66 to 2.66 mv range so that i can plot them.

Then as I am working on windows mobile, I noticed .NET Compact frameworks DrawLine method cannot take floats or doubles to ploit points. Is there any method or other way i can use to plot the ECG wave? Does your library work if I use it for windows mobile?

Finally please could you help me with a method to display the ECG wave from an array?
GeneralRe: ECG Plot for Windows Mobile Pin
Dr. Neuron13-Oct-09 2:22
MemberDr. Neuron13-Oct-09 2:22 
QuestionMath. formula(s) for ECG emulation? [modified] Pin
Dr. Neuron29-Sep-09 6:11
MemberDr. Neuron29-Sep-09 6:11 
AnswerRe: Math. formula(s) for ECG emulation? Pin
Zimmermann Stephan8-Oct-09 22:31
MemberZimmermann Stephan8-Oct-09 22:31 
GeneralRe: Math. formula(s) for ECG emulation? Pin
Dr. Neuron12-Oct-09 9:47
MemberDr. Neuron12-Oct-09 9:47 
GeneralRe: Math. formula(s) for ECG emulation? Pin
majongan29-Mar-12 23:53
Membermajongan29-Mar-12 23:53 
GeneralRe: Math. formula(s) for ECG emulation? Pin
Mabchour 198923-Apr-12 12:48
MemberMabchour 198923-Apr-12 12:48 
GeneralRe: Math. formula(s) for ECG emulation? Pin
Member 135098548-Nov-17 0:31
MemberMember 135098548-Nov-17 0:31 
Generalrunning compatibility Pin
hhazan7-Sep-09 2:55
Memberhhazan7-Sep-09 2:55 
GeneralRe: running compatibility Pin
Zimmermann Stephan8-Oct-09 22:21
MemberZimmermann Stephan8-Oct-09 22:21 
GeneralAnimating graph Pin
linkvirtual28-Jul-09 22:07
Memberlinkvirtual28-Jul-09 22:07 
GeneralRe: Animating graph Pin
Zimmermann Stephan29-Jul-09 21:17
MemberZimmermann Stephan29-Jul-09 21:17 
Generalecg program info Pin
hadlerz24-Jul-09 22:28
Memberhadlerz24-Jul-09 22:28 
GeneralRe: ecg program info Pin
Gregory Chandran11-Oct-09 15:37
MemberGregory Chandran11-Oct-09 15:37 
GeneralRe: ecg program info Pin
wayneo200030-Jan-10 16:57
Memberwayneo200030-Jan-10 16:57 
GeneralQuestion about mtimer in demo Pin
Bill Dreschel13-May-09 5:59
MemberBill Dreschel13-May-09 5:59 
GeneralRe: Question about mtimer in demo Pin
Zimmermann Stephan17-May-09 21:08
MemberZimmermann Stephan17-May-09 21:08 
QuestionUsing this graph for real time update in an ECG circuit? Pin
Kenneth Galea8-Apr-09 3:05
MemberKenneth Galea8-Apr-09 3:05 

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.

Article
Posted 25 Jan 2009

Stats

744.9K views
79.2K downloads
572 bookmarked