HowTo: Using SD Charts Control for Smart DevicesOfficial Content

Many times we need to show information in a visual way and Charts are one of the best formats for information to be shown.

Lets you display numeric infomation corresponding to grid items, as a chart: pie or timeline (if you have a date attribute):

SDChart - Android - GeneXus 15

Lets do the two examples: A Pie chart and a TimeLine chart. 

Example 1

This control can be used to take information from a Structured Data Type or Attributes. In this article we are going to use Attributes as our information source.

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

SDChartsTrnCountry

Set the following properties on the List node.

SDChartsProperties

Let's configure the properties to make this control work. Take a look at the properties marked on the picture above:

Control Type SD Charts. We want the grid to be shown as a Chart.
Title The name of the chart that will be shown on the device above the chart.
Type The type of chart you want it to be (Pie or Timeline), in this case Pie.
Show in Percentage This property sets if the values are shown as real values or percentage values
Value Attribute The attribute that is going to be used for the chart. In this case the Country population values.
Category Attribute The attribute that is going to be used to show the reference to each slice of the chart.
CommentsAttribute The 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 our case we need to set this property because if not, the value attribute would be Country Id. 

Note 2:  Make sure that the Value Attribute is on the Grid like the following image shows:

SDChartsGrid

Done!

Our WorkWithDevicesCountry will show on a pie chart the percentages per country of the South American continent population. When a slide is tap the value of Category Att is shown below:

ChartsiPhone ChartsiPhone2

Example 2

We are going to do an example using a timeline chart which takes the information from an Attribute.

For this example the following Transaction 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 GX will set the first attribute with a Date domain as the "Time Attribute".
Series Attribute Collection If this property is not set the default behaviour is the same as described on Example 1 (to use the first numeric attribute of the list). In this case we want to follow our expenses of home, food and car, so we want this 3 attributes to appear in this property. To do so, put the exact name of the attributes separated by a comma.
Series Label Collection If this property is left blank the labels are shown with the attribute name. We have to write this labels in the same order as the attributes appear on the Serial Attribute Collection property. (The label and attribute is 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 the image above shows.

Done. This chart will show the evolution of your expenses separated by different concepts.

ChartsTime1 ChartsTime2

Videos

Start Video Work With for Smart Devices – General Aspects and List layout
Start Video WorkWith for Smart Devices – Detail Layout