DataPlotter - linear or logarithmic display of 2D data

The DataPlotter is a .NET control for graphical display of 2D data. For both the X and Y axis a linear or logarithmic (any base) scaling can be selected.

Introduction

The DataPlotter is a .NET control for graphical display of 2D data. For both the X and Y axis a linear or logarithmic (any base) scaling can be selected. Also for both axis the data range can be specified.

Maybe it is of interest to somebody else out there. At least it can be used as another sample on how to fiddle with GDI+ in .NET.

Background

For charting in the .NET world there is still the good old MSChart ActiveX control or you have to buy one of the new .NET controls on the market.

Since neither the MSChart control made me happy for my purpose nor did I want to spend money, I decided to start something on my own. This project is nothing fancy or new -- it's just my first steps in .NET graphics.

Using the code

The implementation of DataPlotter is quite simple: It's a .NET Windows control library with a bunch of properties. Everything else happens in the OnPaint function.

These are the properties:

`Color ColorDraw`	The color of the data line
`Color ColorGrid`	The color of the gird lines
`Color ColorBg`	The background color
`Color ColorAxis`	The color of the axis and text
`Font FontAxis`	The font for the text
`long PenWidth`	The width of the data line
`DrawModeType drawMode`	Draw mode for the data points (`Line`, `Dot`, `Bar`)
`long BorderTop`	The internal border at the top
`long BorderLeft`	The internal border at the left
`long BorderBottom`	The internal border at the bottom
`long BorderRight`	The internal border at the right
`double XRangeStart`	The start of the data range on the x axis
`double XRangeEnd`	The end of the data range on the x axis
`double YRangeStart`	The start of the data range on the y axis
`double YRangeEnd`	The end of the data range on the y axis
`double XGrid`	The spacing for the linear grid in x direction. Ignored for log. views
`double YGrid`	The spacing for the linear grid in y direction. Ignored for log. views
`long XLogBase`	The base for log. views in x direction. If < 2 then a linear view is displayed
`long YLogBase`	The base for log. views in y direction. If < 2 then a linear view is displayed
`double[] XData`	The data to be displayed for x.
`double[] YData`	The data to be displayed for y.

A few hints on some properties:

The borders define the inner axis rectangle. Use bigger borders on the left and bottom to have enough space for the scaling numbers.
If a LogBase property is below 2 then a linear scaling is selected. Otherwise the number is the base for logarithmic scaling. Typically use 0 for linear and 10 for logarithmic scales.
For logarithmic scaling, use full decades for the RangeStart and RangeEnd properties, e.g. 0.01 to 1000 for a LogBase of 10.
The Data arrays must be of the same size of course.

A short walkthrough of the OnPaint function:

Check the property values for consistency.
Prepare the graphical tools. There are pens for the graph, grid lines and axis and a brush for scale numbering.
The inner axis rectangle is calculated by deducting the border properties from the client rectangle size.
The grid lines are drawn for X and Y directions. Here also the scale numbers are written.
Then the axis rectangle is created.
The data arrays are transformed into an array of points. The values from RangeStart to RangeEnd are mapped onto points of the axis grid considering the LogBase scales. Invalid points (detected by exception handler) are skipped by reusing the last valid point.
The points are drawn according to the DrawMode.

The DataPlotter is an assembly that can be used as shown in the DataPlotterTest application. This demo has four buttons with sample data for the possible linear/logarithmic scalings. There is also a property grid so see/change the DataPlotter's properties.

Where to go from here

The current implementation of DataPlotter served my purpose quite well. But there are many useful extensions and enhancements I can think of:

Use more than one set of data to be drawn in different colors in the same diagram.
Add description properties like title, names for the axis etc.
Extend draw modes, e.g. dotted or dashed lines etc.

Help yourself and let me know about your own enhancements.

License

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

About the Author

Hans-Jürgen Schmidt

Software Developer (Senior)

Germany

Member

Occupation: SW engineer since 1981.

Business: Control and automation systems.

History
The 80s: Assembler, PL/M, RMX OS.
The 90s: C, C++, pSOS, VxWorks, Structured Analysis, Windows, networking, project management
98-03: WinNT/2000, COM with C++/ATL, UIs with VB6, design with UML, IP protocols
The new millenium: WinXP, .NET (all versions), C#, WF, WCF, WPF, ...

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Licence

Thebigfoot

4:51 13 May '09

