SAP Fiori Overview Page – Analytic Cards – Part 1

In this post I will take you through detailed features of OVP – Line, Column and Stacked Column Chart Cards that you can add to your Overview Page Application.

1. Line Chart Card

A line chart card displays information as a series of data points connected by straight line segments. One of its common use cases is to visualise a trend in data over time. Fig 1.1.1 and manifest sample as in Sample 1.1.2

Fig 1.1.1

"Dcard5_cardchartsline": {
"model": "salesShare",
"template": "sap.ovp.cards.charts.analytical",
"settings": {
"title": "Sales by Region",
"subTitle": "Sales by Region",
"valueSelectionInfo": "value selection info",
"entitySet": "SalesShareLine",
"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-Generic",
"identificationAnnotationPath" : "com.sap.vocabularies.UI.v1.Identification#Eval_by_Country",
"navigation" : "headerNav"
}
}

Sample 1.1.2

Starting SAPUI5 Version 1.48 you can also achieve a smooth curve as shown in Fig 1.2.1

Fig 1.2.1

Sample to achieve smoothed line chart is as in Sample 1.2.2 in addition to the manifest entry as in Sample 1.2

"ChartProperties" : {
	"plotArea" : {
		"isSmoothed" : true
		}
}

Sample 1.2.1

Chart annotation sample used in this case is as in Sample 1.2.2:

<Annotation Term="UI.Chart" Qualifier="Eval_by_Country">
<Record Type="UI.ChartDefinitionType">
<PropertyValue Property="Title" String="View1" />
<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Line"/>
<PropertyValue Property="AxisScaling" EnumMember="UI.ChartAxisScalingType/MinMaxValues"/>
<PropertyValue Property="MeasureAttributes">
  <Collection>
    <Record Type="UI.ChartMeasureAttributeType">
	<PropertyValue Property="Measure" PropertyPath="Sales" />
	<PropertyValue Property="DataPoint">										
          <AnnotationPath>@UI.DataPoint#Column_Eval_by_Country_123</AnnotationPath>
	</PropertyValue>
	<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
    </Record>
  </Collection>
</PropertyValue>
<PropertyValue Property="DimensionAttributes">
 <Collection>
   <Record Type="UI.ChartDimensionAttributeType">
     <PropertyValue Property="Dimension" PropertyPath="Product" />
     <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />
    </Record>
    <Record Type="UI.ChartDimensionAttributeType">
      <PropertyValue Property="Dimension" PropertyPath="Region" />
      <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Series" />
    </Record>
  </Collection>
</PropertyValue>
</Record>
</Annotation>

Key points to remember for a Line chart configuration are:

• Line charts require at least one measure and one dimension.
• Dimensions for which the role is set to category, makes up the x-axis (category axis). If no dimension is specified with this role, the first dimension is used as the x-axis. It’s recommended to use only time-based dimensions (for example, day, date, week, month, quarter, or year) for the category axis of a line chart.
• Dimensions for which the role is set to series make up the line segments of the chart, with different colors assigned to each dimension value. If multiple dimensions are assigned this role, the values of all such dimensions together are considered as one dimension and a color is assigned.
• Measures make up the y- axis (value axis). If there are multiple measures, then each measure is represented by a different coloured line inside the chart area.

Navigation can be added from the chart either from card header or from a selected data point.

navigation property in manifest can take values as “headerNav” or “dataPointNav”

Header navigation is taken from the identification annotation specified in manifest settings.Sample 1.2.3

<Annotation Term="UI.Identification" Qualifier="Eval_by_Country">
<Collection>
<Record Type="UI.DataFieldForIntentBasedNavigation">
	<PropertyValue Property="Label" String="" />
	<PropertyValue Property="Criticality"	EnumMember="UI.CriticalityType/Positive" />
	<PropertyValue Property="SemanticObject" String="OVP" />
	<PropertyValue Property="Action" String="Procurement" />
</Record>
</Collection>
</Annotation>

Sample 1.2.3

Starting SAPUI5 Version 1.48 Tooltips are available for all chart types on hover as shown in Fig. 3.1

Fig 1.3.1

Column Chart Card (Bar Chart)

A column chart displays data, such as total product sales over a period of years, as shown in Fig 2.1.1

Fig 2.1.1

Manifest entry for this chart is as in Sample 2.1.2 and Annotation as in Sample 2.1.3

"Jcard9_cardchartscolumnTime": {
"model": "salesShare",
"template": "sap.ovp.cards.charts.analytical",
"settings": {					
"title": "Sales Share by Date",
"subTitle": "Sales Share by Date",
"valueSelectionInfo": "value selection info",
"entitySet": "SalesShareColumnTime",
"selectionAnnotationPath" : "com.sap.vocabularies.UI.v1.SelectionVariant#Eval_by_Currency",
"chartAnnotationPath" : "com.sap.vocabularies.UI.v1.Chart#Column-Time",
"presentationAnnotationPath" : "com.sap.vocabularies.UI.v1.PresentationVariant#Eval_by_Currency",
"dataPointAnnotationPath" : "com.sap.vocabularies.UI.v1.DataPoint#Eval_by_Currency-Generic",
"identificationAnnotationPath" : "com.sap.vocabularies.UI.v1.Identification#Eval_by_Currency"
}
},

