Skip to Content

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.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Dhananjay Choubey

    Hi Prasita Prabhakaran,

    It’s a nice document.

    I have one question though, how we can display details on click of certain stacked graph row?

    Another one is in case of list only 3-5 list are displayed. Is there any way to put some kind of navigation there? Suppose we want to display next 3, then how we can achieve it?

     

    Thanks

    (0) 
    1. Prasita Prabhakaran Post author

      Hi Dhananjay,

      You can configure navigation using the IdentificationAnnotation from a selected DataPoint on the stacked chart to the desired details screen.  In this case the context of the selected DataPoint is also passed to the Navigation application.

      In case of list cards we have a pre-defined limit of rows that are shown and there is no provision of next 3 as of now. With later releases there will be a provision of changing the size of cards to suit your needs of data display.

       

      Regards,

      Prasita

      (0) 

Leave a Reply