Chart Usage
Chart is used for building 2D charts of different types (Bar, Point, Line, Spline, Step). Note that a single Chart Area may contain different types of charts. Chart supports both Design-Time and Run-Time data binding. It retrieves data from various sources: files (text and Excel), data arrays (ordinary and array of arrays), data bases, IListSource, DataGridView, TOLAPGrid.
You can specify the way of using the data source in the DataSourceSettings class that contains a list of compliances between data source fields and the way they are used in the chart. To use a data source field, you need to add its name and usage into DataSourceSettings. A field can be used as:
- - discrete argument (FieldUsage.ArgDiscrete);
- - continuous argument (FieldUsage. ArgContinuous);
- - discrete function (FieldUsage.FunctDiscrete);
- - continuous function (FieldUsage.FunctContinuous). Note that there must be only one argument and at least one function in the field list. If the function is discrete, there must be no other functions, but you can use as many continuos functions as you like.
An example code for setting the data source with two fields: Quantity and Sales 1
// the Quantity fields will be used as an argument Chart.DataSourceSettings.AddField("Quantity",FieldUsage.ArgContinuous); // the Sales1 field will be used as a function Chart.DataSourceSettings.AddField("Sales1",FieldUsage.FunctContinuous).
If you don’t specify the way of using data source, the default setting will be applied (a discrete argument and a continuous function). The first field will be takes as an argument, the second – as function. Axis type will be defined by the type of data in the data source field.
Design-Time Data-Binding
Data binding provides a simple means of assigning data to one of many possible .NET Data Sources. This can be done from the Visual Studio property browser of Visual Studio. With Chart design-time data binding you need to write no code. Design-time data binding is fast, easy and flexible enough for most chart users.
Run-Time Data-Binding
Using Run-Time data binding allows a finer setting of the way of retrieving data.
As data source for building charts the Chart control may use:
- Text file;
- Excel file;
- Data array;
- Data base;
- IListSource;
- DataGridView; Data source is assigned to the DataSource property.
Data Binding to a Text File
To use a text file as data source, you need to assign its FileInfo to the DataSource property and, if needed, specify the settings of using data source fields in records (by default, the first one will be the argument, the second – the function. See Data-binding). Fields may be separated by any symbol (by default, it’s comma).
Example: Using the TxtSample.csv file from the catalogue of the executing attachment as data source.
TxtSample.csv contents: 0,500,200,300,50 14,55,256,253,24 75,42,14,48,38 100,15,48,76,49 200,15,39,157,35
When a text file is used as data source, the first “column” of its contents is taken as the value of the X coordinate, the rest of them – as values of the Y coordinate for series. “Columns” must be separates with a commas.
Note: since the DataSourceSettings property contains only three fields (Series1, Series2, Series3), all the “columns” after the fourth in the text file will not be taken into account.
Chart.BeginUpdate(); // clearing chart's layer data and series Chart.ResetChart();
// setting the use of data source fields Chart.DataSourceSettings.AddField("Quantity", FieldUsage.ArgContinuous); Chart.DataSourceSettings.AddField("Sales1", FieldUsage.FunctContinuous); Chart.DataSourceSettings.AddField("Sales2", FieldUsage.FunctContinuous); Chart.DataSourceSettings.AddField("Sales3", FieldUsage.FunctContinuous);
Chart.PaletteKind = RadarSoft.CommonChart.TPaletteKind.excel;
Chart.DataSource = new FileInfo(Application.StartupPath + "/TxtSample.txt"); Chart.EndUpdate();
The first “column” (0, 14, 75, 100, 200) is the X coordinate of the chart points, the rest 3 “columns” are values of the Y coordinate for series.
Data Binding to an Excel File
When an Excel file is used as data source, the data is retrieved only from the first sheet of the workbook (Sheet 1).
Example: Using the ExcelSample.xls file from the catalogue of the executing attachment as data source. Just like in the text file, the first “column” is taken as the value of the argument, the rest – as values of the Y coordinate for series.
Chart.BeginUpdate(); // clearing chart's layer data and series Chart.ResetChart();
// setting the use of data source fields Chart.DataSourceSettings.AddField("Year", FieldUsage.ArgDiscrete); Chart.DataSourceSettings.AddField("Sales1", FieldUsage.FunctContinuous); Chart.DataSourceSettings.AddField("Sales2", FieldUsage.FunctContinuous); Chart.DataSourceSettings.AddField("Sales3", FieldUsage.FunctContinuous);
Chart.Layers[0].Settings.ChartView = RadarSoft.CommonChart.TChartView.pvBar;
Chart.DataSource = new FileInfo(Application.StartupPath + "/ExcelSample.xls"); Chart.EndUpdate();
"/ExcelSample.xls contents: 2000 100 200 450 2001 150 800 250 2002 800 300 350 2003 400 200 560 2004 320 120 250 2005 350 180 400 2006 100 425 350 2007 200 500 270
Data Binding to a Data Array
The Chart control builds charts based on ordinary data arrays, as well as arrays of arrays. Note that it uses an instance of the ListAdapter class as DataSource and the data array, or a set of parameters – the array elements, is transferred to the class’s constructor.
Example: Using an ordinary data array.
When an ordinary data array serves as data source, the Chart control builds a chart with a single series. Its X coordinate is filled automatically with values {1, 2, 3 ... }, its Y coordinate is taken from the data array.
Chart.BeginUpdate(); // clearing chart's layer data and series Chart.ResetChart();
Chart.Layers[0].Settings.ChartView = RadarSoft.CommonChart.TChartView.pvLine;
Chart.DataSource = new ListAdapter(100, 200, 150, 300, 450, 800);
//setting series appearance Chart.Layers[0].Series[0].Settings.Lines.View = RadarSoft.CommonChart.TLinesView.Spline; Chart.Layers[0].Series[0].Settings.Lines.ShowMarker = false;
Chart.Layers[0].Series[0].Settings.Background = Color.Thistle; Chart.Layers[0].Series[0].DisplayName = "Series"; Chart.AxisXName = "Axis X"; Chart.AxisYName = "Axis Y";
Chart.EndUpdate();
Data Binding to an Array of Arrays
When an array of arrays serves as data source, the first of them is taken as values for the X coordinate, the rest of them – as values of the Y coordinate for series.
Example: Using a number array 3x4 as data source.
Chart.BeginUpdate(); // clearing chart's layer data and series Chart.ResetChart();
string[] str = new string[] { "Quarter1", "Quarter2", "Quarter3", "Quarter4" }; int[] ar1 = new int[] { 100, 250, 200, 240 }; int[] ar2 = new int[] { 200, 150, 180, 180 }; int[] ar3 = new int[] { 120, 220, 300, 250 };
Chart.DataSource = new ListAdapter(str, ar1, ar2, ar3);
Chart.Layers[0].Settings.ChartView = RadarSoft.CommonChart.TChartView.pvLine; Chart.Layers[0].Series[0].DisplayName = "Value 1"; Chart.Layers[0].Series[0].Settings.Lines.View = RadarSoft.CommonChart.TLinesView.Line; Chart.Layers[0].Series[0].Settings.Points.View = RadarSoft.Common.TMarkerType.Diamond;
Chart.Layers[0].Series[0].DisplayName = "Value 2"; Chart.Layers[0].Series[0].Settings.Lines.View = RadarSoft.CommonChart.TLinesView.Spline; Chart.Layers[0].Series[0].Settings.Points.View = RadarSoft.Common.TMarkerType.Bubble;
Chart.Layers[0].Series[0].DisplayName = "Value 3"; Chart.Layers[0].Series[0].Settings.Lines.View = RadarSoft.CommonChart.TLinesView.Step; Chart.Layers[0].Series[0].Settings.Points.View = RadarSoft.Common.TMarkerType.Square; Chart.EndUpdate();

