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.

Data binding

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:
1. Text file;
2. Excel file;
3. Data array;
4. Data base;
5. IListSource;
6. 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.

Program Data Filling

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 Elements

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;

Appearance Settings

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.

Export

Chart supports the export to the following file formats:
• Bmp
• Gif
• JPEG
• Png
• Tiff

Print

Using the Print() property you can print out charts. Use the PrintPreview() method to preview charts before printing.