/
Chart

Chart

Jun 27, 2019

Class graphomate.ui.charts.Chart

extends sap.ui.core.Control

 

Quick Start

Creates a chart that can be used in layouts and other container components. The graphomate chart is highly customizable due to its large amount of properties and aggregations.

Usage Example
var chart = new graphomate.ui.charts.Chart({ chartType: graphomate.ui.charts.enums.ChartType.OffsetBar, series1: [5, 16, 17, 20], series2: [-2, 12, 15, 19] });

 

 

 

 

Constructor Details

new graphomate.ui.charts.Chart(id?:string, settings?:object)

Accepts an id and a settings object or one or none of them. The settings object defines initial property values as well as aggregated and associated objects. Every setting can also be set using the related setter method. The supported settings are:

Properties:
General
Data

  • series1 : float[] (default: [])

  • series2 : float[] (default: [])

  • series3 : float[] (default: [])

  • series4 : float[] (default: [])

  • series5 : float[] (default: [])

  • series6 : float[] (default: [])

  • series7 : float[] (default: [])

  • series8 : float[] (default: [])

  • series9 : float[] (default: [])

  • series10 : float[] (default: [])

  • datatypes1 : string[] (default: [])

  • datatypes2 : string[] (default: [])

  • datatypes3 : string[] (default: []),

  • datatypes4 : string[] (default: [])

  • datatypes5 : string[] (default: [])

  • datatypes6 : string[] (default: [])

  • datatypes7 : string[] (default: [])

  • datatypes8 : string[] (default: [])

  • datatypes9 : string[] (default: [])

  • datatypes10 : string[] (default: [])

  • seriesLabels : string[] (default: ["Series1","Series2","Series3","Series4","Series5","Series6","Series7","Series8","Series9","Series10"])

  • categoryLabels : string[][] (default: [])

  • axisLabels : string[] (default: [])

  • visibleSeries : int[] (default: [])

Labels
Axes

  • showCategoryAxis : boolean (default: true)

  • axisThickness : int, (default: 3)

  • fixedCategoryWidth : boolean (default: false)

  • categoryWidth : int (default: 50)

  • showValueAxis : boolean (default: false)

  • flipValueAxis : boolean (default: false)

  • valueAxisTickDistance : float (default: 50.0)

  • categoryCount : graphomate.ui.types.UnsignedInteger (default: 0)

Synchronization

  • comparisonGroup : string (default: null)

Deviations

  • negativeDeviationIsGood : boolean (default: false)

  • deviationGoodColor : graphomate.ui.types.HexColor (default: "#8CB400")

  • deviationBadColor : graphomate.ui.types.HexColor (default: "#FF0000")

  • spaceFactorDeviationChart : float (default: 0.25)

  • spaceFactorBaseChart : float (default: 0.5)

  • deviationPinLineBlack : boolean (default: false)

Highlight
Scaling
Outliers
Separators
Scaling Helper
Offset Bar Chart

  • showOffsetsOnLeft : boolean (default: false)

  • offsetBarDeviationLabelsOnTop : boolean (default: false)

Stacked Bar Chart
Waterfall Chart
Appearance
Aggregations:
Events:

  • elementClick : fnListenerFunction(oEvent)

 

 

 

Property Details

Each property "sampleProperty" can be set using the related setter "setSampleProperty". Each setter expects a valid value for the related property as input parameter and throws an exception for invalid values. It returns the "this context" for method chaining. Each property "sampleProperty" can also be gotten using the related getter method "getSampleProperty". It expects no input parameters and returns the current value of the related property. Each property that represents or partially contains indices excepts a 0 based index. Even to specify a data series that is named with "series1" for example the index 0 is expected.

  • setSampleProperty(value) - Sets the property to the passed value if valid and returns this for method chaining.

  • getSampleProperty() - Returns the current value of the property.

 

 

The Following Properties are available:

Property Name

Type

Description

Property Name

Type

Description

chartType

graphomate.ui.charts.enums.ChartType

Sets the Chart Type of the chart.

rotated

boolean

Sets the orientation of the chart. With the value false the chart will be horizontally oriented (default orientation for temporal data) while the value true will make the chart vertically oriented (rotated orientation for structural data).

series1

float[]

Sets the data for the first data series as an array of floating point numbers.

series2

float[]

Sets the data for the second data series as an array of floating point numbers.

series3

float[]

Sets the data for the third data series as an array of floating point numbers.

series4

float[]

Sets the data for the fourth data series as an array of floating point numbers.

series5

float[]

Sets the data for the fifth data series as an array of floating point numbers.

series6

float[]

Sets the data for the sixth data series as an array of floating point numbers.

series7

float[]

Sets the data for the seventh data series as an array of floating point numbers.

