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 information corresponding to grid items, as a chart: pie or timeline (if you have a date attribute):
Let's do the two examples: A Pie chart and a TimeLine chart.
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:
Set the following properties on the List node.
Let's configure the properties to make this control work. Take a look at the properties marked on the picture above:
||SD Charts. We want the grid to be shown as a Chart.
||The name of the chart that will be shown on the device above the chart.
||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
||The attribute that is going to be used for the chart. In this case the Country population values.
||The attribute that is going to be used to show the reference to each slice of the chart.
||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:
Our WorkWithDevicesCountry will show on 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:
We are going to do an example using a timeline chart that takes the information from an Attribute.
For this example the following Transaction is going to be used:
On the List node configure the following properties:
||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 behavior 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 these 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 these 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.
Container of sections in the detail screen