Cristi Potlog's Chart Control for .NET

• Download demo project - 20.9 Kb
• Download source - 40.7 Kb

Introduction

There are a few samples of chart controls out there and a myriad of commercial chart controls. It seems that there is a large market and a strong need for such controls.

I will introduce here a sample chart control just for the sake of making an example. I can't guarantee, though, that it would fit any real world application requirements.

Background

The sample chart uses basic .NET drawing libraries, and there are no third party components. I will illustrate first a basic time-series line chart.

Using the code

To use the control, you need to add a reference to the compiled ChartControl.dll or you can use the source directly by adding the library to your solution. This should provide more flexibility and you can also change the code to fit your particular needs.

The control should appear on the toolbox now (the sample images assume that you are using source code reference):

You can create a new form on your application project and place a chart control on the form. Set the Dock property to DockStyle.Fill and you will have something like this:

You can start making changes to the default chart's properties to improve the visual effects of the chart:

For a complete list of the settings, you can view the sample project. Then you can have something like what you see in the image at the top of the article.

Chart control details

The chart control is designed from a series of helper classes that hold specific information about how the control should be displayed. You'll notice that these classes are nested within each other so we can have a coherent model for the chart's components.

ChartTitleSettings class

Represents the display setting for a title of the chart control. Through its properties you can change the appearance of the title, both color and font, and also the text that will be displayed.

This class is used to represent the title of the chart, the title of the axis of the chart, and the title of the series.

ChartLabelsSettings class

Represents the display setting for labels of the chart control. The difference between a label and a title is that in a label you cannot control the text that is displayed. A label has, also, the possibility to rotate the text that it displays. You can choose not to display the label by setting the Visible property to False. You can obtain the same effect on a title by setting its title to an empty string.

This class is used to represent the labels that appear next to the chart's series values and the chart's axis pointers.

ChartLineSettings class

Represents the display setting for a line of the chart control. Through its properties you can set the color, weight and dash style of the line, as well as the fact that the line is visible or not.

This class is used to represent the lines of the chart's grid, axis, series and values projections, as well as the border lines of the chart's legend.

ChartGridSettings class

Represents the display setting for the grid of the chart control. You can set the settings of the grid line through a property of type ChartLineSettings. You can also specify the density of the grid by setting the XAxisStyle and YAxisStyle properties.

ChartMarkSettings class

Represents the display setting for a value mark of the chart control. You can change the appearance of the marks of the chart series value by setting fill color and border color and by selecting the shape of the mark from a list of predefined values:

/// <summary>
/// Specifies the shapes of the value series marks for the chart control.
/// </summary>
public enum ChartMarkShapes
{
  None,
  Circle,
  Diamond,
  Square,
  Triangle
}

ChartProjectionsSettings class

Represents the display setting for the projections of the chart control. A projection is a line drawn from the value mark to the time axis to pin point the exact time frame of the value. It consists of a line and a label close to the axis that indicates the time.

You can control the appearance of the line and of the label through properties of type ChartLineSettings and ChartLabelSettings. You can specify if the projection should be displayed or not by setting the boolean Visible property.

ChartSeriesSettings class

Represents the setting for the time series of the chart control. This is a complex class compared with previous ones. You can control the settings of the series including the values to be displayed.

ChartLegendSettings class

Represents the display setting for the legend of the chart control. Through this class' properties, you can specify whether the legend will appear or not, the position at which it will be displayed, and the appearance of the border line of the legend.

Possible values for Position are:

/// <summary>
/// Specifies the position at which the legend will be displayed on the chart control.
/// </summary>
public enum ChartMarkShapes
{
  Top,
  Left,
  Right,
  Bottom
}

ChartTimeScaleSettings class

Represents the setting for the time axis scale of the chart control. It provides properties to control the limits of the time scale.

ChartValueScaleSettings class

Represents the setting for the values axis scale of the chart control. It provides properties to control the limits of the value scale.

ChartTimeAxisSettings and ChartValueAxisSettings class

ChartTimeAxisSettings represents the display setting for the time axis of the chart control.

ChartValueAxisSettings represents the display setting for the value axis of the chart control.

Both these classes are derived from ChartAxisSettingsBase abstract class which provides the basic elements of the axis such as title, label, line and tick styles. Each class adds a Scale property of ChartTimeScaleSettings type and ChartValueScaleSettings type, respectively.

ChartSeriesValue and ChartSeriesValueCollection classes

ChartSeriesValue represents a value from the time series of the chart control. This class has two properties Date and Value that specify the data that should appear on the chart representing a certain value at a specific point in time.

ChartSeriesValueCollection represents a collection of values from the time series of the chart control.

Implementation notes class

This is to be considered work in progress. This is not the final nor the complete version of the control. I released the code so that I can get some feedback from you in order to add more features to it as well as to refine the design, especially the event model design.

Future directions

• Multiple series support.
• Designer support through custom editors.
• More chart types support (e.g., bar chart, pie chart).

History

• July 11^th 2005. Initial release.
• July 22^nd 2005. Article contents update.