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.

31 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) 
  2. 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

    (0) 
    1. Prasita Prabhakaran
      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

      (0) 
  3. 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

    (0) 
    1. Prasita Prabhakaran
      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

      (0) 
      1. 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

        (0) 
  4. Former Member

    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

    (0) 
    1. Prasita Prabhakaran
      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

      (0) 
  5. 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

    (0) 
  6. 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.

    (0) 
      1. 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.

        (0) 
  7. 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

    (0) 
  8. Simon Perstorfer

    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

    (0) 
    1. Prasita Prabhakaran
      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.

      (0) 
  9. 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>
    (0) 
  10. 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

    (0) 
    1. Prasita Prabhakaran
      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?
      (0) 
      1. 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

        (0) 
  11. Maxim Crève

    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

    (0) 

Leave a Reply