Data Binding to a Data Base
The Chart control may use different kinds of data bases as DataSource: DataSet (when the chart is built on DataSet, it retrieves data from the table with 0 index); DataTable; DataView; DataAdapter; Command.
All of them are used in the same way. To make any of these objects a data source, you need to assign it to the DataSource property:
Example: Using DataAdapter for the DataBaseSample.mdb file as data source:
Chart.BeginUpdate(); Chart.ResetChart(); Chart.Layers[0].Settings.ChartView = RadarSoft.CommonChart.TChartView.pvBar;
Chart.DataSourceSettings.AddField("Number_of_Employees", FieldUsage.ArgContinuous); Chart.DataSourceSettings.AddField("Department", FieldUsage.FunctDiscrete);
string Query = "SELECT Department.Name as Department, Count(Employees.Name) as Number_of_Employees" + " FROM Department INNER JOIN Employees ON Department.ID = Employees.ID_Department" + " GROUP BY Department.Name"; string ConnectionString = @"Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Application.StartupPath + "/DataBaseSample.mdb"; OleDbConnection Connection = new OleDbConnection(ConnectionString);
OleDbDataAdapter adapter = new OleDbDataAdapter(Query, Connection); Chart.DataSource = adapter; Connection.Close(); Chart.EndUpdate();
Data Binding to IListSource
Using IListSource as DataSource allows building charts based on TOLAPGrid component data.
TOLAPGrid grid = new TOLAPGrid(); // initializing the Grid … //
Chart.BeginUpdate(); Chart.ResetChart(); Chart.DataSource = grid; Chart.EndUpdate();
Data Binding to DataGridView
The Chart control can also use DataGridView as data source. You just need to assign it to DataSource.
Filling Chart with data is filling series with data and adding them to the chart layers. The X and Y properties define the position of the point in the chart, so their values must correspond to the types of axes.
Working with the Chart control, you can create your own new data series TChartSeries and add data points to the already existing ones. Each series must be added to a chart layer. Program data filling makes it possible to combine different chart types within one chart.
Example: Placing tree layers with different chart types on a single chart.
Chart.BeginUpdate();
Chart.ResetChart();
TChartSeries series1 = new TChartSeries(); series1.Add("March",140); series1.Add("April",100); series1.Add("May", 60); series1.Add("June", 40); series1.Settings.Lines.View = TLinesView.Spline; series1.Settings.Lines.ShowMarker = false; series1.DisplayName = "Series 1"; TChartSeries series2 = new TChartSeries(); series2.Add("April",30); series2.Add("March", 80); series2.Add("May", 50); series2.Add("June", 40); series2.DisplayName = "Series 2";
Chart.Layers.Add(new TChartLayer()); Chart.Layers[0].Add(series1); Chart.Layers[1].Add(series2);
Chart.Layers[0].Settings.ChartView = TChartView.pvLine; Chart.Layers[1].Settings.ChartView = TChartView.pvBar;
Chart.SetSeriesColors(); Chart.FillAxes();
Chart.AxisXName = "Axis X"; Chart.AxisYName = "Axis Y";
Chart.EndUpdate();
Chart Layers
Chart Area consists of TChartLayers layers. There can be as many layers as you like, but by default, there’s only one – “zero” layer. Operations with any other layer are possible only while program data filling.
Basic properties of the TChartLayer class:
- List<TChartSeries> Series – contains series of the current layer;
- TChartSettingLayer Settings – layer settings. Note that the TChartView ChartView property specifies the chart type for the current layer ( Bar, Line, Point).
Note: A Line or Point chart can be built based on any kind of source data, while building a Bar chart demands at least one discrete data axis. If both axes are continuous, it is impossible to build bars.
// assigning the Bar type to the second layer Chart.Layers[1].Settings.ChartView = TChartView.pvBar;
Legend
The legend of the Chart control contains the names and colors of all chart’s series. Names of the fields in the data source are taken as names for appropriate series. You can change the names of series in their DisplayName property:
// assigning a name for a series: Chart.SeriesList[1].DisplayName = "Value 2";
The Chart.LegendSettings property allows setting the legend’s appearance:
Chart.LegendSettings.Radiuses = new TRadiuses(3); Chart.LegendSettings.Gradient = new TGradientColor(Color.White, Color.LightBlue); Chart.LegendSettings.FillType = TFillType.gtToBottom; Chart.LegendSettings.Shadow = new TGradientColorMarginal(Color.LightGray, Color.Transparent); Chart.LegendSettings.Shadow.Offset = new Point(2,2); Chart.LegendSettings.Shadow.WidthPixel = 3;
A view of the legend after defining its settings
Chart Axes
A chart has two axes – X & Y. Depending on the source data they may be either discrete or continuous. Filling the axes labels is performed automatically upon assigning DataSource or through the FillAxes method based on points in series. The names of the axes are assigned through the AxisXName & AxisYName properties. Note: by default, the name for the X-axis is taken from argument’s name.
The ChartAxisX & ChartAxisY properties allow setting the appearance of the axes.
When a new series is added to the existing ones, or one of them is deleted from the chart, you need to refill axes labels using the UpdateAxes() method,
// deleting the first series from the first layer Chart.Layers[0].RemoveAt(0); // refilling axes layers Chart.UpdateAxes();
Chart Series
The Chart control builds charts by points from the series object of the TChartSeries type. Each series belongs to a certain layer. The number of series on a layer is unlimited.
Basic properties of the TChartSeries class:
- TChartSeries.Settings – series settings;
- TChartSeries.DisplayName – series name (as displayed in the Legend).
// setting of some properties for the first series of the first layer Chart.Layers[0].Series[0].DisplayName = "Value 1"; Chart.Layers[0].Series[0].Settings.Lines.View = RadarSoft.CommonChart.TLinesView.Line; Chart.Layers[0].Series[0].Settings.Points.View = RadarSoft.Common.TMarkerType.Diamond;
Chart Points
All chart series consist of TChartPoint points. The number of points in a series is unlimited.
Basic properties of the TChartPoint class:
- object X – the X coordinate;
- object Y – the Y coordinate.
// creating a point with coordinates ("Martch", 120) TChartPoint point1 = new TChartPoint(); point1.X = "Martch"; point1.Y = 120;
Skins
Chart can use a few standard color settings (skins):
- Blue;
- Beige;
- Blend;
- Green;
- Gray.You can change the current skin through the ApplySkin(ChartSkinType ASkinType) metod.
Chart Area Appearance Setting.
You can define the Chart Area appearance through the Chart.ChartSettings property. It allows setting the background filling, network parameters, and the interlace lines.
Series Appearance Setting
The basic parameter of any series is color. These are taken from the color palette. The type of palette is specified by the Chart.PaletteKind property. You can update the series colors by calling the SetSeriesColors() method.
Chart supports the export to the following file formats:
- Bmp
- Gif
- JPEG
- Png
- Tiff
Using the Print() property you can print out charts. Use the PrintPreview() method to preview charts before printing.
|