Chart User Control

WorkWithPlus for Native Mobile's Charts User Control is a user control that allows GeneXus developers to create panels with rich data display.

This 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 Panel and then select "SD+ Charts" in the grid's "Control Type" property.

sdp_usercontrols_charts_controltype_select

Control Customization

This user control look and feel can be customized using the theme object. For further information please check Charts customizations

Control Properties


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

Category Property  
General Series Type Collection sdp_usercontrols_charts_properties
Zoom Mode
Marker Type
Animation
Marker Show Value
Max Interval Count
Pie Chart Selection Mode
Pie Inner Circle Radius Percent
Pie Show Values
Pie Others Category Text
Categories Category Attribute
Category Field Specifier
Category Date Format
Category Axis Labels Positions 
Series Series Attribute Collection
Series Field Specifier Collection
Values Axis Labels Positions
Values Axis Maximum
Values Axis Minimum
Legend Legend Location
Series Legend Collection
Legend Horizontal Alignment 

 

Type

This property lets you choose the Chart Type that will be displayed, ie: you could choose to build an "Area" or a "Line" chart.

The supported chart types are:

  • Pie
  • Area
  • Bar
  • Column
  • Line
  • Spline Area
  • Spline
  • Step Area
  • Step Line
  • Waterfall
  • Radial Area
  • Radial Line
  • Stacked Area
  • Stacked Bar
  • Stacked Column
  • Stacked Line
  • Stacked Spline Area
  • Stacked Spline
  • Stacked 100% Area
  • Stacked 100% Bar
  • Stacked 100% Column
  • Stacked 100% Line
  • Stacked 100% Spline Area
  • Stacked 100% Spline
  • Range Area
  • Range Column
  • Points (available only on iOS)

In case you are building a chart with multiple series, you can choose different chart types for each of your series, but only some of the chart types can be used in combination with other charts:

  • Area
  • Line
  • Spline Area
  • Spline
  • Step Area
  • Step Line
  • Column

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 in 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

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 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 the pie charts so you can customize how they will be displayed:

SDPLusAndroidChartsImg14

Pie Show Values:

This property allows showing the values of the Series on the Chart. The possible values are:

  • None.
  • Labels: show the label of the series:
  • Values: show the value of the series.
  • Percentage: show the percentage which occupies this series.
  • Series texts

Pie Others Category Text

This property enables the special category "Others".

This category will automatically group all the small values into a single category, which will be displayed using the "The Others Category Text".

e.g. In the following example

sdpuscharts_prop_pieother_sample1

After this property is set

sdpuscharts_prop_pieother

"Others" category will group the categories "H", "I" and "J"

sdpuscharts_prop_pieother_sample2

Category properties

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 that is based on an 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

Category Axis Labels Positions 

This property sets where the axis line and the labels for the category 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 below 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).

Category Date Format

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

Series Values properties

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 series value.

For example, if you want a Spline chart that shows the product sales for each product of your company, you'll want to create a Single Serie line chart. For this, you'll have to write "ProductSales" on the "Series Attribute Collection" property. By doing this you should obtain a chart similar to the following:

SDPLusAndroidChartsImg06

Then, if what you want is a chart that shows the volume of your products compared with the product prices and the product weight, you'll have to write each series attribute separated by a comma: "ProductVolume, ProductPrice, ProductWeight" on the "Series Attribute Collection" property. By doing this you should obtain a chart similar to the following, where each line represents one of the selected series:

SDPLusAndroidChartsImg07

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

Values Axis Minimum

This property allows you to customize the position of the values axis minimum value. This will change the position where the values axis appears.

By default, the values axis minimum value is set to 0. You can manually set a static value for the values axis Minimum by entering a number e.g. "10", or you can set the minimum dynamically by writing down the name of a variable which in runtime will contain the minimum value e.g. "&YAxisMin".

This property also allows dynamic modification which means you can assign the value directly on the start event:

Event Start

       ChartGrid.ValueAxisMinimum = -100

Endevent

Comment: The assignation of the property directly on Events, only works for Android, for iOS you should assign the variables in the properties and then assign a value to the variable in the events.In iOS only the integer value of the number is taken. Ex: 89.9 will take the value 89 nad 89.1 will take the value 89.

Values Axis Maximum

This property allows you to customize the position of values axis maximum value.

By default, values 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 values axis Maximum by entering a number e.g. "100", or you can set the maximum dynamically by writing down the name of a variable which in runtime will contain the maximum value e.g. "&YAxisMax"

This property also allows dynamic modification which means you can assign the value directly on the start event:

Event Start

       ChartGrid.YAxisMaximum = 500

Endevent

Comment: The assignation of the property directly on Events, only works for Android, for iOS you should assign the variables in the properties and then assign a value to the variable in the events.In iOS only the integer value of the number is taken. Ex: 89.9 will take the value 89 nad 89.1 will take the value 89.

Chart Value Marker Picture:

This property gives the possibility to add format to the Series Values. The supported format are the same of  the ones you can use in the "Picture" property of Genexus.

ImprovemetnsInChartsImg04ImprovemetnsInChartsImg06

Legend properties

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 the 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 series you want to display. When more than one series 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 series 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 possible 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.

Series Multiple with differents charts types

This behavior is achieved with the property "Series Type Collection". In this property you need to select the Chart Types which you want to combine.

The possible combinables series are: 

  • Area.
  • Column.
  • Line.
  • SPLineArea.
  • SPLine.
  • StepArea.
  • StepLine.

ImprovemetnsInChartsImg07

ImprovemetnsInChartsImg05

Property Chart As Image:

This feature adds 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 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