Hi, first of all, i want to thank you for this great and nice control. So, i would like to know what license is attached to this control ? (In order to know what i can do with the code/the dll) Thanks.
Sign In·View Thread·Permalink

The above code is Excellent. And I have one doubt?

Veerappallil

0:08 29 May '06

1. How to convert the calculated logarithmic values to array values? 2. How to display the logarithmic values when mouse moves? Please help me because now i am doing a project like this. Thnaks and Regards Shibu Mathew Shibu Mathew ; email:-shibumathew@sify.com,shibu.veerappallil@yahoo.co.in
Sign In·View Thread·Permalink	1.50/5 (2 votes)

HOw to Integrate

amitmohanty

22:24 3 Jul '05

I am a newbie in C# and I have a program which calculates the velocity of a ball at a particular time instant. I have stored the velocity in an array and same for time. How can I integrate it to plot velocity vs time? Regards, Amit
Sign In·View Thread·Permalink	3.00/5 (5 votes)

Same Problem

selin17

6:49 2 Feb '05

" ...changed the program to diplay more than one data set in one diagram? Please let me know as soon as possible... THX " If you know the solution could you please email me? thanks
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Need help plz

ryanvlasveld

22:20 13 Dec '04

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
'Dim pl As DataPlotter.Plotter
'pl = New DataPlotter.Plotter()

Plotter1.YLogBase = 0
Plotter1.YRangeStart = 0
Plotter1.YRangeEnd = 27
Plotter1.YGrid = 1
Plotter1.XLogBase = 0
Plotter1.XRangeStart = 0
Plotter1.XRangeEnd = 27

'Code here is where i need help. cant load anything into _
'plotter1.XData or plotter1.YData

Plotter1.XGrid = 1
Plotter1.Refresh()

End Sub

I guess what im basically trying to say is that im having troubles using the xdata and ydata properties from VB if possible.
having troubles getting points to appear on the graph. Is it because i am doing this in VB.net? Help asap thx yall!

by the way i just wanted to add in that im extremely novice with programmin in .net as you can all tell.

Log scale 0.2 - 2000

xjli

13:21 24 Nov '04

Good work, but i;Pf we set the logarithmic scale as 0.2 - 2000, the grid lines look like not correct.
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Re: Log scale 0.2 - 2000

Hans-Jürgen Schmidt

7:43 25 Nov '04

That's is true. That's what I ment when I said in the article: For logarithmic scaling, use full decades for the RangeStart and RangeEnd properties, e.g. 0.01 to 1000 for a LogBase of 10. There was a response of TRiegler below who can help you with this.
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Add marker and Tracker in your control

youssef

13:32 17 Oct '04

Can you add in your control one or more markers ? I would like to use your control like a spectrum. And a tracker for showing the value. Best Regards youssef
Sign In·View Thread·Permalink	3.00/5 (1 vote)

How to decide if the mouse is over the curve

TaoLi

17:50 28 May '04

Great Work! I wanna use it and extend it with some interaction functionality. Do you know an easy to decide if the mouse is over the curve when moving? Thanks!
Sign In·View Thread·Permalink

Has anybody already....

re-en

4:29 3 May '04

...changed the program to diplay more than one data set in one diagram? Please let me know as soon as possible... THX
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Re: Has anybody already....

selin17

5:27 2 Feb '05

Please I need this answer quickly.If you have already gotten a response, could you please email me ?
Sign In·View Thread·Permalink

Re: Has anybody already....

dawo

2:18 25 Jan '07

hello i have changed the code to display more than one plotter lines! if you want to get the sample code contact me via email: wolfgangd@gmx.net best regards dawo
Sign In·View Thread·Permalink

MSChart and VB6

truegret

18:12 4 Mar '04

Greetings Hans-Jürgen,

This is a good sample.

Have you done something similar in VB6 with MSChart control? I do not have .NET available to me and have developed a project in which the output generated would be better served on a log-linear presentation.

I am having a tough time scaling the y-axis as logarithmic with:
RxChart.Plot.Axis(VtChAxisIdY).AxisScale.Type = VtChScaleTypeLogarithmic
RxChart.Plot.Axis(VtChAxisIdY).AxisScale.LogBase = 10

Any guidance would be greatly appreciated.

dg

Re: MSChart and VB6

Hans-Jürgen Schmidt

3:50 14 Mar '04

Sorry, I never could get the MSChart control to display anything logarithmic, but I also didn't try it very hard... Bye Hans-Jürgen Schmidt
Sign In·View Thread·Permalink

