Show TOC

Analytic CardsLocate this document in the navigation structure

Analytic cards show data in a variety of chart formats.

Analytic cards consist of two areas: a header area that displays the aggregated value of a key measure (KPI), along with other information, and a chart area that displays a representation of data, in graphic form. The measures and dimensions used in analytic cards are defined in the annotation file.

The type of chart chosen is determined by the value of ChartType within the annotation. Beginning with this release, the value of the template property within the application descriptor file (manifest file) must point to the generic analytic chart card component sap.ovp.cards.charts.analytical. It would no longer indicate the chart type.
Note

SAP Web IDE versions that use SAPUI5 1.38 or higher will automatically ensure that the correct value is used for the template property when an analytic card is configured. However, if the card is created with a lower version of SAP Web IDE then this property must be manually set to sap.ovp.cards.charts.analytical.

The following chart cards are available:

Chart Type

Description

Chart Type (Annotation File)

Line

A line chart displays information as a series of data points connected by straight line segments. They are often used to visualize a trend in data over time.

"UI.ChartType/Line"

Example: <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Line" />

Bubble

Bubble charts display up to three measures and two dimensions of data. The three measures are reflected in the X and Y axes, and in the size of the bubbles. The dimensions can be expressed in the colors and/or shapes of the bubbles.

Bubble charts are often used to facilitate the understanding of social, economical, medical, and scientific relationships.

"UI.ChartType/Bubble"

Example: <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bubble" />

Donut

A donut chart displays data as different colored sections of a donut. The value of the measure determines the size of each section. Donut charts help the viewer to quickly determine the key area that needs attention.

"UI.ChartType/Donut"

Example: <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Donut" />

Column

A column chart displays data, such as total product sales over a period of years. The number of columns is equal to the number of measures in the annotation file.

"UI.ChartType/Column"

Example: <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column" />

Stacked column

A stacked column chart is similar to the column chart; however, it visualizes multiple measures or dimensions by stacking the data on top of each other in a column.

"UI.ChartType/StackedColumn"

Example: <PropertyValue Property="ChartType" EnumMember="UI.ChartType/StackedColumn" />

Vertical column

With a vertical bullet chart, you can visualize a single measure and compare it to a defined reference value, such as a target unit of measure. This target is displayed a solid black line.

"UI.ChartType/Vertical_Bullet"

Example: <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Vertical_Bullet" />

Note

There will be no further features or improvements for cards using the older value of template (for example, sap.ovp.cards.charts.line). This is still supported to provide backward compatibility for such cards but it's strongly recommended you reconfigure the card settings within the application descriptor file and for template use sap.ovp.cards.charts.analytical.

Line Chart Card

Bubble Chart Card

Donut Chart Card

Column Chart Card

Stacked Column Chart Card

Vertical Bullet Chart Card

Note Analytic cards don't have a fixed height. The height is adjusted automatically to accomodate the data points and legends. Legends are created automatically based on the defined measures and dimensions.
Example

The following is a snippet of a sample manifest file:

Sample Code
"sap.app": {
                                "_version": "1.1.0",
                                "id": "sap.ovp.demo",
                                "type": "application",
                                "i18n": "i18n/i18n.properties",
                                "applicationVersion": {
                                                "version": "1.2.2"
                                },
                                "title": "{{app_title}}",
                                "description": "{{app_description}}",
                                "dataSources": {
                                                "salesShare": {
                                                                "uri": "https://ssbdevssbiot.neo.ondemand.com/sap/smartbusinessdemo/services/SalesShare.xsodata",
                                                                "type": "OData",
                                                                "settings": {
                                                                                "odataVersion": "2.0",
                                                                                "annotations": [
                                                                                                "salesShareAnno"
                                                                                                ]
                                                                }
                                                },
                                                "salesShareAnno": {
                                                                "uri": "data/salesshare/annotations.xml",
                                                                "type": "ODataAnnotation",
                                                                "settings": {
                                                                }
                                                }
                                }
                }

