predefined-representation-types-74db7d5.md

Predefined Representation Types

Use

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 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});
Donut chart	DonutChart	sap.apf.ui.representations.donutChart	sap.viz.ui5.controls.VizFrame({vizType : donut});
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});
100% stacked column chart	PercentageStackedColumnChart	sap.apf.ui.representations.percentageStackedColumnChart	sap.viz.ui5.controls.VizFrame({vizType : 100_stacked_column});)
100% stacked bar chart	PercentageStackedBarChart	sap.apf.ui.representati ons.percentageStackedBarChart	sap.viz.ui5.controls.Vi zFrame({vizType : 100_stacked_bar});)
Combined column line chart	CombinationChart	sap.apf.ui.represent ations.combinationChart	sap.viz.ui5.controls .Vi zFrame({vizType : combination});)
Combined stacked column line chart	StackedCombinationChart	sap.apf.ui.represent ations.stackedCombinationChart	sap.viz.ui5.controls .Vi zFrame({vizType : stacked combination});)
Combined column line chart with two vertical axes	DualCombinationChart	sap.apf.ui.represent ations.dualCombinationChart	sap.viz.ui5.controls .Vi zFrame({vizType : dual combination});)
Combined stacked column line chart with two vertical axes	DualStackedCombinationChart	sap.apf.ui.represent ations.dualStackedCombinationChart	sap.viz.ui5.controls .Vi zFrame({vizType : dual stacked combination});)
Heatmap chart	HeatmapChart	Sap.apf.ui.representations.heatmapChart	sap.viz.ui5.controls.Vi zFrame({vizType :heatmap});)
Table	TableRepresentation	sap.apf.ui.representations.tableRepresentation	SAPUI5 table (sap.ui.table.Table)
Tree table	TreeTableRepresentation	sap.apf.ui.representations.treeTable	SAPUI5 tree table (sap.ui.table.TreeTable)

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.

Related Information

Analytical Configuration

The Representation Type Object