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

Linear and Logarithmic Display of 2D Data, An Enhancement

, 13 Mar 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
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.
Sample Image - DataPlotter2007.jpg

Introduction

This is an enhancement made in 2007 of the famous DataPlotter introduced in 2003 by Hans-Jürgen Schmidt. It includes requests raised meanwhile. In this article, I have included the Introduction, Background, and Using the Code sections from the original article. Finally, I have added my enhancements.

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 step 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,Curve)
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

Enhancements

GridDrawModeType XGridDrawMode

The way the vertical grid for x-values is drawn
(Line, Dashed, Dotted, TickOutside)

GridDrawModeType YGridDrawMode

The way the horizontal grid for y-values is drawn
(Line, Dashed, Dotted, TickOutside)

string XLabelFormat

The format string for the x-value label

string YLabelFormat

The format string for the y-value label

Rectangle ChartArea

The inner (active) area of the chart

Point CalculatePoint(double x, double y)

Calculates the coordinate for a x and y value

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.
  • The standard format string is "g" which is a 5 digit floating point. More details are found at double.ToString(string).

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 inner rectangle (= ChartArea) is adjusted to fit equidistant grid lines.
  • The grid lines are drawn for X and Y directions, according to the format setting.
  • Here also the formatted scale numbers are written.
  • The scale numbers are drawn in a way to avoid overlap.
  • 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 the exception handler) are skipped by reusing the last valid point.
  • A clipping rectangle avoids lines drawn outside the chart area.
  • 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 scaling. There is also a property grid to 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.

Well, as you see, enhancements are easy on such a good base. Hans-Jürgen, thank you!

License

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

Share

About the Author

Guenther Klenner
Web Developer
Germany Germany
No Biography provided

Comments and Discussions

 
Generalfind x data from y Pinmemberganeaysh18-Feb-09 20:01 
QuestionSecond Line [modified] PinmemberXsiXmaX29-Mar-07 1:26 
AnswerRe: Second Line PinmemberGuenther Klenner16-May-07 2:22 
GeneralMore Charting Libraries Pinmemberpita200013-Mar-07 19:55 
Generallogarithmic scale PinmemberXsiXmaX5-Mar-07 3:03 
AnswerRe: logarithmic scale PinmemberGuenther Klenner5-Mar-07 9:30 
GeneralRe: logarithmic scale PinmemberXsiXmaX5-Mar-07 21:35 
AnswerRe: logarithmic scale PinmemberGuenther Klenner13-Mar-07 8:53 

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
Web03 | 2.8.141223.1 | Last Updated 13 Mar 2007
Article Copyright 2007 by Guenther Klenner
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid