Overview
This page presents provides information about Sparklines and how they are used.Sparklines, powerful and tiny charts, are now embeddable their usage. Sparklines are small charts that can now be embedded in a DataGrid (Table).
Would you like to show a quick visual ofThey allow users to display past data or performance
rightnext to the current value
? Now you can!. Use Sparkline trends right next to alongside current values for improved context and possible indicator of where things are headingto provide context and indicate potential future trends.
On this page:
Table of Contents | ||
---|---|---|
|
Understanding Sparklines in DataGrids
A sparkline is a
verysmall line chart, typically drawn without axes or coordinates.
In a simple and highly condensed way, sparklinesSparklines represent the general shape of a variation
, typicallyover time
,in a desired measurement, such as
thetemperature or
thestock market price.
SparklinesThey are small enough to be embedded in text
,or
several sparklines can becombined
togetheras elements of a small group.
Typical charts
are designed toshow as much data as possible and are set off from the text flow. In contrast, sparklines are
intended to besuccinct
, memorable,and located directly in the text.
Styling
AvailableSparklines are available in
4four styles
, you can show your mighty-mini-charts using “Line”, “Area”, “Bar”, or “WinLoss” formats.<<<<<<<<<<<<<. A FIGURA ABAIXO PRECIA SER RECPATURA, MAIS CONDENSADA E COM MELHOR VISUALIZACAO DOS EFEITOS: Line, Area, Bar, and WinLoss.
Requirements and Procedures
Below you will find the steps to implement a Sparkline in your project:
- Create a database for the numeric information that will be displayed.
- Configure the tables and queries that will be used in the data grid.
- Configure the Draw Environment and implement the necessary code on CodeBehind.
Database
On 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 has many tables. However, not all of them will be used in the project. The image below shows all the available tables and highlights the ones that will be used.
Tables and Queries
On Edit → Dataset → Tables/Queries, you can create internal tables and queries for internal usage.
The tables must be mapped to 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.
Project Configuration
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 configuration (1).
To manipulate a DataGrid control in CodeBehind, the best approach is to use the Control Name field (2) for the configuration dialog.
Create a Database
Store numeric information for sparklines.
- Go to Datasets → DBs.
- Create a new database
- Select a Provider and Database at your choice.
Configure Tables and Queries
Set up tables and queries for the data grid.
- Go to Datasets → Tables or Queries.
- Create internal table and queries.
- Map these tables to existing database tables.
- Define each query for a specific database with a predefined SQL Statement if needed.
Project Configuration
- Go to Displays → Draw.
- On the Components Panel, select Modules, then DataGrid.
- Click or drag-and-drop it on the Drawing area to use it.
- Double-click the component to open the configuration window.
- Set a table as the DataSource at Data Source,
- Use the Control Name field to manipulate the DataGrid control in CodeBehind.
Implement CodeBehind
Implement the code to display sparklines. Use the following example to set up the DataGrid control:Then, you can use that given name (2) to get control of the element and change its properties. The below is an example.
Code Block |
---|
TDataGridWindow grid = CurrentDisplay.GetDataGrid("EmployeesEmployee"); grid.GridControl.SetColumnSparkline("Orders", this.SparklineCollectionDelegate, style); // SetColumnSparkline parameters - fieldName (string) // - populateCallback (SparklineCollectionDelegate) // - style (string) |
Define a delegate to refer to a method. The delegate must match the method’s signature and return type. Use the following code to create the Sparkline:
Code Block |
---|
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;
}
|
Note |
---|
A delegate will only call a method that agrees with its signature and return type. A method can be either a static method associated with a class, or it can be an instance method associated with an object. |
Below is a callback. The system will always look for a code EXACTLY like this one requires this exact code to create the Sparkline. So if you want to To use this feature, you MUST have must include this code on in your code behindCodeBehind.
Code Block |
---|
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; } |
A sparkline is updated following the logic seen in the sample code belowUpdate the sparkline using the following logic:
Code Block |
---|
// 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 available Sparkline styles are: <<<<<.this information is the same as the one in the Styling section. Could we remove it?>>>>
- Line
- Area
- Bar
- WinLoss
Runtime Execution
When the solution runs, the DataGrid control with Sparklines will display real-time data from the configured database. The sparklines will visually represent trends and patterns in the numeric data for each row in the DataGrid. Users can interact with the DataGrid by sorting, filtering, and selecting rows, but the sparklines themselves are display-only and do not support direct interaction.
This setup is particularly useful for monitoring key performance indicators (KPIs) in real-time, as it provides a quick visual summary of trends without the need for detailed analysis. Sparklines help in identifying patterns and anomalies in large datasets, making them valuable in dashboards and reports where space is limited but trend visualization is needed. Additionally, incorporating sparklines in decision support systems offers at-a-glance insights, aiding in quick and informed decision-making
.
In this section...
Page Tree | ||||
---|---|---|---|---|
|