Page History

...

A sparkline is a very small line chart, typically drawn without axes or coordinates. In a simple and highly condensed way, sparklines represent the general shape of a variation, typically over time, in a desired measurement, such as the temperature or the stock market price.

Sparklines are small enough to be embedded in text, or several sparklines can be grouped combined together as elements of a small group. 

The typical chart is Typical charts are designed to show as much data as possible and is are set off from the flow of text. By In contrast, sparklines are intended to be succinct, memorable, and located where they can be most beneficialdirectly in the text. 

...

Requirements and Procedures

Below you will find the steps that need to be followed in order to implement a Sparkline in your project.

1. A Create a database containing for the numeric information that will be displayed is.
2. Configure the tables and queries that are going to will be used in the data grid.
3. Configure the Draw Environment and implement the necessary code on CodeBehind. 

Database

In Edit>Datasets>DBs, you need to include the external database by using one of the providers available in the Available Providers list. In this example, we are going to use a SQLite provider in a database called Nwind.

This example database contains has many tables in it. However, not all of them the tables will be used in the project. The image below shows all the available tables and highlights the ones that will be used.

...

The tables must be mapped to existing ones from tables that already exist in the database, as explained in the previous section. Each query is defined for a specific database and may contain a predefined SQL Statement.

...

After setting up the tables and queries that you will use, you need to configure one of the tables as the DataSource in the DataGridWindow component configuration (1).

To manipulate a DataGrid control in CodeBehind, th   e the best approach is to use the Control Name field (2) , for the configuration dialog.

...

Then, you can use that given name (2) to get control of the element and change its properties. The below is an example. 

TDataGridWindow grid = CurrentDisplay.GetDataGrid("Employees"); 
grid.GridControl.SetColumnSparkline("Orders", this.SparklineCollectionDelegate, style);
// SetColumnSparkline parameters - fieldName (string)
//	               - populateCallback (SparklineCollectionDelegate)
//	               - style (string)

...

A delegate is an object which refers to a method or you can say consider it is as a reference type variable that can hold holds a reference to the methodsa method. It provides a way which tells to know which method is to be called when an event is triggered. 

Below is a callback. The system will always look for a code EXACTLY like this one to create the Sparkline. So if you want to use this feature, you MUST have this code on your code behind.

Dictionary<int, ArgumentValue[]> mapEmployeeToOrders = null;
private ArgumentValue[] SparklineCollectionDelegate(string fieldName, System.Data.DataRow row)
{
ArgumentValue[] sourceCollection;
int  emplID  =  TK.To< int>(row["EmployeeID"]);
if (!this.mapEmployeeToOrders.TryGetValue(emplID, out sourceCollection)) 
       sourceCollection = new ArgumentValue[0];
return sourceCollection;
}

The Sparkline A sparkline is updated following the logic as seen in the sample code below:

// 	Get data from tables 	// DataTable employees =  @Dataset.Table.Employees.SelectCommand(); 
DataTable orders = @Dataset t.Table.Orders.SelectCommand();
DataTable invoices = @Dataset.Query.Invoices.SelectCommand();
// 	//

this.SetSparkline(style); // Set Style to Sparkline this.mapEmployeeToOrders = new Dictionary<int, ArgumentValue[]>();
foreach (DataRow empl in employees.Rows)
{
int  emplID  =  TK.To<int>(empl["EmployeeID"]);
ist<ArgumentValue> sourceCollection = new List<ArgumentValue>();
foreach (DataRow order in orders.Select("EmployeeID = " + emplID))
{
int  orderID  =  TK.To< int>(order["OrderID"]); ArgumentValue av = new ArgumentValue();
av.Argument  =  order["OrderDate"];  //  x-axis  for  sparkline
foreach (DataRow invoice in invoices.Select("OrderID = " + orderID))
{
double value = TK.To< double >(av.Value);
double  quantity  =  TK.To< double >(invoice["Quantity"]); 
double  unitPrice  =  TK.To< double >(invoice["UnitPrice"]);
av.Value = value + (quantity * unitPrice); // y-axis for sparkline
}
sourceCollection.Add(av);
}
//  map  values  (y-axis)  and  order  date  (x-axis)  to  employee  ID this.mapEmployeeToOrders[emplID] = sourceCollection.ToArray();
}

The Styles available for Sparkline styles are:

• Line

• Area

• Bar

• WinLoss