Skip to Content
Technical Articles

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.

79 Comments
You must be Logged on to comment or reply to a post.
  • 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

    • 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

  • Hi Prasita,

    If we use same datasource for multiple cards is there a way to dynamically put a date filter on cards ? For example Card 1 should show last month data and  Card 2 should show last 6 months of data ? Is there a way to dynamically determine date filter value and have multiple card’s data filter accordingly ?

    Thanks,

    Tanveer

    • Hi Tanveer,

      You can have different SelectionVariant Annotations used for these 2 cards, with the respective filter conditions. You can find details here: https://sapui5.hana.ondemand.com/#/topic/65731e6b823240398e33133908efdaa1

      Regards,

      Prasita

  • Hi Prasita,

    It was a wonderful blog 🙂

    Can you please guide me how to achieve any of these above listed graphs using vocabularies and annotations in OData.

    I have achieved it using CDS views but how can we achieve it using OData annotations.

     

    Thank You,

    Pankaj

  • Hi Prasita,

    wonderfull blog, you provide a lot of clarifications about a topic not really well known by the majority of people.

    one question from my side, is there a way to render a time series? I mean, my X axis is a timestamp property and i’d like to render it. I’m exspecting that somehow the chart manages it as a time line (with a dynamic rescaling, for example) and not as a series of “labels”

    Many thanks for any hints

    BR

    Roberto

    • Hello Roberto,

      Thank you for your comments.

      Of the existing analytic cards that we support, only line, bubble, column and combination chart cards support time axis. The display level and format in the time axis would be in the default format offered by the viz chart – Day (01)/Month (Jan)/Year (2018)

      The time axis is automatically used by the OVP Analytic cards in case the following conditions hold good:

      1. Chart type should be one among: “Line”, “Bubble”, “Column” or “Combination”
      2. Chart is configured with only 1 dimension for” Bubble”, “column” and “Combination” chart and  “Line”
      3. The data type of the dimension is either edm.datetime or edm.string. In case the data type is of type edm.string, then it must have the additional annotation in the OData metadata annotation: sap:semantics:”yearmonthday”
      4. If the chart type is “Bubble” there must be exactly 2 measures. If the chart type is “Combination” there must be at least 2 measures.

      Here is a sample metadata that could be of use to you: <Property Name="Date" Type="Edm.DateTime" sap:display-format="Date" sap:label="Date" sap:aggregation-role="dimension"/> 

      Regards,

      Prasita

  • Hi Prasita,

    do you know any detailed description (annotations and realated manifest settings) regarding KPI Headers, Intent based Navigation and Actions (Data Point for action) within OVP?

    Thanks,

    Kathrin

  • Hi Prasita,

    Great job, this helps a lot.

    Question from my side is for the data structure regarding the Stacked Column Chart Card example (fig. 3.1.1) you provide. I’m using the following data structure trying to replicate your example, but in my case the countries are not stacked, instead they are overlapping:

    [{
    “Region”: “AMER”,
    “Country”: “AR”,
    “Sales”: “70000”,
    }, {
    “Region”: “AMER”,
    “Country”: “MX”,
    “Sales”: “80000”,
    }, {
    “Region”: “AMER”,
    “Country”: “BR”,
    “Sales”: “90000”,
    }]

    The thing is that axis, categories and series looks as expected, so I assume the annotation is ok. That’s why I’m wondering if it is a matter of data structure. Maybe, there’s any additional step needed that is not reflected on you example.

    Thanks in advance for your input.

    Regards,

    Pablo.

      • Hi Prasita,

        You were right, I detected a problem in the annotation file. I was the same annotation file for different analytical cards. I isolated the card for which I was having the issue and now it works as expected. Countries are now stacked as expected.

        Thank you so much for your help and time.

        Regards,

        Pablo.

  • Hi Prasita,

    I tried to add AxisScaling property under UI.Chart like in your sample Sample 1.2.2, but it is not available in Web IDE Annotation Modeler.

    Any idea why?

    Thanks in advance, Uladzislau

  • Hi Prasita Prabhakaran

    you mentioned another post for Semantic colouring. Where can i find this blog?
    We would like to give the sections of a donut chart individual colors (red & green). Is this possible and if yes, is there a blog where i can find further informations?

    Regards

    Simon

    • Hello Simon,

      The colour palette can be used to achieve this in 1.56 for donut chart. You can find the documentation for Stacked Column chart here Note that as of now the palette expects 4 values for colours, we are working towards changing this to minimum of 2 colours and max of 4 colours.

      • Can you update the link for stacked column chart with colour palette ? Or is there any example of how to use colour palette with donut chart ? I tried to add following code to the manifest.json however the color is now showing.

         

        Manifest.json:

        			"card01": {
        				"model": "VALUATION_COCKPIT",
        				"template": "sap.ovp.cards.charts.analytical",
        				"settings": {
        					"title": "{{Chart.Status.Title}}",
        					"subTitle": "{{Chart.Status.SubTitle}}",
        					"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#ValStatChart",
        					"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
        					"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#ExpectedAmount",
        					"entitySet": "C_REContractValuationByStatus",
        					"stopResizing": true,
        					"defaultSpan": {
        						"rows": 4,
        						"cols": 2
        					},
        					"bEnableStableColors": true,
        					"colorPalette": {
        						"0": {
        							"color": "sapUiChartPaletteSemanticNeutral"
        						},
        						"1": {
        							"color": "sapUiChartPaletteSemanticBadDark1"
        						},
        						"2": {
        							"color": "sapUiChartPaletteSemanticCriticalDark2"
        						},
        						"3": {
        							"color": "sapUiChartPaletteSemanticCritical"
        						}
        					}
        				}
        			},

        Annotation:

                    <Annotation Term="UI.DataPoint" Qualifier="ValuationStatus">
                       <Record>
                          <PropertyValue Property="Value" Path="ValuationStatus" />
                          <PropertyValue Property="Title" String="" />
                          <PropertyValue Property="Criticality" Path="ValuationStatusCriticality" />
                       </Record>
                    </Annotation>
  • Hi Prasita Prabhakaran

    Is navigation to a URL with parameters (using UI.DataFieldWithUrl) supported in a chart card?  I can only seem to get it to work for a list card.

    Example annotations below work for a list card, but not when used in a chart card.  When navigating using a chart card the parameter value (the part inside the curly braces) populates as ‘null’.  When used with a list card it populates with the selected (clicked) value from the list.

    <Record Type="UI.DataFieldWithUrl">
    							<PropertyValue Property="Url">
    								<Apply Function="odata.fillUriTemplate">
    									<String>https://someurl:8443/BOE/OpenDocument/opendoc/openDocument.jsp?sIDType=CUID&amp;iDocID=AVqoLcjYlQFAo4.rYOhEWk0&amp;lsSpsEnter%20M1%20Compliance%20Status%3A={M1_ComplianceStatus1}&amp;lsIpsEnter%20M1%20Compliance%20Status%3A={M1_ComplianceStatus2}</String>
    									<LabeledElement Name="M1_ComplianceStatus1">
    										<Apply Function="odata.uriEncode">
    											<Path>M1_ComplianceStatus</Path>
    										</Apply>
    									</LabeledElement>
    									<LabeledElement Name="M1_ComplianceStatus2">
    										<Apply Function="odata.uriEncode">
    											<Path>M1_ComplianceStatus</Path>
    										</Apply>
    									</LabeledElement>
    								</Apply>
    							</PropertyValue>
    							<PropertyValue Property="Value" Path="M1_ComplianceStatus"/>
    						</Record>
  • Hi,

    When I create the analytical card it ask for a KPI annotation and I’ve created a KPI annotation.
    but it gives me following error

    TypeError: Cannot read property ‘DefaultPresentationVariant’ of undefined

  • Hi Prasita,

    You are mentioning in your Manifest that your are using:

    “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”,

    But you are giving only the code for the chart ones. I saw your Github for the KPI headers could you also share your annotation file for this blog please?

    My other question would be: What dataset are you using for this example?

     

    Thanks in advance!

    Maxim

  • Hello Prasita,

    thank you for your great blog.

     

    You mentioned to edit the chart properties by using:

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

    But using this statement in the card settings I can not see any difference.

    Can I also change for expample the “drawingEffect” and where do I have to do this?

     

    Best regards

    Dieter

    • Hello Maxim,

       

      Thank you for your comments. I missed replying to the post…apologies, I shall try to add them to this post at the earliest.

      Combined Column and Line Chart is the combination chart that we support in OVP as of now. It would be interesting to understand about your use case for a new feature analysis.

      Regards,

      Prasita

  • Hi Parista,

    I managed to get the Combined Column and Line Chart to work. However our use case requires a stacked column one. What we would want is to draw a target line on the graph.

     

    Kind regards,

    Maxim

  • In reply to the question posted : “Can you tell me the best practice to write annotations – is it using the annotation modeler in the web ide or is it good to write it in cds view itself” – First preference will be CDS. If not supported or requires to be overwritten make use of the annotation modeller.

  • Is there any way to display specific cards for a user based on user roles?

    For an example, a manager can view all the cards but an employee can only view specific cards. Is that possible

  • Hi Prasita,

    I have the following query in regards to limiting the time series on a line chart to only the last 6 months (of a dataset). The measure could be something along the lines of “on the overview page show me the trend in sickness absences over the last 6 months”..

    How do I show/filter that on a line graph to show this subset? I currently have the following line graph..

    From the above, I just want to display the trend from last 6 months (i.e. from 06/2018 onwards). How is this achieved?

    Thanks

    Qaiser

    • Hello Qaiser,

      If I understand it correctly you wish to filter the records only for the last 6 months. If yes you can make use of the selectionVariant to provide the required filter conditions. More info can be found here

      Regards,

      Prasita

  • Hi,

    is there any tooltip for dimension axis?

    By default, it would show when the dimension description is too long and “…” is used.

    Thanks,

     

  • Hi Prasita,

    I have used Stacked Column Chart, how can i give tooltip for this graph?

    and also if u can guide on changing the placement of legends,  want them along the X-axis