Android Charts

SmartDevicesPlus Android Charts User Control uses Infragistics Library to build several types of charts for the Android platform.

SDPLusAndroidChartsImg01  SDPLusAndroidChartsImg02

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.

SDPLusAndroidChartsImg03

Control Properties


After this, you will see the SmartDevicesPlus NucliOS Chart User Control properties displayed in the property grid.

Category Property  
Control Info Type SDPLusAndroidChartsImg04
Category Attribute
Category Field Specifier
Series Attribute Collection
Series Field Specifier Collection
Legend Location
Series Legend Collection
Legend Horizontal Alignment 
Legend Horizontal Scroll
X Axis Labels Positions 
Y Axis Labels Positions 
Zoom
Marker Type
Trendline
Category Date Format
Invert Y Axis
Invert X Axis
Y Axis Minimum
Y Axis Maximum
Animation
Pie Chart Selection Mode
Pie Inner Circle Radius Percent
Overlap

Type

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:

Category Attribute and Category Field Specifier

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.

SDPLusAndroidChartsImg05

Image showing category on an axis based chart

Series Attribute Collection and Series Field Specifier Collection

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:

SDPLusAndroidChartsImg06

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:

SDPLusAndroidChartsImg07

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

SDPLusAndroidChartsImg08

Legend Location:

This combo property allows you to customize the position of the legend relative to the chart. It can be set to:

  • None
  • Top
  • Bottom

Setting legend location to "None" will disable the chart legend.

The following image shows how the legend is displayed when "Top" is selected.

SDPLusAndroidChartsImg09

Series Legend Collection

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"

Legend Horizontal Alignment 

This combo property allows you to customize the horizontal position of the legend inside the legend box. It can be set to:

  • Center
  • Right
  • Left

"Legend Location" must be set to either Top or Bottom in order to see this property.

Legend Horizontal Scroll

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.

X Axis Labels Positions 

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).

Y Axis Labels Positions 

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).

Zoom

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.

Marker Type

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

Trendline

This combo property enables the chart trendline. It can be set to:

  • None
  • LinearFit
  • LogarithmicFit
  • ExponentialFit
  • PowerlawFit
  • QuadraticFit
  • CubicFit
  • QuarticFit
  • QuinticFit

Category Date Format

This property lets you customize the way a date is displayed when using a Date attribute as the chart category attribute.

Invert Y Axis

This property inverts the Y axis range. This means "lower" values will be displayed on top of the chart and higher values on bottom.

SDPLusAndroidChartsImg10

Invert X Axis

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.

Y Axis Minimum

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

Y Axis Maximum

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

Animation

This property enables or disables the chart initial "data fill effect" animation.

Pie Chart Selection Mode:

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

SDPLusAndroidChartsImg13

Pie Inner Circle Radius Percent:

This property let set the inner radius of pie charts so you can customize how they will displayed:

SDPLusAndroidChartsImg14

Overlap

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.

SDPLusAndroidChartsImg11

Image showing 50% overlap

Theme

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:

  • Light
  • Dark
  • Custom

SDPLusAndroidChartsImg12

Property Chart As Image:

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):

SDPLusAndroidChartsImg15