|
As of SmartDevicesPlus 6, this control was removed from SmartDevicesPlus controls library.
Please check documentation for Chart User Control
SmartDevicesPlus Android Charts User Control uses Infragistics Library to build several types of charts for the Android platform.
 
SmartDevicesPlus Android Charts User Control has to be applied to a GeneXus Grid, so in order to enable it, first you'll have to add a GeneXus Grid in your SDPanel and then select "SmartDevicesPlus Android Charts" in the grid's "Control Type" property.
After this, you will see the SmartDevicesPlus NucliOS Chart User Control properties displayed in the property grid.
This property is a Combo that lets the you choose the Chart Type that will be displayed, ie: you could choose to build a "Area" or a "Line" chart.
The supported chart types are:
This property lets you customize the attribute that will be used to fill the category of the chart. The category represents the data shown as the "X axis" on any axis based charts.
When using a grid based on a SDT, the category attribute will be disabled, and the "Category Field Specifier" property will be enabled to let you choose the SDT field containing the category data.
Image showing category on an axis based chart
When using a chart you may want to obtain a chart that contains one or multiple series. This property lets you customize the attribute (or field if you are using an SDT based grid) used to obtain each serie's value.
For example, if you want a Spline chart that shows the product sales for each product of your company, you'll want to crate a Single Serie line chart. For this, you'll have to write "ProductSales" on the "Series Attribute Collection" property. By doing this you sholud obtain a chart similar to the following:
Then, if what you want is a chart that shows your products volumne compared with the products prices and the product weight , you'll have to write each serie attribute separated by a comma: "ProductVolume, ProductPrice, ProductWeight" on the "Series Attribute Collection" property. By doing this you sholud obtain a chart similar to the following, where each line represents one of the selected series:
Important: If you are using an Attribute based grid, for each attribute you write in the "Series Attribute Collection" property you will have to manually add the attribute to the grid's layout
This combo property allows you to customize the position of the legend relative to the chart. It can be set to:
Setting legend location to "None" will disable the chart legend.
The following image shows how the legend is displayed when "Top" is selected.
When the chart legend is enabled you have to write the legend text for each serie you want to display. When more than one serie is present, you must separate each legend with a comma.
In our example, we wrote "ProductSales, ProductProductionUnits, ProductProductionCosts" on the "Series Attribute Collection" property, so this means we'll have to write three texts on the "Series Legend Collection" property, one for each serie e.g. "Sales, Units, Cost"
This combo property allows you to customize the horizontal position of the legend inside the legend box. It can be set to:
"Legend Location" must be set to either Top or Bottom in order to see this property.
This property enables scrolling inside the legend box.
When set to "Enable", legends will be displayed in one single row and scrolling will be posible when the amount of legends exceeds the legend box size.
When set to "Disable", legends will be displayed in multiple rows, showing only 4 legends per row, making all legends visible all the time.
"Legend Location" must be set to either Top or Bottom in order to see this property.
This property sets where the axis line and the labels for the X Axis will be placed. It can be set to:
- None: Labels are hidden.
- Bottom/Outside: Axis appears at the bottom of the chart, and the labels bellow the axis.
- Bottom/Inside: Axis appears at the bottom of the chart, and the labels above the axis (inside the chart).
- Top/Outside: Axis appears at the top of the chart, and the labels above the axis.
- Top/Inside: Axis appears at the top of the chart, and the labels below the axis (inside the chart).
This property sets where the axis line and the labels for the Y Axis will be placed. It can be set to:
- None: Labels are hidden.
- Left/Outside: Axis appears at the left of the chart, and the labels left from the axis.
- Left/Inside: Axis appears at the left of the chart, and the labels right from the axis (inside the chart).
- Right/Outside: Axis appears at the right of the chart, and the labels right from the axis.
- Right/Inside: Axis appears at the right of the chart, and the labels left from the axis (inside the chart).
This combo property sets the chart zoom mode. It can be set to:
- None: Zoom is disabled.
- Horizontal: Only horizontal values are zoomed.
- Vertical: Only vertical values are zoomed.
- Both: Full zoom is supported on both directions.
This combo property lets you change the marker used to represent the data in the chart. You can choose between:
- None (marker is not used)
- Automatic
- Circle
- Diamond
- Hexagon
- Hexagram
- Pentagon
- Pentagram
- Pyramid
- Square
- Tetragram
- Triangle
This combo property enables the chart trendline. It can be set to:
- None
- LinearFit
- LogarithmicFit
- ExponentialFit
- PowerlawFit
- QuadraticFit
- CubicFit
- QuarticFit
- QuinticFit
This property lets you customize the way a date is displayed when using a Date attribute as the chart category attribute.
This property inverts the Y axis range. This means "lower" values will be displayed on top of the chart and higher values on bottom.
This property inverts the X axis values. This means the first category is displayed on the right of the chart, and the last category on the left.
This property allows you to customize the position of Y Axis minum value. This will change the position where the X Axis apears.
By default Y Axis Minimum is set to 0. You can manually set a static value for the Y Axis Minimum by entering a number e.g. "10", or you can set the minimum dinamically by writing down the name of a variable which in runtime will contain the minimum value e.g. "&YAxisMin".
This property also allows dinamic modification which means you can assign the value directly on the start event:
Event Start
ChartGrid.YAxisMinimum = -100
Endevent
This property allows you to customize the position of Y Axis maximum value.
By default Y Axis Maximum is set to empty which means the maximum will be calculated depending on the series values. You can manually set a static value for the Y Axis Maximum by entering a number e.g. "100", or you can set the maximum dinamically by writing down the name of a variable which in runtime will contain the maximum value e.g. "&YAxisMax"
This property also allows dinamic modification which means you can assign the value directly on the start event:
Event Start
ChartGrid.YAxisMaximum = 500
Endevent
This property enables or disables the chart initial "data fill effect" animation.
This combo property sets the selection mode of the Pie Chart. It can be set to:
- None: Selection is not available on the chart
- Single: Only one item of piece of the pie chart can be selected
- Multiple: Any piece of the chart can be selected
This property let set the inner radius of pie charts so you can customize how they will displayed:
This combo property sets the overlap mode in Columns Chart. It can be set to:
- None: Overlap is disabled
- 25%: 25% of the column is overlaped
- 50%: 50% of the column is overlaped
- 75%: 75% of the column is overlaped
- 100%: The columns are fully overlaped
"Type" must be set to "Column" in order to see this property.
Image showing 50% overlap
In order to choose the general look and feel of the chart you must change the class associated to it in the correspondent theme (SDPAndroid, SDPIOS) . Each theme uses its own colors, gradients, fonts, etc.
The available themes are:
This feature add the possibility to take a screenshot of a Chart. In this way, developers can add a button in screens where they have Charts and let the users to export the chart as an image.
To use this property is necessary to include the following code in an Event (for example from a button):
|