"sap.ovp": {
                                "globalFilterModel": "salesShare",
                                "globalFilterEntityType": "GlobalFilters",
                                "cards": {
                                                "cardBubble": {
                                                  "model": "salesShare",
                                                  "template": "sap.ovp.cards.charts.bubble",
                                                  "settings": {
                                                                  "entitySet": "SalesShare",
                                                                  "selectionAnnotationPath" : "com.sap.vocabularies.UI.v1.SelectionVariant#Eval_by_CtryCurr",
                                                                  "chartAnnotationPath" : "com.sap.vocabularies.UI.v1.Chart#Eval_by_CtryCurr",
                                                                  "presentationAnnotationPath" : "com.sap.vocabularies.UI.v1.PresentationVariant#Eval_by_CtryCurr",
                                                                  "dataPointAnnotationPath" : "com.sap.vocabularies.UI.v1.DataPoint#Eval_by_CtryCurr",
                                                                  "identificationAnnotationPath" : "com.sap.vocabularies.UI.v1.Identification#Eval_by_CtryCurr"
                                                  }
                                          },
                                          "cardchartsline": {
                                                  "model": "salesShare",
                                                  "template": "sap.ovp.cards.charts.line",
                                                  "settings": {
                                                                  "entitySet": "SalesShare",
                                                                  "selectionAnnotationPath" : "com.sap.vocabularies.UI.v1.SelectionVariant#Eval_by_Country",
                                                                  "chartAnnotationPath" : "com.sap.vocabularies.UI.v1.Chart#Eval_by_Country",
                                                                  "presentationAnnotationPath" : "com.sap.vocabularies.UI.v1.PresentationVariant#Eval_by_Country",
                                                                  "dataPointAnnotationPath" : "com.sap.vocabularies.UI.v1.DataPoint#Eval_by_Country",
                                                                                  "idenfiticationAnnotationPath" : "com.sap.vocabularies.UI.v1.Identification#Eval_by_Country"
                                                  }
                                          },
                                          "cardchartsdonut": {
                                                  "model": "salesShare",
                                                  "template": "sap.ovp.cards.charts.donut",
                                                  "settings": {
                                                                  "entitySet": "SalesShare",
                                                                  "selectionAnnotationPath" : "com.sap.vocabularies.UI.v1.SelectionVariant#Eval_by_Currency",
                                                                  "chartAnnotationPath" : "com.sap.vocabularies.UI.v1.Chart#Eval_by_Currency",
                                                                  "presentationAnnotationPath" : "com.sap.vocabularies.UI.v1.PresentationVariant#Eval_by_Currency",
                                                                  "dataPointAnnotationPath" : "com.sap.vocabularies.UI.v1.DataPoint#Eval_by_Currency",
                                                                                  "idenfiticationAnnotationPath" : "com.sap.vocabularies.UI.v1.Identification#Eval_by_Currency"
                                                  }
                                          }
                                }
                }



Chart Area

Configuration for the chart area in analytic cards differs per chart type. For more information, see Configuring Charts.

Header Area

The header area in analytic cards includes a key performance indicator (KPI), the trend. and percentage of change. To learn how to configure the card header, see the respective section in Cards Used in Overview Pages.

The x- and y-axis of analytic chart cards won't be shown (except in the case of a bubble chart) if you use a header for your card. If your header contains a good description of the card, then the x- and y-axis descriptions are superfluous. Of course, you'll see both the x- and y-axis if you choose to omit the header. For example, the chart title Net Sales by Days Payable already conveys that the y-axis is Net Sales and the x-axis represents Days Payable, so the axis labels are unnecessary. In case the card doesn't have a header, then the axis titles are displayed

Responsive Charts

Since there's no limit to the number of data points you can use in a chart card, this eliminates the need for either horizontal or vertical scrollbars within an analytic card. In case the system attempts to display too many data records, the charts could become unresponsive and only some of the labels will be displayed (although all data points are plotted).

However, if you want to limit the number of records fetched from backend that are rendered on the screen, use UI.PresentationVariant.MaxItems. For example:

Sample Code
<Annotation Term="UI.PresentationVariant" Qualifier="Column_Eval_by_Country_123">
    <Record>      
          <PropertyValue Property="MaxItems" Int="5" />
    </Record>
</Annotation>

Tip If there are too many data records displayed on the chart, then it could be difficult to accurately select a data point, especially if using a mobile device. If you are only interested in checking the top records, then use UI.PresentationVariant.SortOrder. For more information, see Configuring Cards.
Selected Data Context

Now that the charts are interactive, the user can choose a specific data point and this selection will trigger the context being passed on to the target application. The selected dimensions are passed as URL parameters to the target application. This is in addition to the context that is passed on when navigating from the header. It's up to the target application to read these URL parameters and use them as required (typically to filter the data set that they display). It's no longer possible to navigate to the target application by clicking outside the data point within the chart area as in earlier versions.

Note

The technical ID of the dimension name and value are passed on, not the display names. For example, a chart displays total sales (y-axis) across regions (x-axis). The dimension "RegionID" has a sap:label specified as "Region" and sap:text specified as "Region Name" in the metadata. If the annotation now maps "RegionID" to the category axis (x-axis) and total sales to y-axis, then the chart would display each different region with its region name and not technical ID (because sap:text is "Region Name") even though the mapping is done based on "RegionID".

However, when the user selects a particular data point, the system passes along, for example, "RegionID"="001" instead of "Region"="EMEA".