Variable Naming conventions

ChristianD

12:14 29 Nov '03

Not sure if you've ever tried to share code before, but your variable naming scheme in your OnPaint eventhandler are a lesson in how not to name variables. As for everything else looks great.
Sign In·View Thread·Permalink

Re: Variable Naming conventions

dl4gbe

9:46 2 Mar '05

What is so special about his naming conventions, I wonder?

On this page many people use very strange naming conventions. So what? Sniff | :^)

I always have a lot of fun converting sample code from C# to VB.Net. People
are writing things like this:

public int PenWidth
{
get {return penWidth;}
set {penWidth = value;}
}

I will never understand why people use the same name for a property and the private variable. Really I will never understand! Confused | :confused:

m_penWidth or something like this would be the proper name. Tending C# programmers to sloppiness?

Or do they just not think about languages which are case incensitive?

So, this is the standard 99% of C# programmers use here. I do not like it.
Nothing special about this code. Mad | :mad:

And m_ or priv_ or something clearly marks variables as private opposed to local. This would help a lot, reading other peoples code. No wild guessing. Marking things with "this." ("me.") is also a nice way to make code readable.

Good Work

Ark

1:13 15 Nov '03

Good work, it is just what i needed. Thank you for sharing your code. ARK
Sign In·View Thread·Permalink	3.00/5 (1 vote)

Re: Good Work

mahesh kumar s

2:15 23 Jan '04

I got nothing working. I can see only a dialog, no plot, no data in property Grid.. please help.. compilation is OK
Sign In·View Thread·Permalink

Very useful control

TRiegler

4:58 31 Oct '03

I wanted to mention that I found your control very useful. There are some suggestions (other than what you've mentioned) which I can think of, and will be glad to share them with you if you like. In particular, DataPlotter doesn't seem to deal with non integer decade spans (e.g. 25-50 or 4-1020), and I believe I can show you how to do this if you wish.
Sign In·View Thread·Permalink	1.50/5 (2 votes)

Double buffering to remove flicker

drewnoakes

1:53 15 Oct '03

I ran the demo -- nice stuff. I noticed that resizing the window (and consequently the control) causes a lot of flickering as the control redraws itself. Without looking at the code, I may be mentioning something you've already tried, but in my experience this flickering is addressed very well by enabling double buffering within your control.

Try something like this in your constructor (from memory):

SetStyle(ControlStyles.DoubleBuffering, true);

There are other control styles that you may find optimise performance too.

Good stuff. Congratulations, and thanks for sharing your work.

Re: Double buffering to remove flicker

Hans-Jürgen Schmidt

9:11 15 Oct '03

Thanks a lot for your suggestion. Adding `SetStyle(ControlStyles.DoubleBuffer \| ControlStyles.UserPaint \| ControlStyles.AllPaintingInWmPaint, true);` immediately after `InitializeComponent` makes it smooth and even faster
Sign In·View Thread·Permalink

Re: Double buffering to remove flicker

os3omaha

8:45 15 May '05

I too was originally frustrated by flicker, and added double-buffering to reduce this.

However, I was still frustrated by refresh rates. My solution is to do all drawing to an Image, and in OnPaint(), drawing the Image as opposed to drawing each individual line and box. So there are two cases within OnPaint(), the first time through we draw the control to the Image, store that Image within the DataPlotter class, and set a flag that the control has been drawn. Each subsequent call to OnPaint() simply re-draws that same Image.

Code changes include:



private Image myImage;

public int myStatus = 0;

 

protected oerride void OnPaint(PaintEventArgs e)

{

   switch (myStatus)

   {

      case 0:

          // image has not yet been drawn, or needs to be updated

          

          Graphics g = this.CreateGraphics();

          myImage = new Bitmap(e.ClipRectangle.Width, e.ClipRectangle.Height, g);

          g = Graphics.FromImage(myImage);

 

          .....  your OnPaint() code inserted here, minus the Graphics g initialization you were using

          // just before the end of the try block add this

          e.Graphics.DrawImage(myImage, this.ClientRectangle);

          myStatus = 1;

      case 1:

          e.Graphics.DrawImage(myImage, 0, 0);

 

          break;

   }

}

on Plotter_Resize(), add code to set myStatus to 0.

Anytime you update the data, set MyStatus to 0;

Performance gains using this method are quite significant. You will especially notice the difference if you drag another window over the control, with this method it runs pretty smooth.

Thanks!