series8

float[]

Sets the data for the eighth data series as an array of floating point numbers.

series9

float[]

Sets the data for the ninth data series as an array of floating point numbers.

series10

float[]

Sets the data for the tenth data series as an array of floating point numbers.

datatypes1

string[]

Array of strings with the same length as the first data series. Each string represents the name of the datatype matched to the related value of data series one. A datatype describes the appearance of a value in the chart and has to be defined using the global DatatypeDictionary.

datatypes2

string[]

Array of strings with the same length as the second data series. Each string represents the name of the datatype matched to the related value of data series one.

datatypes3

string[]

Array of strings with the same length as the third data series. Each string represents the name of the datatype matched to the related value of data series two.

datatypes4

string[]

Array of strings with the same length as the fourth data series. Each string represents the name of the datatype matched to the related value of data series three.

datatypes5

string[]

Array of strings with the same length as the fifth data series. Each string represents the name of the datatype matched to the related value of data series four.

datatypes6

string[]

Array of strings with the same length as the sixth data series. Each string represents the name of the datatype matched to the related value of data series five.

datatypes7

string[]

Array of strings with the same length as the seventh data series. Each string represents the name of the datatype matched to the related value of data series six.

datatypes8

string[]

Array of strings with the same length as the eighth data series. Each string represents the name of the datatype matched to the related value of data series seven.

datatypes9

string[]

Array of strings with the same length as the ninth data series. Each string represents the name of the datatype matched to the related value of data series eight.

datatypes10

string[]

Array of strings with the same length as the tenth data series. Each string represents the name of the datatype matched to the related value of data series nine.

seriesLabels

string[]

Array of strings, where the index refers to a data series (first string relates to data series 1, second to series 2...) and the string describes the related series. Use empty string to skip a series that should not be labeled with a description. The visibility of series labels can be adjusted using the properties "showSeriesLabelsLeft" and "showSeriesLabelsRight".

categoryLabels

string[][]

Two dimensional array of strings, where the sub arrays are different levels of category labels to realize a hierarchy. The length of the sub arrays corresponds to the number of values per data series and the length of the main array defines the number of hierarchy levels. So a value of [["A","B","A","B"],["2009","2009","2010","2010"]] defines a hierarchy with two levels, where the first level labels the data series' values wth "A" or "B" and the second level labels them with a year.

axisLabels

string[]

Array of strings, where the first string will be displayed at the left and the second one at the right side of the axis (top / bottom of the axis in vertical orientation). The visibility of axis labels can be adjusted using the properties "showAxisLabelsLeft" and "showAxisLabelsRight"

visibleSeries

int[]

Array of indices refering to the data series. An empty array will result in all series being displayed. An array with the elements 0 and 2 will hide all series but the first and the third. Useful for hiding series which are only used to calculate deviations from.

showCategoryLabels

boolean

Sets the visibility of all category labels.

fontSize

int

Sets the font size in px.

fontFamily

string

Sets the font family by its name (e.g.: "Arial").

fontColor

graphomate.ui.types.HexColor

Sets the font color of the chart's text.

labelPositioningMode

graphomate.ui.charts.enums.LabelPositioningMode

Adjusts the behavior of the element labels.

collisionAdjustment

graphomate.ui.types.UnsignedInteger

Specifies the number of pixels two element labels are allowed to overlap until one of them gets hidden when property "labelPositioningMode" is set to automatic.

basicNumberFormat

string

Sets the number format string of absolute numbers according to numeral.js. For example a basic number format string of "0.00a" will format the number labels to have two decimal places and to be shortened using an abbreviation.

basicNumberFormatPercent

string

Sets the number format string of relative numbers according to numeral.js. For example a basic number format string of "0.00%" will format the number labels to have two decimal places and to end with the percent sign as a suffix.

showSeriesLabelsLeft

boolean

Sets the visibility of the series labels on the left side (top for a vertical oriented chart).

showSeriesLabelsRight

boolean

Sets the visibility of the series labels on the right side (bottom for a vertical oriented chart).

labelFormatMode

graphomate.ui.enums.LabelFormatMode

Sets whether the basic or the extended label format will be used for formatting the number labels.

suppressZeroLabels

boolean

Sets whether the element labels of 0 values should be hidden.

suppressRepeatingCategoryLabels

boolean[]

Defines in which level of the category label hierarchy repeating labels should be suppressed. Expects the following format [true,false,true] and alike, where the first boolean value relates to the first level of category labels.

showAxisLabelsLeft

boolean

Sets the visibility of the left axis label (top axis label in a vertical oriented chart).

showAxisLabelsRight

boolean

Sets the visibility of the right axis label (bottom axis label in a vertical oriented chart).