Skip to Content
Author's profile photo Joseph BERTHE

Fiori Elements: OVP Donut’s card

In that post, I will exclusively discuss about how to show up a donut graph in a card. Because the Dunot graph is useful and interesting when we want to visualize important data, I wanted to explain to the community how to do it.

How to create a Dunot card?

Let’s start by explaining some terminology:

  • Measure: this is the numerical data which is show as a pice of donut
  • Dimension : is the legend or the description of the business data

For the dunot graph, we will have to use only one measure and one dimension.

Manifest.json

The minum settings to make the dunot graph working is the following :

"com.myCompany.sd.dt.summary_card01": {
        "model": "ZMY_MODEL",
        "template": "sap.ovp.cards.charts.analytical",
        "settings": {
            "title": "{{com.myCompany.sd.dt.summary_card01_title}}",
            "subTitle": "{{com.myCompany.sd.dt.summary_card01_subTitle}}",
            "entitySet": "MYEntitySet",
            "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#MyQualifierStat"
         }
}

Annotation.xml

I will not explain how to create an annotation file for Overview Page thus what we have to do is adding the UI.Chart annotation. You should position your annotation into the MYEntitySet :

<Annotations Target="ZMYModel.MYEntitySet">
    <Annotation Term="UI.Chart" Qualifier="MyQualifier">
        <Record Type="UI.ChartDefinitionType">
            <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Donut" />
            <PropertyValue Property="MeasureAttributes">
                <Collection>
                    <Record Type="UI.ChartMeasureAttributeType">
                        <PropertyValue Property="Measure" PropertyPath="Measure" />
                        <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
                    </Record>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="DimensionAttributes">
                <Collection>
                    <Record Type="UI.ChartDimensionAttributeType">
                        <PropertyValue Property="Dimension" PropertyPath="Dimension1" />
                        <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />
                    </Record>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="Measures">
                <Collection>
                    <PropertyPath />
                </Collection>
            </PropertyValue>
            <PropertyValue Property="Actions" />
            <PropertyValue Property="Title" String="My Donut Chart" />
            <PropertyValue Property="Dimensions">
                <Collection>
                    <PropertyPath />
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>
</Annotations>

The data

For this example here is the data I have generated :

{
  "d": {
    "results": [
      {
        "Vbeln": "1234",
        "Measure": "1E1",
        "Dimension1": "Demo 1",
        "Dimension2": "1E1"
      },
      {
        "Vbeln": "1235",
        "Measure": "2E1",
        "Dimension1": "Demo 2",
        "Dimension2": "2E1"
      },
      {
        "Vbeln": "1236",
        "Measure": "3E1",
        "Dimension1": "Demo 3",
        "Dimension2": "3E1"
      }
    ]
  }
}

The result

Enjoy

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Hannes Kilger
      Hannes Kilger

      Thank you great help!

      Author's profile photo Alejandro Sedano González
      Alejandro Sedano González

      Hi,

      Great blog,

      ¿Is it possible to show the values in the donut as percentages?

       

      Thanks

       

      Author's profile photo Davi Costa Batista
      Davi Costa Batista

      Perfect, you help me a lot with this post. Thanks!