Skip to Content
Technical Articles
Author's profile photo Prasita Prabhakaran

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.

Assigned Tags

      89 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dhananjay Choubey
      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog 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

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      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

      Author's profile photo Pankaj Sahita
      Pankaj Sahita

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hi Pankaj,

       

      Thanks, I am glad you find the blog useful. I am afraid I did not get the query. Are you referring to creation of local annotations in the project?

      Regards,

      Prasita

      Author's profile photo Pankaj Sahita
      Pankaj Sahita

      Hi Prasita,

      My main query is how can we achieve smart chart functionality via SEGW.

      I was not able to find anything where we can achieve this functionality using OData Vocabularies and Annotations in SEGW.

       

      Thank You,

      Pankaj

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Former Member kindly check

       

      Author's profile photo ROBERTO URBAN
      ROBERTO URBAN

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      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

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Thanks Prasita Prabhakaran,

      This blog has helped a lot.

      Is there way to change font size and color in these cards ?

      Thanks,

      Tanveer

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Tanveer,

      Thanks for your comments. The font size and colours used in charts cannot be customised as of now.

      Regards,

      Prasita

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Thanks for response  Prasita !

      Is there a way to extend card to change font ? Is there any 'how to' reference available ?

      Thanks,

      Tanveer

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hi Tanveer,

      This  too is not supported, you can extend and create a new card though

      General extension concepts in OVP can be checked in the below links:

      UI5 1.48 :http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5-sdk-dist-1.48/#/topic/b240f612227547d99e7fe76dd03da375

      Ui5 1.50:http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5-sdk-dist-1.50/#/topic/b240f612227547d99e7fe76dd03da375

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Kathrin,

      Sorry for the delay. You can find info on KPI headers here: https://blogs.sap.com/2018/01/24/sap-fiori-elements-overview-page-kpi-header/

      And info on navigation here: https://blogs.sap.com/2018/02/07/sap-fiori-overview-page-navigation-concepts/

      DataFieldForAction  is a supported annotation for OVP in specific cases.

      Author's profile photo Pablo Ruiz Navas
      Pablo Ruiz Navas

      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.

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Pablo,

      I guess there may be something amiss in the annotation. Would it be fine for you to share it, in comments?

      Author's profile photo Pablo Ruiz Navas
      Pablo Ruiz Navas

      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.

      Author's profile photo Uladzislau Pralat
      Uladzislau Pralat

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      This is being considered by the Annotation Modeller

      Author's profile photo Simon Gaudek
      Simon Gaudek

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      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.

      Author's profile photo Pierre Dominique
      Pierre Dominique

      Hi Prasita,

      I can't find a way to use semantic colors in my charts (everything is in black), could you please give us more information or, even better, publish another blog post to show how it is done? The documentation (https://sapui5.hana.ondemand.com/#/topic/02c53f4d9e58447db939546bed33fb44) is not really helpful.

      Cheers,

      Pierre

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Pierre,

      Please find documentation for colorPalette here

      Regards,

      Prasita

      Author's profile photo YunPeng Dong
      YunPeng Dong

      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>
      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Please check the sample project available here:

      Author's profile photo YunPeng Dong
      YunPeng Dong

      Thanks, for the response, however can you give me some tips regarding the annotations ? (e.g. which part is related to coloring the chart? or is there any post regarding how to do it ?)

      Author's profile photo Thomas Maatz
      Thomas Maatz

      Hey, do you find a solution?

      Author's profile photo YunPeng Dong
      YunPeng Dong

      No, I didn't find any proper solution for our needs, at the end we just use the default color theme.

      Author's profile photo Thomas Maatz
      Thomas Maatz

      Thanks for your answer, same for me here. The strange thing is that the example from Prasita Prabhakaran works. Maybe you need to have a KPI-Header…

      In my case it uses the identifier from Manifest.json as lable but ignore the properties of it.

       

       

      Author's profile photo Thomas Maatz
      Thomas Maatz

      No it has nothing to do with the KPI Header, i changed the example and it still works. Im really confused now 🙂

       

      Author's profile photo Sri Vishwak Ramesh
      Sri Vishwak Ramesh

      Hi Thomas Maatz we have a similar requirement to use custom colours in a Donut chart. Have used colourpallette in manifest.json even though was not able to change the colours. Can you please let us know the way to change the colours

      Thank you

      Author's profile photo Timo John
      Timo John

      Hello Thomas,
      I am currentyl busy in the same area coloring charts.
      My line chart has sucess full booked Idocs and Idocs with errors as series.
      As expected I would like to cinfigure the errornous series in red... but I am stuck.

      Could you share some more of yor config files:
      -Annotaiont
      -I18N

      How to do the "link" between {{BAD}} and a certain series ... I don't get that ..

      Thans upfront

      Author's profile photo Thomas Maatz
      Thomas Maatz

      Hi Timo,

      the link works like that. The value of your entity which is set as series works as identifier for the colors. In my example below i return values 0,1,2,3 in my OData entity. So the theory 🙂

      But i not get it to work now...

      Best

      Thomas

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      which version of SAPUI5 have you used?

      Author's profile photo Thomas Maatz
      Thomas Maatz

      Sorry i did not see your answer. We're on 1.52.31.

      Author's profile photo Mark Castle
      Mark Castle

      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>
      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      I will check and update you on this

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Mark,

      Apologies for the delay. Do you continue to face this issue? Can you provide further details on the chart type used and the UI5 version

      Author's profile photo Mohammed Ehab
      Mohammed Ehab

      Hi Mark,

      If you are still facing this issue, could you please share which version of UI5 you are running?

       

      Author's profile photo Mark Castle
      Mark Castle

      Chart type I used in the example code was a stacked column chart card.  The overview page was still in Web IDE with UI5 version 1.52

      Author's profile photo Janith Illangakoon
      Janith Illangakoon

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hi Janith,

      Few things that can be checked are:

      • Is the KPI annotation mentioned correctly in the manifest setting for the analytic card?
      • Does the KPI annotation have a defaultPresentationVariant maintained correctly?
      Author's profile photo Janith Illangakoon
      Janith Illangakoon

      How to define a KPI annotation and presentation variant correctly.

      Is there any guide explaining these annotations and samples of how to use them in OVP cards.

      KPI annotation

      SelectionVariant

      PresentationVariant

      SelectionPresentationVariant

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Apologies, please try this link: https://sapui5.hana.ondemand.com/1.58.7/#/topic/65731e6b823240398e33133908efdaa1

      Author's profile photo Janith Illangakoon
      Janith Illangakoon

      Hi,

      Thanks for your support Is there any way render a Datetime property as a date range filter in the filter bar of the overview page

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Will be available with upcoming releases, not available as of now

      Author's profile photo Maxim Creve
      Maxim Creve

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Maxim,

       

      I have uploaded the project with mockdata and sample annotation files for all the 3 chart types discussed here.

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Prasita

       

      Couldn't find the demo for line chart? could you tell the name?

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Please check the first card in the manifest card00 and annotation:

      com.sap.vocabularies.UI.v1.KPI#LineChart

       

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Thanks

      Author's profile photo Dieter Etscho
      Dieter Etscho

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Dieter,

       

      Which version of SAPUI5 have you tried this with?

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author
      "ChartProperties" : {
         "plotArea" : {
            "isSmoothed" : true
         }
      }
      
      is available starting SAPUI5 1.48
      Author's profile photo Dieter Etscho
      Dieter Etscho

      Hello Prasita,

      I'm using sapui5 version 1.44, as it's the latest version for webIDE personal edition.

      Thank you for the fast reply!

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      drawingEffect cannot be changed in OVP

      Author's profile photo Maxim Creve
      Maxim Creve

      Hi Prasita Prabhakaran

      I forgot to thank you for the great blog in my previous post. I managed to figure out my questions on my own eventually.

      Do you know if we can use a “Combined stacked column and line chart” inside our OVP as mentioned in https://experience.sap.com/fiori-design-web/chart-types/

      Thanks in advance,

      Maxim

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      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

      Author's profile photo Vural Cakir
      Vural Cakir

      Hi Prasita Prabhakaran

       

      do you have a Annotation example for “Combined stacked column and line chart”? I tried it with Annotations but could not get it done.

       

      Regards

       

      Vural

      Author's profile photo Maxim Creve
      Maxim Creve

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Maxim,

      I shall check this further and get back to you once we have made progress on it.

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      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.

      Author's profile photo Janith Illangakoon
      Janith Illangakoon

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Janith,

      Yes this can be done by specifying authorisation for the required cards. You will find the details here.

      Regards,

      Prasita

      Author's profile photo Mohammed Qaiser
      Mohammed Qaiser

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      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

      Author's profile photo Kimi Xu
      Kimi Xu

      Hi,

      is there any tooltip for dimension axis?

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

      Thanks,

       

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      No, Tooltips are in general not used in OVP. The only exception is the tooltip for data points in charts.

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

       

      Hi Prasita,

      Is it possible to change the navigation type for analytrical cards using docustomnavigation method?

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Prasita Prabhakaran

       

      My x-axis shows as months while I want to display as dates. How to scale axis like this?

      Author's profile photo Maxim Creve
      Maxim Creve

      Akshaya,

       

      How does your oData look?

       

      Kind regards,

      Maxim

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Check for the data returned by your service.

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Prasita,

      how have u added the target and deviation on the right side in line chart?

      Author's profile photo Maxim Creve
      Maxim Creve

      Akshaya,

      This blog describes the actual card bodies. Your question is related to the card headers.

      You can refer to:

      https://blogs.sap.com/2018/10/11/overview-page-ovp-card-headers/

      Kind regards,

      Maxim

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      You can find details of the header are configuration documented here

      Author's profile photo Hian Joy
      Hian Joy

      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

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Tooltip is shown by default and the legend placement cannot be customised as of now

      Author's profile photo Aqib Jamil Pathan
      Aqib Jamil Pathan

      Hi! Prasita,

      Excellent blog and very informative.

      We have a requirement in "Accounts Payable Overview" OVP page where it displays "Parked Invoices" card with "# of average days", to display this number in different colors depending on certain range e.g. 1 to 50 in Green color, 51 to 100 in Yellow color etc.

      Do you know if this is can be achieved?

      Regards,

      AQIB

      Author's profile photo Prasita Prabhakaran
      Prasita Prabhakaran
      Blog Post Author

      Hello Aqib,

      Thanks for your comments. This can be acheived using criticality colouring as done also for the Cash Discound Utilization on the same Accounts Payable Overview app.

      Details can be found here

      Author's profile photo Aqib Jamil Pathan
      Aqib Jamil Pathan

      Many Thanks!

      Author's profile photo Umer Farooq
      Umer Farooq

      Hi Prasita,

       

      Thank you for the detailed blog that helped us a lot in basic understanding of the OVP Analytical cards. However, following are my questions that I did not seem to find in the comments. Appreciate your response on these

      SAPUI5 Version: 1.52.9

      1- Can we hide the legend from the Column Chart?

      2- Can we show the data labels for the column bars?

      3- Can we show the Axis titles for Value and Category Axis?

      4- Do we have a complete documentation of "ChartProperties" that you used in manifest? What other flexibility is there?

       

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

       

      Thanks,

      Farooq

      Author's profile photo Sakthi kumar
      Sakthi kumar

      Hi @Prasita Prabhakaran ,

      Is it possible to show a property(which is not a measure/dimension) and its value as tooltip on analytic chart hover?

      Author's profile photo Fennet Louis
      Fennet Louis

      hi@prasita.prabhakaran

       

      i am not able to change the line color n the line chart using OverView Page.I want to change the colour according to client’s preference.Could you please guide me in the same.I am a fresher and i tried the above example also but im not able to see the changesafter adding colourPalette in the manifest.json

      Author's profile photo Nuno Ribeiro
      Nuno Ribeiro

      Hello guys, thank you for this blog.

       

      Do you know if we can change the word "Target" in the OVP Card Header?

      In this case I'm setting the Target as the amount from the previous month and I would like to see "Prev. Month" instead of "Target".

       

      Thanks,

      Nuno.

      Author's profile photo Shweta .
      Shweta .

      How to display Stacked column chart card like this, please let me know

      Author's profile photo Sri Vishwak Ramesh
      Sri Vishwak Ramesh

      Hi Prasita Prabhakaran , the requirement is to use custom colours in a Donut chart. Is there a possibility to add our custom colours to the chart ? I have tried colour pallette in manifest.json even though the colour is not changing.
      Please let us know if there is a way to change the colours in Donut chart.

      Thank you

      Author's profile photo Smriti Gupta
      Smriti Gupta

      Hello Prasita Prabhakaran

       

      Thanks for the nice blog. Can you please suggest if it's possible to change the placement of legend in the donut card.

      In my case, all legends are not getting displayed by default whereas  a lot of space exists between chart and legend. Can I place the legends at the upper right corner of the card. Currently the legends are present at the bottom of the card.

      Thanks,

      Smriti