Sample 2.1.2

<Annotation Term="UI.Chart" Qualifier="Column-Time">
  <Record Type="UI.ChartDefinitionType">
   <PropertyValue Property="Title" String="Sales Share by Product" />
   <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
   <PropertyValue Property="MeasureAttributes">
    <Collection>
     <Record Type="UI.ChartMeasureAttributeType">
      <PropertyValue Property="Measure" PropertyPath="SalesShare" />
      <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
     </Record>
    </Collection>
   </PropertyValue>
   <PropertyValue Property="DimensionAttributes">
    <Collection>
     <Record Type="UI.ChartDimensionAttributeType">
       <PropertyValue Property="Dimension" PropertyPath="Product" />
       <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />
     </Record>
    </Collection>
   </PropertyValue>
  </Record>
</Annotation>

Key points to remember for a column chart are:

• The number of columns is equal to the number of measures in the annotation file.
• Column charts require at least one measure and one dimension.
• Irrespective of the role defined for the measure in the annotation file, every measure will be represented as a separate column.
• Similarly, irrespective of the role defined in the annotation file, every dimension will be added to the category axis (x-axis).

Semantic colouring is supported in Column charts starting SAPUI5 version 1.48, a sample is as shown in Fig. 2.2.1, this will be discussed in detail in another post

Stacked Column Chart Card

A stacked column chart is similar to the column chart; however, it visualises multiple measures or dimensions by stacking the data on top of each other in a column as shown in Fig 3.1.1

Fig 3.1.1

Manifest settings and annotation used to achieve this are as shown in Sample 3.1.2 and 3.1.3 respectively

"Vcard16_cardchartscolumnstacked": {
	"model": "salesShare",
	"template": "sap.ovp.cards.charts.analytical",
	"settings": {
	"title": "Sales by Country and Region",
	"subTitle": "Sales by Country and Region",
	"valueSelectionInfo": "value selection info",
	"entitySet": "SalesShareColumnStacked",
        "selectionAnnotationPath" : "com.sap.vocabularies.UI.v1.SelectionVariant#Eval_by_Currency_ColumnStacked",
	"chartAnnotationPath" : "com.sap.vocabularies.UI.v1.Chart#Eval_by_Currency_ColumnStacked",
	"presentationAnnotationPath" : "com.sap.vocabularies.UI.v1.PresentationVariant#Eval_by_Currency_ColumnStacked",
	"dataPointAnnotationPath" : "com.sap.vocabularies.UI.v1.DataPoint#Eval_by_Currency-Generic",
	"identificationAnnotationPath" : "com.sap.vocabularies.UI.v1.Identification#Eval_by_Currency_Scatter"
	}
}

Sample 3.1.2

<Annotation Term="UI.Chart" Qualifier="Eval_by_Currency_ColumnStacked">
 <Record Type="UI.ChartDefinitionType">
  <PropertyValue Property="Title" String="Sales by Country and Region" />
  <PropertyValue Property="ChartType" EnumMember="UI.ChartType/ColumnStacked" />
  <PropertyValue Property="Measures">
   <Collection>								
    <PropertyPath>Sales</PropertyPath>
   </Collection>
  </PropertyValue>
  <PropertyValue Property="Dimensions">
   <Collection>
    <PropertyPath>Country</PropertyPath>
    <PropertyPath>Region</PropertyPath>
   </Collection>
  </PropertyValue>
  <PropertyValue Property="MeasureAttributes">
   <Collection>
    <Record Type="UI.ChartMeasureAttributeType">
     <PropertyValue Property="Measure" PropertyPath="Sales" />
     <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
    </Record>
   </Collection>
  </PropertyValue>
  <PropertyValue Property="DimensionAttributes">
   <Collection>
    <Record Type="UI.ChartDimensionAttributeType">
     <PropertyValue Property="Dimension" PropertyPath="Country" />
     <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Series" />
    </Record>
    <Record Type="UI.ChartDimensionAttributeType">
     <PropertyValue Property="Dimension" PropertyPath="Region" />
     <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />
    </Record>
   </Collection>
  </PropertyValue>
 </Record>
</Annotation>

Points to remember while configuring a Stacked column chart:

• There should be at least one dimension with the assigned role category and all dimensions with this role would be added to the category axis (x-axis)
• All dimensions with role series also get stacked
• It is recommended to either stack based on dimensions or measures, but not mix both in a single chart card

Hope this blog was helpful in implementing chart cards in Overview Pages, look forward to your feedback and queries on this. Here is a project with mock data and sample annotations for your reference. Additional chart types have been discussed in this blog.