Chart
- Tim Schauder
- Fynn Grandke (Unlicensed)
Owned by Tim Schauder
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]
});
The Following Properties are available:
| 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). |
| splitSignForCategoryLabels | string | Sets the string that will be replaced with a new line when found in any category label. |
| splitSignForAxisLabels | string | Sets the string that will be replaced with a new line when found in any axis label. |
| locale | graphomate.ui.enums.Locale | Sets the locale used for the formatting of number values when property "labelFormatMode" is set to basic. |
| categoryLabelRotation | graphomate.ui.types.RotationAngle | Rotates the category labels by an angle between 0 and 90 degree. |
| showCategoryAxis | boolean | Sets the visibility of the category axis. |
| axisThickness | int | Sets the thickness of the category axis in px. |
| fixedCategoryWidth | boolean | Sets whether the fixed category width set by property "categoryWidth" will be used. If set to false, the width will be calculated automatically to use the available space. |
| categoryWidth | int | Sets the manual category width in px. It will only be applied, if property "fixedCategoryWidth" is enabled. |
| showValueAxis | boolean | Sets the visibility of the value axis. |
| flipValueAxis | boolean | When set to true, the value axis will be displayed at the right side (at the bottom in a vertical oriented chart) instead of the default left position. |
| valueAxisTickDistance | float | Sets the interval size of the value axis. This is an approximate value. The actual value used by the rendering logic may differ. |
| categoryCount | graphomate.ui.types.UnsignedInteger | Sets the number of displayed categories. If a data series has more values than the specified number of categories, the remaining categories won't be displayed. |
| comparisonGroup | string | Sets a string for the global comparison group. All charts in the same Document Object Model Tree which have been assigned the same comparison group string will be scaled the same. |
| negativeDeviationIsGood | boolean | Switches the usage of the colors "deviationGoodColor" and "deviationBadColor". |
| deviationGoodColor | graphomate.ui.types.HexColor | Color used for displaying positive deviations. |
| deviationBadColor | graphomate.ui.types.HexColor | Color used for displaying negative deviations. |
| spaceFactorDeviationChart | float | Sets the space factor for each deviation chart. It affects the share of the available height a deviation chart will use to render (share of available width for vertical orientation). The formular for calculating the used space of a deviation chart is the following, where n is the number of deviation charts in the chart: spaceFactorDeviationChart / (n*spaceFactorDeviationChart + spaceFactorBaseChart) |
| spaceFactorBaseChart | float | Sets the space factor for the base chart. It affects the share of the available height the base chart will use to render (share of available width for vertical orientation). The formular for calculating the used space of the base chart is the following, where n is the number of deviation charts in the chart: spaceFactorDeviationChart / (n*spaceFactorDeviationChart + spaceFactorBaseChart) |
| deviationPinLineBlack | boolean | If set to true, the pin line of percentage deviation charts will be displayed black according to the IBCS standard. |
| highlightMode | graphomate.ui.charts.enums.HighlightMode | Sets the chart's highlight mode. Highlights are emphasized deviations between two values of special interest. |
| showHighlightLabelPercentage | boolean | Sets the visibility of percentage deviations in a highlight. If set to true, the highlight labels will include information about percentage deviation. |
| showHighlightLabelAbsolute | boolean | Sets the visibility of absolute deviations in a highlight. If set to true, the highlight labels will include information about absolute deviation. |
| scaleMode | graphomate.ui.enums.ScaleMode | Sets the scale mode. In case of manual scaling the values of the properties "manualScaleMax", "manualScaleMin", "manualScalePercentMin" and "manualScalePercentMax" will apply. |
| manualScaleMax | graphomate.ui.types.PositiveFloat | Sets the maximum value of the chart's absolute scale. Will be applied to absolute values when the property "scaleMode" causes a manual scaling. |
| manualScaleMin | graphomate.ui.types.NegativeFloat | Sets the minimum value of the chart's absolute scale. Will be applied to absolute values when the property "scaleMode" causes a manual scaling. |
| manualScalePercentMin | graphomate.ui.types.NegativeFloat | Sets the minimum value of the chart's percentage scale. Will be applied to percentage values when the property "scaleMode" causes a manual scaling. |
| manualScalePercentMax | graphomate.ui.types.PositiveFloat | Sets the maximum value of the chart's percentage scale. Will be applied to percentage values when the property "scaleMode" causes a manual scaling. |
| outlierSize | graphomate.ui.types.UnsignedInteger | Sets the outlier triangle's size in px. Outliers are chart elements representing values which exceed the chart's scale (e.g. because the chart's scale gets manipulated by the comparison group) or are forced to be displayed by specific thresholds. |
| useOutlierThreshold | boolean | Sets whether the properties "positiveOutlierThreshold" and "negativeOutlierThreshold" get applied. If set to true each value that exceeds the thresholds will be displayed as an outlier. |
| positiveOutlierThreshold | graphomate.ui.types.PositiveFloat | Positive floating point number. Each value that exceeds the threshold will be displayed as an outlier, if the property "useOutlierThreshold" is set to true. |
| negativeOutlierThreshold | graphomate.ui.types.NegativeFloat | Negative floating point number. Each value that exceeds the threshold will be displayed as an outlier, if the property "useOutlierThreshold" is set to true. |
| outlierMode | graphomate.ui.enums.OutlierMode | Sets the outliers' style. |
| separatorMode | graphomate.ui.charts.enums.SeparatorMode | Sets the mode that affects the position of separators. Separators are small vertical divider lines (horizontal divider lines in vertical chart orientation) which are displayed at the category axis to separate semantic groups of values. |
| separatorSourceRowIndex | graphomate.ui.types.UnsignedInteger | Specifies the datatype series that will be used to display separators, when property "separatorMode" is set to datatypes. If it's set to categories the sourceRowIndex describes the level of category labels used for the separator positioning. |
| separatorPositions | graphomate.ui.types.UnsignedInteger[] | Array of indices on the category axis. An index of 0 refers to the left side of the first category, 1 refers to left side of the second category (between first and second bar in a bar chart) and so on. The indices are used to display separators, when property "separatorMode" is set to manual. |
| separatorLength | graphomate.ui.types.UnsignedInteger | Sets the length of separator lines in px. |
| separatorColor | graphomate.ui.types.HexColor | Sets the color of the separator lines. |
| separatorThickness | graphomate.ui.types.UnsignedInteger | Sets the thicknes of separator lines in px. |
| separatorsInFront | boolean | If set to true, separators will have a higher z-index than the category axis. |
| scalingHelperMode | graphomate.ui.charts.enums.ScalingHelperMode | Specifies the appearance of the scaling helper. The scaling Helper displays a value range from zero to the value defined by property "scalingHelperValue". It may help to get a feeling for the scale of two differently scaled charts when displayed in both ones or could be used to mark a threshold. |
| scalingHelperValue | float | The value that will be displayed by the scaling helper. |
| scalingHelperAreaColor | graphomate.ui.types.HexColor | Sets the color of the scaling helper area (between the category axis and the scaling helper value) in scaling helper mode graphomate.ui.charts.enums.ScalingHelperMode.Area. |
| scalingHelperLineColor | graphomate.ui.types.HexColor | Sets the color of the scaling helper line, when the property "ScalingHelperMode" is set to line. |
| scalingHelperLineWidth | graphomate.ui.types.UnsignedInteger | Sets the width of the scaling helper line in px, when the property "ScalingHelperMode" is set to line. |
| showOffsetsOnLeft | boolean | If set to true, the offsets in a offset bar chart will be displayed at the left side of the bars (at the top in vertical oriented charts). |
| offsetBarDeviationLabelsOnTop | boolean | If set to true, labels of the offsets in a offset bar chart will be placed on top of the bars (at right side in vertical oriented charts). |
| stackedBarSumsVisible | boolean | Sets the visibility of calculated sums in a stackedbar chart. |
| stackedBarNegativeValues | boolean | Configures the interpretation of negative values in a stackedbar chart. If set to true, negative values will be displayed as a negative stack under the category axis. If set to false, they will be interpreted as positive values. |
| stackedBarLabelPosition | graphomate.ui.charts.enums.StackedBarLabelPosition | Sets the position of labels in a stackedbar chart. |
| calcPath | string[] | By defining the waterfall calculation path the appearance and the sign of each waterfall element can be controlled independently. The calcPath is an array of strings. Possible values are "+", "-", "0", "=", "s+" and "s-". Further information on the waterfall calculation path can be found in the documentation of our graphomate charts for other platforms. |
| waterfallPlusColor | graphomate.ui.types.HexColor | Sets the color of inflow values in a waterfall chart. |
| waterfallMinusColor | graphomate.ui.types.HexColor | Sets the color of outflow values in a waterfall chart. |
| waterfallSumColor | graphomate.ui.types.HexColor | Sets the color of sum values in a waterfall chart. |
| waterfallSpanPlusColor | graphomate.ui.types.HexColor | Sets the color of span inflow values in a waterfall chart. |
| waterfallSpanMinusColor | graphomate.ui.types.HexColor | Sets the color of span outflow values in a waterfall chart. |
| waterfallNeutralColor | graphomate.ui.types.HexColor | Sets the color of neutral values in a waterfall chart. |
| width | sap.ui.core.CSSSize | Sets the width of the chart. Allowed values are CSS sizes like "250px", "10em", "50%" or "auto". |
| height | sap.ui.core.CSSSize | Sets the height of the chart. Allowed values are CSS sizes like "250px", "10em", "50%" or "auto". Note that when a percentage value is given, the height of any of the surrounding containers must be defined. This is due to the characteristic of the html elements' height attribute which differs from the behavior of the width attribute for percentage values. |
| padding | int | Sets an inner padding for the chart in px. |
| spacing | int | Sets the spacing between the base chart and the deviation chart in px. |
| drawBoundaries | boolean | Debugging property to display internal layout borders of the chart. |
| barWidth | graphomate.ui.types.PositiveFloat | Sets the width of a chart's bars. If the value is greater than 1, it will be interpreted as px. Floating point numbers between 0 and 1 will be interpreted as relative values. The resulting width will then be a share of the category width. |
| pinWidth | graphomate.ui.types.PositiveFloat | Sets the width of pins in a pin chart. If the value is greater than 1, it will be interpreted as px. Floating point numbers between 0 and 1 will be interpreted as relative values. The resulting width will then be a share of the category width. |
| elementsOffset | float | Sets the offset of the data series' elements (e.g. bars) to the elements of other data series. If the value is greater than 1, it will be interpreted as px. Floating point numbers between 0 and 1 will be interpreted as percentage values relative to the category width. |
| pinHeadRadiusX | graphomate.ui.types.PositiveFloat | Sets the pixel based radius of all pin heads in x-direction. |
| pinHeadRadiusY | graphomate.ui.types.PositiveFloat | Sets the pixel based radius of all pin heads in y-direction. |
| lineDotRadiusX | graphomate.ui.types.PositiveFloat | Sets the pixel based radius of all dots of a line chart in x-direction. |
| lineDotRadiusY | graphomate.ui.types.PositiveFloat | Sets the pixel based radius of all dots of a line chart in y-direction. |
The following aggregations are available:
| Aggregation Name | Aggregated Object Type | Cardinality | Description |
|---|---|---|---|
deviations | graphomate.ui.charts.Deviation | 0...n | The graphomate charts enables you to set additional axes above the base chart of all chart types (next to the base chart in vertical orientation), which display the percentage or absolute deviations between two data series. Of course you can set the data series which should be used to calculate the deviation values. |
highlights | graphomate.ui.charts.Highlight | 0...n | The highlight feature enables you to highlight the absolute or percentage difference between two elements (specific values of a defined data series). A highlight instance refers to the elements where the highlighting should start and end. Choose between a single highlighting on the side and the highlighting of multiple elements above the graph by using the property "highlightMode" of a chart. If you select single highlighting, the first element of this aggregation is displayed and all other elements are ignored. |
seriesStyles | graphomate.ui.Datatype | 0...n | This aggregation determines the appearance of data series, as long as you do not use datatypes as they have a higher priority than series styles. The handling is similar to the definition of datatypes for the DatatypeDictionary. The name property of an datatype in this aggregation will be ignored due to internal naming. |
extendedNumberFormat | graphomate.ui.ExtendedNumberFormat | 0...1 | The item of this aggregation allows you to configure the formatting of absolute number labels. |
| extendedNumberFormatPercent | graphomate.ui.ExtendedNumberFormat | 0...1 | The item of this aggregation allows you to configure the formatting of percentage number labels. |
Event Details
The following methods exist for each event "sampleEvent":
- attachSampleEvent(function) - Registers a listener function for the event at the Chart.
- detachSampleEvent(function) - Deregisters the passed listener function for the event from the Chart.
elementClick(oEvent)
This event is fired when the user clicks an element of the chart - for example a bar. By using oEvent.getParameter(parameterName) you can access the event's parameters. oEvent.getParameters() returns an object containing all available event parameters.
The following parameter names are available for this event:
- {int} 'elementIdx' - The index of the clicked element within the series
- {int} 'seriesIdx' - The index of the series the clicked element belongs to
- {string} 'id' - The id of the chart which fired the event