HowTo: Using Charts Control

Official Content
This documentation is valid for:

In many cases, you need to show information in a visual way and Charts are one of the best formats to do so.

You can display numeric information corresponding to grid items as a chart, which can be a pie or a timeline (if you have a date attribute):

SDChart - Android - GeneXus 15

Below are both examples: Pie chart and TimeLine chart.

Example 1

This control can be used to take information from a Structured Data Type or Attributes. In this article, Attributes will be used as the information source.

The following Transaction object with the Work With Pattern applied (see Applying Work With for Smart Devices Pattern) is going to be used for the example:

SDChartsTrnCountry

Set the following properties on the List node.

SDChartsProperties

Next, configure the properties to make this control work. Take a look at the properties marked on the picture above:

Control Type Charts. You want the grid to be shown as a Chart.
Title Name of the chart that will be shown on the device above the chart.
Type Type of chart you want it to be (Pie or Timeline); in this case, it will be a Pie.
Show in Percentage This property sets if the values will be shown as real values or percentage values.
Value Attribute Attribute that will be used for the chart. In this case, the Country population values.
Category Attribute Attribute that will be used to show the reference to each slice of the chart.
CommentsAttribute Attribute displayed to the right of the information of the selected portion.

 

Note 1: If you don't set the Value attribute property, the control will take the first Numeric attribute as the value attribute by default. In this case, you need to set this property because otherwise, the value attribute would be Country Id.

Note 2: Make sure that the Value Attribute is on the Grid as shown in the following image:

SDChartsGrid

Done!

Your WorkWithDevicesCountry will show in a pie chart the percentages per country of the South American continent population. When a slide is tapped, the value of Category Att is shown below:

ChartsiPhone ChartsiPhone2

Example 2

This example uses a timeline chart that takes the information from an Attribute.

For this example, the following Transaction object is going to be used:

SDChartsTrnExpenses

On the List node, configure the following properties:

SDChartsTimeline

Time attribute This property is only available for TimeLine charts. If it is left blank, GeneXus will set the first attribute with a Date domain as the "Time Attribute."
Series Attribute Collection If this property is not set, the default behavior is the same as described in Example 1 (use the first numeric attribute of the list). In this case, you want to record your home, food, and car expenses, so you want these 3 attributes to appear in this property. To do so, enter the exact name of the attributes separated by commas.
Series Label Collection If this property is left blank, the labels are shown with the attribute name. You have to write these labels in the same order in which the attributes appear on the Serial Attribute Collection property (the label and attribute are associated by position).

Note: You need to have the attributes that you set as the Time attribute and as the Series Attribute collection on the Grid as shown in the image above.

Done. This chart will show the evolution of your expenses organized in different categories.

ChartsTime1 ChartsTime2

Videos

Start Video Container of sections in the detail screen