Predefined Representation Types
The UI component of APF provides predefined representation types that can be used to display data.
These representation types are predefined in the file sap/apf/core/representationTypes.js. They can be referenced in the analytical content configuration using their IDs.
Each representation type has a constructor assigned. The constructor is used as a parameter in the representation type object of the configuration file and points to the implementation of the representation type. The charts shipped with APF are implemented using the VizFrame charting library (sap.viz.ui5.controls.VizFrame) that is available with SAP UI5.
The following table lists the order of available representation types:
Chart Name |
ID |
Constructor |
Chart Type in VizFrame Charting Library |
|---|---|---|---|
Column chart |
ColumnChart |
sap.apf.ui.representations.columnChart |
sap.viz.ui5.controls.VizFrame({vizType : column}); |
|
Bar chart |
BarChart |
sap.apf.ui.representations.barChart |
sap.viz.ui5.controls.VizFrame({vizType : bar}); |
Line chart |
LineChart |
sap.apf.ui.representations.lineChart |
sap.viz.ui5.controls.VizFrame({vizType : line}); |
|
Line chart with two vertical axes |
LineChartWithTwoVerticalAxes |
sap.apf.ui.representations.lineChartWithTwoVerticalAxes |
sap.viz.ui5.controls.Vi zFrame({vizType : dual_line}); |
|
Line chart with time axis |
LineChartWithTimeAxis |
sap.apf.ui.representations.lineChartWithTimeAxis |
sap.viz.ui5.controls.Vi zFrame({vizType : timeseries_line}); |
|
Pie chart |
PieChart |
sap.apf.ui.representations.pieChart |
sap.viz.ui5.controls.VizFrame({vizType : pie}); |
Scatter plot chart |
ScatterPlotChart |
sap.apf.ui.representations.scatterPlotChart |
sap.viz.ui5.controls.VizFrame({vizType : scatter}); |
|
Bubble chart |
BubbleChart |
sap.apf.ui.representations.bubbleChart |
sap.viz.ui5.controls.VizFrame({vizType : bubble}); |
Stacked column chart |
StackedColumnChart |
sap.apf.ui.representations.stackedColumnChart |
sap.viz.ui5.controls.VizFrame({vizType : 100_stacked_column}); |
|
Stacked bar chart |
StackedBarChart |
sap.apf.ui.representations.stackedBarChart |
sap.viz.ui5.controls.VizFrame({vizType : 100_stacked_bar}); |
Percentage stacked column chart |
PercentageStackedColumnChart |
sap.apf.ui.representations.percentageStackedColumnChart |
sap.viz.ui5.controls.VizFrame({vizType : 100_stacked_column});) |
|
Percentage stacked bar chart |
PercentageStackedBarChart |
sap.apf.ui.representati ons.percentageStackedBarChart |
sap.viz.ui5.controls.Vi zFrame({vizType : 100_stacked_bar});) |
|
Heatmap chart |
HeatmapChart |
Sap.apf.ui.representations.heatmapChart |
sap.viz.ui5.controls.Vi zFrame({vizType :heatmap});) |
Table representation |
TableRepresentation |
sap.apf.ui.representations.tableRepresentation |
SAP Ui5 Table (sap.ui.table.Table) |
You can use the predefined representation types to define representations in your application. To do so, depending on the chart type you choose, you must define parameters such as the fields used for the horizontal axis and the vertical axis, or the field by which a chart is sorted.